How to use the react-native-redash.decay function in react-native-redash

To help you get started, we’ve selected a few react-native-redash examples, based on popular ways it is used in public projects.

github wcandillon / can-it-be-done-in-react-native / season2 / safari-tabs / components / Tabs.tsx View on Github external
const { onGestureEvent, translateY } = useMemo(() => {
    const translationY = new Value(0);
    const velocityY = new Value(0);
    const state = new Value(State.UNDETERMINED);
    const translateY1 = limit(
      decay(translationY, state, velocityY),
      state,
      -tabsProps.length * 100,
      0
    );
    return {
      translateY: bInterpolate(transitionVal, 0, translateY1),
      onGestureEvent: gestureEvent({
        translationY,
        velocityY,
        state
      })
    };
  }, [tabsProps.length, transitionVal]);
  return (
github wcandillon / can-it-be-done-in-react-native / bonuses / graph-animation / components / Cursor.tsx View on Github external
export default ({ d, r, borderWidth, borderColor }: CursorProps) => {
  const radius = r + borderWidth / 2;
  const translationX = new Value(0);
  const velocityX = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const onGestureEvent = event([
    {
      nativeEvent: {
        translationX,
        velocityX,
        state
      }
    }
  ]);
  const cx = clamp(decay(translationX, state, velocityX), 0, width);
  const path = getPath(d);
  const length = interpolate(cx, {
    inputRange: [0, width],
    outputRange: [0, path.totalLength]
  });
  const { y, x } = getPointAtLength(path, length);
  const translateX: any = sub(x, TOUCH_SIZE / 2);
  const translateY: any = sub(y, TOUCH_SIZE / 2);
  return (
    <View style={StyleSheet.absoluteFill}>
      <PanGestureHandler
        onHandlerStateChange={onGestureEvent}
        {...{ onGestureEvent }}
      >
        <Animated.View
          style={{