react-native-squircle-view

Apple flavored curvature continuity for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeSquircleView from 'https://cdn.skypack.dev/react-native-squircle-view';
</script>

README

SquircleView

Apple flavored curvature continuity for React Native

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>

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.