react-native-squircle-mask

Squircle corners for React Native views

Features

• Supported on both iOS and Android
• Works with Expo Managed Workflow (no native code!)
• Easily implementable with MaskedView

Preview | | | | |------|---------|---------------|

Installation

This module library is available on the NPM registry. To install, run:

npm i react-native-squircle-mask --save

If you're using Yarn, run:

yarn add react-native-squircle-mask

Additional Comments

You may also want to install @react-native-community/masked-view, see the usage guides for more

Usage

import React from 'react'
import { View } from 'react-native'

import MaskedView from '@react-native-community/masked-view'
import SquircleView from 'react-native-squircle-mask'

function MyComponent() {
  const maskSquircle = <SquircleView style={{ width: 250, height: 250 }} roundedSize={250/2.5} />

  return (
    <MaskedView style={{ flex: 1 }} maskElement={maskSquircle}>
      <View style={{flex: 1, backgroundColor: 'red' }} />
    </MaskedView>
  )
}

Example

See the example/ folder for an example you can run on Expo.

Alternatively, check out the Expo Project here

License

MIT