How do i give stroke arround clipped shape?

[Kaizodo]

This is the code i am using

 <MaskedView
                    style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
                    maskElement={
                        <Svg width="100%" height="100%" viewBox={state.viewBox}>
                            <Path d={state.path} fill="red" />
                        </Svg>
                    }
                >
                    {children}
                </MaskedView>

as you can see i am giving a svg element as mask and works perfectly fine however i want to add border arroud clipped shape for eample if i add a hart shape i want a border arround that shape but right if i give any kind of stroke in svg it just clips that stroke as well,

anyone if you guys have any solution it would be really helpful.

[dominik-mrugalski]

Ok, I've solved that problem in this way (simplified code):

<View> // main container
  <View style={[styles.mask, {
    backgroundColor: 'transparent',
  }]}></View> // duplicated element (with override for backgroundColor: transparent!)
  <MaskedView
    style={[...]}
    maskElement={
      <View style={styles.maskWrapper}>
        <View style={[styles.mask]}></View>  // duplicated element
      </View>
    }
  >
[... whole content page ...]
  </MaskedView>
</View>

const styles = StyleSheet.create({
[...] // other styles,
  mask: {
    [...],
    borderWidth: 2,
    borderColor: "green",
    backgroundColor:'black'
  },
});

The most important think is duplicate masked (clipped) element, in my example View object with styles.mask class. It works perfectly fine for both, ios and android (ReactNative Expo).