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

render() {
      const { snaps } = this.state;

      return (

} else {
    }
  }, [layout])

  const onClose = useRef(() => {
    console.tron.debug('close')
  })
  const bottomSheetRef = useRef(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],

const onClose = useRef(() => {
    console.tron.debug('close')
  })
  const bottomSheetRef = useRef(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 (

setLayoutWihEffects(name.nothing)
      }, 0)
      setTimeout(() => {
        setLayoutWihEffects(name.addButtonVisible)
      }, 100)
    } else {
    }
  }, [layout])

  const onClose = useRef(() => {
    console.tron.debug('close')
  })
  const bottomSheetRef = useRef(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 NAVBAR_HEIGHT = 56;
const INITIAL_LAYOUT = {
  height: 0,
  width: Dimensions.get('window').width,
};

@observer
export default class WeekTabView extends React.Component {

  // 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.state = {
      isFocused: props.autoFocus,
      value: props.value,
    };
  }

  componentDidUpdate(prevProps) {
    const { value } = this.props;

    if (value !== prevProps.value) {
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({ value });
    }
  }

  animation = new Animated.Value(0);

  format = string => (this.props.format ? this.props.format(string) : string);

  onBlur = (...props) => {
    Animated.timing(this.animation, {
      duration: 1,
      easing: Easing.linear,
      toValue: 0,
    }).start();

    this.setState({ isFocused: false });

    if (this.props.onBlur) this.props.onBlur(...props);
  };

  onChange = event => {

function generateTweenAnimation(
  props: TweenAnimationProps,
): Animation {
  const animationState = new A.Value(
    AnimationState.START_POINT,
  );
  const keys = Object.keys(props.from);
  const masterValue = new A.Value(0);
  const inputRange: [number, number] = [0, 1];

  const values: ReanimatedValues = keys.reduce(
    (acc, current) => {
      const from = props.from[current];
      const to = props.to[current];

      // if we are interpolating colors
      if (isRGB(from) && isRGB(to)) {
        acc[current] = bInterpolateColor(masterValue, {
          inputRange,
          outputRange: [from, to],
        });
        // currently only numbers are allowed
      } else if (isNumber(from) && isNumber(to)) {
        acc[current] = interpolate(masterValue, {

duration,
    toValue: new A.Value(0),
    easing: easing || Easing.inOut(Easing.ease),
  };

  return A.block([
    // stop opposite clock before running our animation
    // to set last (previous) position as a current one
    oppositeClock
      ? A.cond(
        A.clockRunning(oppositeClock),
        A.stopClock(oppositeClock),
      )
      : 0,
    // run our animation clock
    A.cond(
      A.clockRunning(clock),
      // do nothing if our clock is already running
      0,
      // otherwise pre set all the values
      [
        // If the clock isn't running we reset all the animation params and start the clock
        A.set(state.finished, 0),
        A.set(state.time, 0),
        A.set(state.position, value),
        A.set(state.frameTime, 0),
        A.set(config.toValue, dest),
        A.startClock(clock),
      ],
    ),
    // we run the step here that is going to update position
    A.timing(clock, state, config),

() =>
      // when the active state changes
      Animated.cond(Animated.neq(lastIsActive, tabIsActive), [
        Animated.set(lastIsActive, tabIsActive),
        Animated.cond(
          tabIsActive,
          [
            // the tab just became active so we might need to adjust the scroll offset to avoid unwanted
            // white space before allowing the scroll offset to affect the header position
            Animated.cond(
              Animated.greaterThan(Animated.multiply(-1, headerOffsetY), scrollOffsetY),
              Animated.call([headerOffsetY], ([y]) => {
                if (!flatListRef.current) {
                  throw new Error(
                    "Please make sure that tab content is wrapped with a StickyTabPageFlatList or a StickyTabPageScrollView"
                  )
                }
                flatListRef.current.getNode().scrollToOffset({ offset: -y, animated: false })
                lockHeaderPosition.setValue(0)
              }),
              Animated.set(lockHeaderPosition, 0)

const nearTheTop = Animated.lessOrEq(scrollOffsetY, headerHeight)

      // 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(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
      )