Apple flavored curvature continuity for React Native

Getting started

yarn add react-native-super-ellipse-mask

Usage

<SquircleView style={styles.whatever} interpolatePath={true}>
  ...
</SquircleView>

Props

• useHWLayer bool: Android-only, used to toggle on the HW layer in cases where the children of SquircleView are too large to fit in a SW layer
• interpolatePath bool: Interpolates the corner shape from super elliptical to circular. Defaults to true

Caveats

If XCode gives you a linker error and many warnings like Auto-Linking library not found for -lswiftCoreGraphics just add an empty swift file to the root of your .xcodeproj (Source)

Known Issues

• Non compliant CSS borders: Currently this library doesn't support CSS compliant borders (like React Native's <View/> does).
• Limited corner radius: The maximum corner radius for each corner can't be greater than half of the smallest side of the view.
• Cannot be wrapped by Touchable: If you need to make a full tappable card, make sure SquircleView is wrapping Touchable to allow it to mask the children correctly and render its shadow.
• Shadows: Due to implementation issues with Android, currently shadows are implemented using a View wrapping the native component. Therefore, the shadow is based on a border radius instead of being squircle.