How to use the react-native-redash.snapPoint 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 wcandillon / can-it-be-done-in-react-native / season3 / src / LiquidSwipe / LiquidSwipe.tsx View on Github external
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]
    })
  );
  const point = snapPoint(
    gestureProgress,
    divide(multiply(-1, velocityX), width),
    [0, 1]
  );
  const progress = snapProgress(gestureProgress, state, isBack, point);
  const centerY = followPointer(y);
  const horRadius = cond(
    isBack,
    waveHorRadiusBack(progress),
    waveHorRadius(progress)
  );
  const vertRadius = waveVertRadius(progress);
  const sWidth = sideWidth(progress);
  // useCode(debug("progress", progress), []);
  return (
    <View style={styles.container}>
github wcandillon / can-it-be-done-in-react-native / season2 / bbc-iplayer / components / PanGesture.tsx View on Github external
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)
      ]),
      cond(eq(shouldSnap, 1), [
        setIndex(
          runSpring(
            clock,
            index,
            snapPoint(index, divide(velocityX, -ratio), [
              ceil(index),
              floor(index)
            ]),
            springConfig
          )
        ),
        cond(not(clockRunning(clock)), [set(shouldSnap, 0), set(isActive, 0)])
      ])
    ]),
    []
  );
  return (
    <PanGestureHandler {...gestureEvent}>
      <Animated.View style={StyleSheet.absoluteFill} />
    </PanGestureHandler>
  );
github wcandillon / can-it-be-done-in-react-native / season2 / spotify-player / components / AnimatedHelpers / Gestures.ts View on Github external
? [cond(clockRunning(clock), call([springState.position], onSnap))]
    : [];

  return block([
    cond(isSpringInterrupted, finishSpring),
    cond(neq(state, State.END), [
      set(springState.finished, 0),
      set(springState.position, add(offset, value))
    ]),
    cond(eq(state, State.END), [
      cond(and(not(clockRunning(clock)), not(springState.finished)), [
        set(springState.velocity, velocity),
        set(springState.time, 0),
        set(
          config.toValue,
          snapPoint(springState.position, velocity, snapPoints)
        ),
        startClock(clock)
      ]),
      reSpring(clock, springState, config),
      cond(springState.finished, [
        ...snap,
        ...finishSpring,
        set(state, State.UNDETERMINED),
        set(value, 0)
      ])
    ]),
    springState.position
  ]);
};
github wcandillon / can-it-be-done-in-react-native / season3 / src / Things / ScrollView.tsx View on Github external
)
          )
        ),
        set(state.velocity, velocityY),
        set(state.time, 0)
      ],
      [
        set(translationY, 0),
        cond(
          and(isInBound, not(isSpringing)),
          [decay(clock, state, { deceleration: 0.997 })],
          [
            set(isSpringing, 1),
            set(
              config.toValue,
              snapPoint(state.position, state.velocity, [
                lowerBound,
                upperBound
              ])
            ),
            spring(clock, state, config)
          ]
        )
      ]
    ),
    state.position
  ]);
};
const styles = StyleSheet.create({
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]
github wcandillon / can-it-be-done-in-react-native / bonuses / tinder-swipe / components / Interactable.tsx View on Github external
() => block([
              cond(eq(state, State.END), [
                set(snapPointX, snapPoint(translationX, velocityX, points)),
                set(spring, runSpring(clock, 0, 1)),
                cond(
                  eq(clockRunning(clock), 0),
                  call([snapPointX], ([x]) => onSnap({ nativeEvent: { x } })),
                ),
              ]),
              set(
                x,
                cond(
                  eq(state, State.ACTIVE),
                  translationX,
                  binaryInterpolation(spring, translationX, snapPointX),
                ),
              ),
              set(
                y,