Masked images do not render on Android

I’m using the react-native-figma-squircle package alongside this package, for whatever reason the following code renders nothing of the underlying image at all on Android, however it works perfectly fine on iOS:

type Props = { uri: string; size: number; style?: ViewStyle };

function PerkLogo({ uri, size, style }: Props) {
  const dimensionsStyle = { width: size, height: size };

  return (
    <View style={[styles.imageContainer, dimensionsStyle, style]}>
      <MaskedView
        // style={[mainStyles.overflowHidden]}
        maskElement={
          <SquircleView
            style={StyleSheet.absoluteFill}
            squircleParams={{
              cornerSmoothing: 1,
              fillColor: colors.white,
              cornerRadius: 30,
            }}
          />
        }>
        <Image source={{ uri: CDN(uri) }} style={[styles.image, dimensionsStyle]} />
      </MaskedView>
    </View>
  );
}

const styles = StyleSheet.create({
  imageContainer: {
    // backgroundColor: '#fff',
    borderRadius: defaultBorderRadius,
    overflow: 'hidden',
  },
  image: {
    ...mainStyles.imageBorderRadius,
    resizeMode: 'contain',
  },
});

react-native: 0.63.3 react-native-masked-view: 0.2.5 react-native-figma-squircle: 0.1.2

I’ve wasted hours on this between forcing a re-render using a key prop on MaskedView to changing all the styles of every element in this code. Every once in a while randomly the image shows up when I navigate away from the screen using this component. Otherwise it seems to be completely broken on Android.

Any suggestions? Is this a known bug on Android with image masking?

[lyubo-and]

Have you tried applying the prop androidRenderingMode introduced in this PR

<MaskedView androidRenderingMode="software" {...{ maskElement }}>
...
</MaskedView>

[perroudsky]

thanks @lyubo-and it looks like its working for me!