@alloc/react-native-super-ellipse-mask
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

SuperEllipse

Apple flavored smooth corners for React Native (iOS only).

Screenshots

Individual Corners

Install

yarn add react-native-super-ellipse-mask

Link

Automatic

react-native link react-native-super-ellipse-mask

Manual

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-super-ellipse-mask and add RNSuperEllipseMask.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNSuperEllipseMask.a to your project's Build Phases > Link Binary With Libraries
  4. Run your project (Cmd+R)

Usage

<SuperEllipseMask radius={30}>
  <View
    style={{
      width: 200,
      height: 300,
      backgroundColor: 'black',
    }}
  />
</SuperEllipseMask>

Props

  • radius object | number: Sets the corner radius.
    • number: uniform corner radius.
    • object: {topLeft, topRight, bottomRight, bottomLeft}

Contribute

Found a bug? File an issue
Already know how to fix it? Open a Pull Request

Package Sidebar

Install

npm i @alloc/react-native-super-ellipse-mask

Weekly Downloads

2

Version

0.1.0

License

MIT

Unpacked Size

18.4 kB

Total Files

12

Last publish

Collaborators

  • aleclarson