How to use the react-native-redash.onGestureEvent 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.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github molenzwiebel / Mimic / frontend / components / FullscreenOverlay.tsx View on Github external
stiffness: 150,
            overshootClamping: false,
            restSpeedThreshold: 0.1,
            restDisplacementThreshold: 0.1
        }).start();
    };

    useEffect(() => {
        Animated.timing(translationY, {
            toValue: visible ? 0 : SCREEN_HEIGHT,
            duration: 300,
            easing: Easing.ease
        }).start();
    }, [visible]);

    const gestureHandler = onGestureEvent({
        state,
        translationY,
        velocityY
    });

    // Make sure we cannot drag up above the limit.
    const translateY = translationY.interpolate({
        inputRange: [0, SCREEN_HEIGHT],
        outputRange: [0, SCREEN_HEIGHT],
        extrapolateLeft: Extrapolate.CLAMP
    });

    useCode(
        // If we stopped dragging...
        () =>
            cond(eq(state, State.END), [
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / ClickWheel / ClickWheel.tsx View on Github external
export default ({ alpha, command }: ClickWheelProps) => {
  const [state, x, y] = useValues([State.UNDETERMINED, 0, 0, 0, 0], []);
  const deltaX = useDiff(x, []);
  const deltaY = useDiff(y, []);
  const gestureHandler = onGestureEvent({ state, x, y });
  const x0 = cond(eq(state, State.ACTIVE), sub(x, deltaX), x);
  const y0 = cond(eq(state, State.ACTIVE), sub(y, deltaY), y);
  const a0 = canvas2Polar({ x: x0, y: y0 }, center).alpha;
  const a = canvas2Polar({ x, y }, center).alpha;
  const da = delta(a0, a);
  useCode(() => block([set(alpha, max(add(alpha, da), 0))]), [alpha, da]);
  return (
    <View style={styles.container}>
      <View style={styles.center} />
      <Buttons {...{ command }}>
        <PanGestureHandler {...gestureHandler}>
          <Animated.View style={StyleSheet.absoluteFill} />
        </PanGestureHandler>
      </Buttons>
      <Stickers />
    </View>
github wcandillon / can-it-be-done-in-react-native / the-5-min / src / components / TapHandler.tsx View on Github external
export default ({ onPress, children, value }: TapHandlerProps) => {
  const shouldSpring = new Value(0);
  const state = new Value(UNDETERMINED);
  const gestureHandler = onGestureEvent({ state });
  useCode(
    block([
      cond(eq(state, BEGAN), set(shouldSpring, 1)),
      cond(contains([FAILED, CANCELLED], state), set(shouldSpring, 0)),
      onChange(state, cond(eq(state, END), call([], onPress))),
      cond(eq(state, END), [delay(set(shouldSpring, 0), duration)]),
      cond(
        and(eq(shouldSpring, 1), neq(value, 1)),
        set(
          value,
          timing({
            from: value,
            to: 1,
            easing,
            duration
          })
github wcandillon / can-it-be-done-in-react-native / season3 / src / LiquidSwipe / LiquidSwipe.tsx View on Github external
export default () => {
  const y = new Value(initialWaveCenter);
  const translationX = new Value(0);
  const velocityX = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const gestureHandler = onGestureEvent({
    translationX,
    velocityX,
    y,
    state
  });
  const isBack = new Value(0);
  const gestureProgress = cond(
    isBack,
    interpolate(translationX, {
      inputRange: [0, width - initialSideWidth],
      outputRange: [1, 0]
    }),
    interpolate(translationX, {
      inputRange: [-width, initialSideWidth],
      outputRange: [0.4, 0]
    })
github wcandillon / can-it-be-done-in-react-native / season3 / src / components / AnimationHelpers.ts View on Github external
export const verticalPanGestureHandler = () => {
  const translationY = new Value(0);
  const velocityY = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const gestureHandler = onGestureEvent({
    translationY,
    velocityY,
    state
  });
  return {
    translationY,
    state,
    velocityY,
    gestureHandler
  };
};
github wcandillon / can-it-be-done-in-react-native / season2 / spotify-player / components / BottomTab.tsx View on Github external
export default () => {
  const translationY = new Value(0);
  const velocityY = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const offset = new Value(SNAP_BOTTOM);
  const goUp: Animated.Value<0 | 1> = new Value(0);
  const goDown: Animated.Value<0 | 1> = new Value(0);
  const gestureHandler = onGestureEvent({
    state,
    translationY,
    velocityY
  });
  const translateY = withSpring({
    value: translationY,
    velocity: velocityY,
    offset,
    state,
    snapPoints: [SNAP_TOP, SNAP_BOTTOM],
    config
  });
  const translateBottomTab = interpolate(translateY, {
    inputRange: [SNAP_TOP, SNAP_BOTTOM],
    outputRange: [TABBAR_HEIGHT, 0],
    extrapolate: Extrapolate.CLAMP
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / ClickWheel / Buttons.tsx View on Github external
export default ({ command, children }: ButtonsProps) => {
  const [state, x, y] = useValues([State.UNDETERMINED, 0, 0], []);
  const tapGestureHandler = onGestureEvent({ state, x, y });
  useCode(
    () =>
      block([
        cond(eq(state, State.END), [
          cond(
            isInRegion(x, y, TOP),
            set(command, Command.TOP),
            cond(
              isInRegion(x, y, BOTTOM),
              set(command, Command.BOTTOM),
              cond(
                isInRegion(x, y, LEFT),
                set(command, Command.LEFT),
                cond(
                  isInRegion(x, y, RIGHT),
                  set(command, Command.RIGHT),
github wcandillon / can-it-be-done-in-react-native / season2 / bbc-iplayer / components / PanGesture.tsx View on Github external
export default ({ index, ratio, length, isActive }: PanGestureProps) => {
  const clock = new Clock();
  const shouldSnap = new Value(0);
  const translationX = new Value(0);
  const velocityX = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const gestureEvent = onGestureEvent({
    translationX,
    velocityX,
    state
  });
  const translateX = preserveOffset(translationX, state);
  const increment = divide(diff(translateX), ratio);
  const setIndex = (value: Animated.Node<number>) =>
    set(index, modulo(value, length));
  useCode(
    block([
      setIndex(sub(index, increment)),
      cond(eq(state, State.BEGAN), [stopClock(clock), set(isActive, 1)]),
      cond(eq(state, State.END), [
        set(state, State.UNDETERMINED),
        set(shouldSnap, 1)
      ]),