phamfoo / react-native-figma-squircle Goto Github PK

Hello!

The stroke doesn't look right both on ios and android.
I've made tests with different rectangle sizes; sometimes it is defaulted, sometimes not.

• ios exemple (look at right side)

• same android exemple (bottom)

the code :

 <SquircleView
    style={{
      width: BUTTONS_WIDTH,
      height: 50,
     }}
    squircleParams={{
     cornerSmoothing: 1,
      cornerRadius: 10,
      strokeWidth: 2,
      strokeColor: "#000",
      fillColor: "#fff",
     }}
    />
<SquircleView
     style={{
      width: BUTTONS_WIDTH,
      height: 50,
     }}
     squircleParams={{
      cornerSmoothing: 0.5,
      cornerRadius: 10,
      fillColor: "pink",
      strokeColor: "red",
      strokeWidth: 2,
     }}
/>

I followed the examples after I "npm i react-native-figma-squircle":

But I got this error on my iPhone:

And this error on my android:

it shows me this error when i tried to use squircle as per your documentation on github

Hey,

Just something to consider, if Skia is available for the app, we could just use Skia.SVG.MakeFromString or similar, to have a more efficient SVG component?

Skia docs: https://shopify.github.io/react-native-skia/docs/images-svg/#svg-support

I get the following error:

"[object Object]" is not a valid color or brush

import { PlatformColor } from 'react-native'

<SquircleView
      style={style}
      squircleParams={{
        cornerSmoothing: 0.7,
        cornerRadius: 30,
        fillColor: PlatformColor(`systemBlue`)
      }}
 />

It's possible?

I tried but it doesn't apply to the border.

nvm. sry

Not sure if it's worth the API break, but I'm wondering if it wouldn't by nicer to map style attributes likeborderColor and backgroundColor instead of having a separate squircleParams attribute.

It would make it easier to use it as a drop in replacement when moving from Views to smooth corners.

In my project I'm using a wrapper like this (ignore the project specific defaults)

Just wondering what you think :)

First off... a great library for creating truly squircle components, thanks a lot for this!
Is it possible to wrap react buttons with this wrapper to get squircle buttons? If yes can you please provide a usage example for the same?

Thanks in advance :)

Versions

• "react-native": "0.64.3"
• "expo": "43.0.0"
• iOS 15
• Android 12.0

Screenshots

• iOS

• Android

Styles

style={{
  ...
  shadowColor: '#000',
  opacity: 0.4,
  shadowOffset: {
    width: 0,
    height: 5,
  },
  shadowOpacity: 0.34,
  shadowRadius: 6.27,

  elevation: 10,
}}

Hello, i have this issue:
[Unhandled promise rejection: Invariant Violation: Invalid URL: should be a string. Was: null] at node_modules/figma-squircle/dist/figma-squircle.cjs.development.js:52:2 in drawTopRightPath

RN: 0.64.3

Hi, I can't apply borders to squircle with an Image

 <MaskedView
    style={{
     height: 78,
     width: 94,
    }}
    maskElement={
     <SquircleView
      style={StyleSheet.absoluteFill}
      squircleParams={{
       cornerRadius: 22,
       cornerSmoothing: 1,
       fillColor: "pink",
       strokeColor: "#000000",
       strokeWidth: 2,
      }}
     />
    }
   >
    <Image
     style={StyleSheet.absoluteFill}
     source={{
      uri: "https://images.unsplash.com/photo-1655219282830-7ecd31afac68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80",
     }}
    />
   </MaskedView>

Greetings!
I am looking for a to use your library in order to apply a border radius (with smoothing) only at the top or bottom of the component.
it actually possible ?

Thanks for your work!