Reanimated support - Githubissues

Hello Mr @peterjskaltsis honestly I gave it quite a lot of time to implement it, and for the lack of examples with the expo native view I wasn't able to figure out how to exactly do it, so I might give it some time in the future. (would appreciate if you can help or connect me with someone who can)

some technical bluff of why its not straight forward -> the squircle view renders 2 views (wrapper view) and (native view) native view renders a (layer) that controls borderRadius, borderWidth, backgroundColor to apply the squircle effect. this is why something like createAnimatedComponent didn't work as it always tries to manipulate the wrapper view not the rendered squircle layer.

as of now, your best bet is to create a wrapper Animatd.View and control things like width height opacity and other positioning elements will also animate fine.

the things that you won't be able to animate are (borderRadius, borderWidth, backgroundColor)

here is a simple example how it would look like

const widthSV = useSharedValue(WIDTH);
  const scaleSV = useSharedValue(0.9);
  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: widthSV.value,
      flexDirection: 'row-reverse',
      transform: [{ scale: scaleSV.value }]
    }
  })

  <Animated.View style={{...animatedStyle }}>
    <SquircleView
      cornerSmoothing={cornerSmoothing}
      preserveSmoothing={PRESERVE_SMOOTHING}
      style={{
        flex: 1,
        height,
        padding,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: BACKGROUND_COLOR,
        borderColor: BORDER_COLOR,
        borderRadius: cornerRadius,
        borderWidth: borderWidth,
        overflow: 'hidden',
      }}
    >
      <Text>Squircle</Text>
      <View style={{ backgroundColor: 'yellow', height: 20, width: '100%' }} />
      <View style={{ height: '50%', width: 100, backgroundColor: 'green', position: 'absolute', start: -50, top: 0, opacity: 0.8 }} />
    </SquircleView>
  </Animated.View>

Malaa-tech / expo-squircle-view

Reanimated support #4