How to use the react-native-reanimated.add 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 bnankiewicz / organic / src / components / SourcesManager / index.tsx View on Github external
const onClose = useRef(() => {
    console.tron.debug('close')
  })
  const bottomSheetRef = useRef<BottomSheet | null>(null)
  const callbackNode = useRef(new Animated.Value(1))
  const callbackNode1 = useRef(new Animated.Value(1))
  Animated.useCode(
    Animated.onChange(
      callbackNode.current,
      Animated.block([
        Animated.cond(
          Animated.greaterOrEq(callbackNode.current, 1),
          Animated.set(
            callbackNode1.current,
            Animated.add(Animated.multiply(-10, callbackNode.current)),
          ),
          /* Animated.call([], () => {
           *   onClose.current && onClose.current();
           * }), */
        ),
      ]),
    ),
    [onClose],
  )
  const bs = useRef(null)
  const newLocal = {
    inputRange: [0.9, 1],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  }
  return (
github birkir / kvikmyndr-app / src / components / week-tab-view / WeekTabView.tsx View on Github external
height: 0,
  width: Dimensions.get('window').width,
};

@observer
export default class WeekTabView extends React.Component<IProps> {

  // tslint:disable max-line-length
  private tabBar: any;
  private tabBarUpdated: boolean = false;
  private panX = new Animated.Value(0);
  private scrollY = new Reanimated.Value(0);
  private scrollEndDragVelocity = new Reanimated.Value(10000000);
  private snapOffset = new Reanimated.Value(0);
  private clock = new Reanimated.Clock();
  private diffClampNode = Reanimated.diffClamp(Reanimated.add(this.scrollY, this.snapOffset), 0, NAVBAR_HEIGHT);
  private inverseDiffClampNode = Reanimated.multiply(this.diffClampNode, -1);
  private snapPoint = Reanimated.cond(Reanimated.lessThan(this.diffClampNode, NAVBAR_HEIGHT / 2), 0, -NAVBAR_HEIGHT);
  private animatedNavBarTranslateY = Reanimated.cond(
    Reanimated.neq(this.scrollEndDragVelocity, 10000000),
    runScrollEndSpring({
      diffClampNode: this.diffClampNode,
      clock: this.clock,
      from: this.inverseDiffClampNode,
      velocity: 0,
      toValue: this.snapPoint,
      scrollEndDragVelocity: this.scrollEndDragVelocity,
      snapOffset: this.snapOffset,
      height: NAVBAR_HEIGHT,
    }),
    this.inverseDiffClampNode,
  );
github artsy / emission / src / lib / Components / StickyTabPage / StickyTabPageFlatList.tsx View on Github external
() => () => (
      <Animated.View
        style={{
          flex: 1,
          height: Animated.add(
            headerHeight,
            TAB_BAR_HEIGHT,
            // standard top padding, might want to override in future?
            space(3)
          ),
        }}
      />
    ),
    [headerHeight]
github JonnyBurger / reanimated-formula / src / reduce-ast.ts View on Github external
if (mathType === 'reanimated') {
				// @ts-ignore
				return Animated.not(left);
			}
			return Number(!left);
		}
	}
	const right = reduceAst(tree.right as ASTNode, variables, mathType);
	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.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 === '/') {
github artsy / emission / src / lib / Components / StickyTabPage / StickyTabPageFlatList.tsx View on Github external
// this is the code which actually performs the update to headerOffsetY, according to which direction
    // the scrolling is going
    const updateHeaderOffset = Animated.cond(
      Animated.greaterThan(scrollDiff, 0),
      [
        // y offset got bigger so scrolling down (content travels up the screen)
        // move the header up (hide it) unconditionally
        Animated.set(amountScrolledUpward, 0),
        Animated.set(headerOffsetY, Animated.max(negative(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.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(
github osdnk / react-native-reanimated-bottom-sheet / Example / BlurToolbar.js View on Github external
render() {
    return (
      <View style={styles.container}>
        <BottomSheet
          snapPoints={[500, 50]}
          renderContent={this.renderInner}
          renderHeader={this.renderHeader}
          initialSnap={1}
          callbackNode={this.fall}
          enabledInnerScrolling={false}
        />
        <Animated.View
          style={{
            alignItems: 'center',
            opacity: Animated.add(0.1, Animated.multiply(this.fall, 0.9)),
          }}
        >
          <Text style={{ position: 'absolute', zIndex: 1 }}>
            Swipe up from very bottom
          </Text>
          <Image style={styles.map} source={require('./assets/map-bg.jpg')} />
        </Animated.View>
      </View>
    )
  }
}
github rainbow-me / rainbow / src / components / value-chart / ValueChart.js View on Github external
style={[
                      {
                        backgroundColor:
                          change > 0 ? colors.chartGreen : colors.red,
                        borderRadius: 2,
                        height: 180,
                        position: 'absolute',
                        top: 10,
                        width: 2,
                        zIndex: 10,
                      },
                      {
                        opacity: this.opacity,
                        transform: [
                          {
                            translateX: Animated.add(
                              this.touchX,
                              new Animated.Value(-1.5)
                            ),
                          },
                        ],
                      },
                    ]}
                  />
                </View>
                <Animated.View
                  style={{
                    opacity: this.loadingValue,
                  }}
                >
                  <TimestampText
                    style={{ transform: [{ translateX: minValueDistance }] }}
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 wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / ClickWheel / ClickWheel.tsx View on Github external
  useCode(() => block([set(alpha, max(add(alpha, da), 0))]), [alpha, da]);
  return (
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / List / List.tsx View on Github external
const inViewport = (
  index: Animated.Node<number>,
  translateY: Animated.Node<number>,
  goingUp: Animated.Node<0 | 1>
) => {
  const y = multiply(add(index, not(goingUp)), ITEM_HEIGHT);
  const translate = multiply(translateY, -1);
  return and(
    greaterOrEq(y, translate),
    lessOrEq(y, add(translate, CONTENT_HEIGHT))
  );
};