How to use the react-native-reanimated.sub function in react-native-reanimated

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

github artsy / emission / src / lib / Components / StickyTabPage / StickyTabPageFlatList.tsx View on Github external
],
      [
        // y offset got smaller so scrolling up (content travels down the screen)
        // if velocity is high enough or we're already moving the header up or we're near the top of the scroll view
        // then move the header down (show it)
        Animated.set(amountScrolledUpward, Animated.add(amountScrolledUpward, Animated.abs(scrollDiff))),
        Animated.cond(Animated.or(upwardScrollThresholdBreached, headerIsNotFullyUp, nearTheTop), [
          Animated.set(headerOffsetY, Animated.min(0, Animated.sub(headerOffsetY, scrollDiff))),
        ]),
      ]
    )

    // we don't want to manipulate the header position while bouncing at the top or the bottom of the scroll view
    // cause it feels weeeird
    const notBouncingAtTheTop = Animated.greaterThan(scrollOffsetY, 0)
    const notBouncingAtTheBottom = Animated.lessThan(scrollOffsetY, Animated.sub(contentHeight, layoutHeight))

    const updateHeaderOffsetWhenNotBouncing = Animated.cond(
      Animated.and(notBouncingAtTheTop, notBouncingAtTheBottom),
      updateHeaderOffset,
      [
        Animated.cond(
          notBouncingAtTheTop,
          [
            // bouncing at the bottom,
            // normally the header will be fully up at this point but sometimes
            // the content is not tall enough to cause that, so we still need to
            // update the header position just like above. The only difference is that
            // when the bounce snaps back, we don't want to trigger opening the header
            // like we do when the user explicitly scrolls back upward.
            Animated.cond(
              Animated.greaterThan(scrollDiff, 0),
github artsy / emission / src / lib / Scenes / Partner / Components / StickyHeaderScrollView.tsx View on Github external
Animated.set(headerOffsetY, Animated.max(-headerHeight, Animated.sub(headerOffsetY, scrollDiff))),
        ],
        [
          // y offset got smaller so scrolling up (content travels down the screen)
          // if velocity is high enough or we're already moving the header up or we're near the top of the scroll view
          // then move the header down (show it)
          Animated.cond(Animated.or(upwardVelocityBreached, headerIsNotFullyUp, nearTheTop), [
            Animated.set(headerOffsetY, Animated.min(0, Animated.sub(headerOffsetY, scrollDiff))),
          ]),
        ]
      )

      // we don't want to manipulate the header position while bouncing at the top or the bottom of the scroll view
      // cause it feels weeeird
      const notBouncingAtTheTop = Animated.greaterThan(scrollOffsetY, 0)
      const notBouncingAtTheBottom = Animated.lessThan(scrollOffsetY, Animated.sub(contentHeight, layoutHeight))

      const updateHeaderOffsetWhenNotBouncingOrLocked = Animated.cond(
        Animated.and(notBouncingAtTheTop, notBouncingAtTheBottom, Animated.not(lockHeaderPosition)),
        updateHeaderOffset,
        // deref scroll diff to prevent diff buildup when ignoring changes
        scrollDiff
      )

      // on first eval (when the component mounts) the scroll values will be nonsensical so ignore
      const firstEval = new Animated.Value(1)
      return Animated.cond(
        firstEval,
        [
          Animated.set(firstEval, 0),
          // again, deref scrollDiff to prevent buildup
          scrollDiff,
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / List / List.tsx View on Github external
() =>
      block([
        cond(
          not(inViewport(index, translateY, goingUp)),
          set(
            translateY,
            cond(
              goingUp,
              [add(translateY, ITEM_HEIGHT)],
              [sub(translateY, ITEM_HEIGHT)]
            )
          )
        )
      ]),
    [goingUp, index, translateY]
github osdnk / react-native-reanimated-bottom-sheet / Example / src / screen / AppleMusic.tsx View on Github external
})

    return (
      <AnimatedView style={[styles.contentContainer]}>
        <AnimatedView
          style={[
            styles.contentBackground,
            { opacity: animatedBackgroundOpacity },
          ]}
        />

        <AnimatedView style={{ opacity: animatedContentOpacity }}>
          <AnimatedView
            style={{
              height: Animated.add(
                Animated.sub(animatedSongCoverSize, snapPoints[0]),
                animatedSongCoverTopPosition
              ),
            }}
          />

          <View style={styles.seekBarContainer}>
            <View style={styles.seekBarTrack} />
            <View style={styles.seekBarThumb} />
            <View style={styles.seekBarTimingContainer}>
              <Text style={styles.seekBarTimingText}>0:00</Text>
              <Text style={styles.seekBarTimingText}>{`-${song.length}`}</Text>
            </View>
          </View>

          <Text style={styles.songTitleLarge}>{song.name}</Text>
          <Text style={styles.songInfoText}>{`${song.artist} ⏤ ${
github JonnyBurger / reanimated-formula / src / reduce-ast.ts View on Github external
`${logPrefix} Cannot use operator "+" on array`
			);
		}
		if (mathType === 'reanimated') {
			return Animated.add(left, right);
		}
		return (left as number) + (right as number);
	}
	if (tree.token.value === '-') {
		if (Array.isArray(left) || Array.isArray(right)) {
			throw new InvalidExpressionError(
				`${logPrefix} Cannot use operator "-" on array`
			);
		}
		if (mathType === 'reanimated') {
			return Animated.sub(left, right);
		}

		return (left as number) - (right as number);
	}
	if (tree.token.value === '/') {
		if (Array.isArray(left) || Array.isArray(right)) {
			throw new InvalidExpressionError(
				`${logPrefix} Cannot use operator "/" on array`
			);
		}
		if (mathType === 'reanimated') {
			return Animated.divide(left, right);
		}

		return (left as number) / (right as number);
	}
github fram-x / react-native-fluid / src / packages / navigation / src / hooks / useCurrentValue.ts View on Github external
const normalizeProgressProc = Animated.proc((progress, isForward) =>
  Animated.cond(
    Animated.neq(isForward, 1),
    Animated.sub(1, progress),
    progress,
  ),
);
github react-native-community / react-native-tab-view / src / TabBar.tsx View on Github external
(scrollAmount: Animated.Node<number>, maxScrollDistance: number) =>
      Animated.multiply(
        Platform.OS === 'android' && I18nManager.isRTL
          ? Animated.sub(maxScrollDistance, scrollAmount)
          : scrollAmount,
        I18nManager.isRTL ? 1 : -1
      )
  );