everdrone / react-native-squircle-view

Apple flavored curvature continuity for React Native

Apple flavored curvature continuity for React Native

Sponsors

Getting started

yarn add react-native-super-ellipse-mask

Mostly automatic installation

react-native link react-native-squircle-view

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries > Add Files to [your project's name]
2. Go to node_modules > react-native-squircle-view and add RNSquircleView.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNSquircleView.a to your project's Build Phases > Link Binary With Libraries
4. Run your project (Cmd+R)<

Usage

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

Props

• 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.