How to use react-native-redash - 10 common examples

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 / 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 (
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 / 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 / season2 / safari-tabs / components / Tabs.tsx View on Github external
export default ({ tabs: tabsProps }: TabsProps) => {
  const ref = useRef();
  const [tabs, setTabs] = useState([...tabsProps]);
  const [selectedTab, setSelectedTab] = useState(OVERVIEW);
  const transitionVal = useTransition(
    selectedTab,
    neq(selectedTab, OVERVIEW),
    eq(selectedTab, OVERVIEW),
    durationMs,
    easing
  );
  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
    );
github wcandillon / can-it-be-done-in-react-native / the-5-min / src / Accordion / Chevron.tsx View on Github external
export default ({ transition }: ChevronProps) => {
  const rotateZ = bInterpolate(transition, Math.PI, 0);
  const backgroundColor = bInterpolateColor(
    transition,
    { r: 82, g: 82, b: 81 },
    { r: 228, g: 86, b: 69 }
  );
  return (
    
      
    
  );
};
github wcandillon / can-it-be-done-in-react-native / season2 / monzo-card-selection / components / CardSelection2.tsx View on Github external
onChange(nextIndex, [
        cond(and(not(clockRunning(clock)), neq(nextIndex, selectedCard)), [
          set(selectedCard, nextIndex),
          call([selectedCard], selectCardState)
        ])
      ]),
      cond(eq(selectedCard, INITIAL_INDEX), [
        set(spring, timing(clock)),
        set(cardRotates[0], bInterpolate(spring, 0, -15)),
        set(cardRotates[1], 0),
        set(cardRotates[2], bInterpolate(spring, 0, 15))
      ]),
      cond(and(neq(selectedCard, INITIAL_INDEX), not(firstSelectionIsDone)), [
        set(spring, timing(clock)),
        set(cardRotates[0], bInterpolate(spring, 0, -7.5)),
        set(cardRotates[1], bInterpolate(spring, 0, 7.5)),
        set(cardRotates[2], bInterpolate(spring, 15, 0)),
        set(translationX, bInterpolate(spring, translationX, 0)),
        cond(not(clockRunning(clock)), set(firstSelectionIsDone, 1))
      ]),
      ...cards.map((_, index) =>
        cond(and(firstSelectionIsDone, eq(selectedCard, index)), [
          set(spring, timing(clock)),
          ...cards
            .map((_c, i) => i)
            .filter((_c, i) => i !== index)
            .map((absoluteIndex, i) =>
              set(
                cardRotates[absoluteIndex],
                bInterpolate(
                  spring,
                  cardRotates[absoluteIndex],
github wcandillon / can-it-be-done-in-react-native / season2 / monzo-card-selection / components / CardSelection2.tsx View on Github external
cond(and(not(clockRunning(clock)), neq(nextIndex, selectedCard)), [
          set(selectedCard, nextIndex),
          call([selectedCard], selectCardState)
        ])
      ]),
      cond(eq(selectedCard, INITIAL_INDEX), [
        set(spring, timing(clock)),
        set(cardRotates[0], bInterpolate(spring, 0, -15)),
        set(cardRotates[1], 0),
        set(cardRotates[2], bInterpolate(spring, 0, 15))
      ]),
      cond(and(neq(selectedCard, INITIAL_INDEX), not(firstSelectionIsDone)), [
        set(spring, timing(clock)),
        set(cardRotates[0], bInterpolate(spring, 0, -7.5)),
        set(cardRotates[1], bInterpolate(spring, 0, 7.5)),
        set(cardRotates[2], bInterpolate(spring, 15, 0)),
        set(translationX, bInterpolate(spring, translationX, 0)),
        cond(not(clockRunning(clock)), set(firstSelectionIsDone, 1))
      ]),
      ...cards.map((_, index) =>
        cond(and(firstSelectionIsDone, eq(selectedCard, index)), [
          set(spring, timing(clock)),
          ...cards
            .map((_c, i) => i)
            .filter((_c, i) => i !== index)
            .map((absoluteIndex, i) =>
              set(
                cardRotates[absoluteIndex],
                bInterpolate(
                  spring,
                  cardRotates[absoluteIndex],
                  7.5 * (i % 2 === 0 ? -1 : 1)
github wcandillon / can-it-be-done-in-react-native / season2 / monzo-card-selection / components / CardSelection.tsx View on Github external
};
  useCode(
    block([
      cond(and(not(clockRunning(clock)), neq(nextIndex, selectedCard)), [
        set(selectedCard, nextIndex),
        call([selectedCard], selectCardState)
      ]),
      cond(eq(selectedCard, INITIAL_INDEX), [
        set(spring, timing(clock)),
        set(cardRotates[0], bInterpolate(spring, 0, -15)),
        set(cardRotates[1], 0),
        set(cardRotates[2], bInterpolate(spring, 0, 15))
      ]),
      cond(and(neq(selectedCard, INITIAL_INDEX), not(firstSelectionIsDone)), [
        set(spring, timing(clock)),
        set(cardRotates[0], bInterpolate(spring, 0, -7.5)),
        set(cardRotates[1], bInterpolate(spring, 0, 7.5)),
        set(cardRotates[2], bInterpolate(spring, 15, 0)),
        set(translationX, bInterpolate(spring, translationX, 0)),
        cond(not(clockRunning(clock)), set(firstSelectionIsDone, 1))
      ]),
      ...cards.map((_, index) =>
        cond(and(firstSelectionIsDone, eq(selectedCard, index)), [
          set(spring, timing(clock)),
          ...cards
            .map((_c, i) => i)
            .filter((_c, i) => i !== index)
            .map((absoluteIndex, i) =>
              set(
                cardRotates[absoluteIndex],
                bInterpolate(
                  spring,
github wcandillon / can-it-be-done-in-react-native / season2 / monzo-card-selection / components / CardSelection2.tsx View on Github external
.map((absoluteIndex, i) =>
              set(
                cardRotates[absoluteIndex],
                bInterpolate(
                  spring,
                  cardRotates[absoluteIndex],
                  7.5 * (i % 2 === 0 ? -1 : 1)
                )
              )
            ),