callstack / callstack/masked-view

Masked images do not render on Android

Open
#126 7 comments 13 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.2k
Forks
131
PR merge metrics
No merged PRs in 30d

Description

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:

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

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

return (


}>



);
}

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?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.