How to use the react-native-redash.approximates 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 / bbc-iplayer / components / ChannelIcon.tsx View on Github external
export default ({
  name,
  radius,
  isActive,
  index,
  currentIndex
}: ChannelIconProps) => {
  const clock = new Clock();
  const value = new Value(0);
  useCode(
    block([
      cond(and(not(isActive), approximates(index, currentIndex)), [
        set(value, runSpring(clock, 0, 1)),
        cond(not(clockRunning(clock)), set(isActive, 0))
      ]),
      cond(isActive, [stopClock(clock), set(value, 0)])
    ]),
    []
  );
  const backgroundColor = interpolateColor(
    value,
    {
      inputRange: [0, 1],
      outputRange: [nonActiveColor, activeColor]
    },
    "rgb"
  );
  return (
github wcandillon / can-it-be-done-in-react-native / season2 / safari-tabs / components / Content.tsx View on Github external
() => ({
      onGestureEvent: gestureEvent({
        translationX,
        velocityX,
        state
      }),
      translateX: spring(
        translationX,
        state,
        snapPoint(translationX, velocityX, snapPoints)
      )
    }),
    [state, translationX, velocityX]
  );
  useCode(
    cond(approximates(abs(translateX), EXTREMITY, 10), call([], closeTab)),
    [translateX, closeTab]
  );
  return (
    <PanGestureHandler
      activeOffsetX={[-10, 10]}
      onHandlerStateChange={onGestureEvent}
      {...{ onGestureEvent }}
    >
      <Animated.View style={{ flex: 1, transform: [{ translateX }] }}>
        <Image style={styles.image} {...{ source }} />
      </Animated.View>
    </PanGestureHandler>
  );
};