Light

everdrone / react-native-super-ellipse-mask Goto Github PK

View Code? Open in Web Editor NEW

64.0 4.0 3.0 936 KB

Apple flavored smooth corners for React Native

License: MIT License

JavaScript 8.36% Ruby 4.78% Objective-C 86.86%

react-native squircle mask view superellipse apple smooth-corners corners rounded-corners

react-native-super-ellipse-mask's Introduction

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

Screenshots

Install

yarn add react-native-super-ellipse-mask

Link

Automatic

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

Manual

iOS

In XCode, in the project navigator, right click Libraries > Add Files to [your project's name]
Go to node_modules > react-native-super-ellipse-mask and add RNSuperEllipseMask.xcodeproj
In XCode, in the project navigator, select your project. Add libRNSuperEllipseMask.a to your project's Build Phases > Link Binary With Libraries
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

react-native-super-ellipse-mask's People

Contributors

Stargazers

Watchers

Forkers

burnedchris holgersindbaek aleclarson

react-native-super-ellipse-mask's Issues

Not working in android

It is not working in android . i had try to add it mannualy ,

in app build.gradle

compile project(':react-native-super-ellipse-mask')
in Setting.gradle

include ':react-native-super-ellipse-mask'
project(':react-native-super-ellipse-mask').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-super-ellipse-mask/android')

but throwing error

Failed to resolve: project :react-native-super-ellipse-mask
Open File

help me to solve this , library is working fine as expacted in IOS

Submit to native.directory and js.coach

This is a superb module and isn't getting enough attention. We should share to js.coach and native.directory as I did here - rajsuvariya/autocompletetextview#7

Have an option to include Shadows

I been using these as cards and they look great but it would be amazing to also be able to sue shadows

Make this Animated.Component compatible

Mention react-native-squircle-view in the readme?

https://github.com/everdrone/react-native-squircle-view

PS: I ported this library, react-native-super-ellipse-mask, to work on macOS via my fork of react-native-macos. You can see the changes I made here if interested.

I even added borderWidth/borderColor support in this commit, which was especially tricky since I wanted it to be (almost) identical to borders in react-native core. For example, the border must appear under any children and never exist beyond the bounds of the view.

I didn't know about react-native-squircle-view until today, after I finished porting.. 😅

Example Files

It would be great to have an example!

Just testing the package looks good!

Doesn't redraw

If the view redraws with new dimensions, the mask doesn't redraw.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.