react-native-reanimated-bottom-sheet icon indicating copy to clipboard operation
react-native-reanimated-bottom-sheet copied to clipboard

feat(styles): added ability to pass in animated node for border radius

Open hamzahayat opened this issue 5 years ago • 2 comments

Description

This PR adds the ability to be able to pass an animated node into the borderRadius prop, which will allow for animation on that prop.

Example


const SomeComponent = () => {

  const bottomSheetCallbackAnimatedNode = useState<Animated.Value<number>>(new Animated.Value(0));

  // Interpolate based off of callback node
  const bottomSheetBorerRadiusAnimatedNode = Animated.interpolate(bottomSheetCallbackAnimatedValue, {
    inputRange: [0, 1],
    outputRange: [0, 20],
    extrapolate: Animated.Extrapolate.CLAMP,
  });

  return (
    <BottomSheet
      callbackNode={bottomSheetCallbackAnimatedNode}
      borderRadius={bottomSheetBorerRadiusAnimatedNode}
      //...otherProps
    />
  );
}

hamzahayat avatar Nov 09 '20 18:11 hamzahayat

+1

McSam94 avatar Mar 18 '21 08:03 McSam94

@osdnk Thoughts?

hamzahayat avatar Mar 30 '21 19:03 hamzahayat