How to use the react-native-reanimated.block 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 BelkaLab / react-native-declarative-ui / src / hoc / RNNBottomOverlay.tsx View on Github external
render() {
      const { snaps } = this.state;

      return (
        <View style={styles.root}>
          <Animated.Code
            exec={Animated.block([
              Animated.call([this.animationState], async ([animationStateValue]) => {
                // console.log(this.state.isFirstOpening, animationStateValue);

                // when animationState is equal to 1, sheet is to bottom (out of viewport)
                // we go for 0.97, because it's enough to trigger dismissOverlay and have a better interaction
                // if (animationStateValue >= 0.97) {
                if (animationStateValue >= 0.99 && animationStateValue < 1.1 && !this.state.isFirstOpening) {
                  try {
                    await Navigation.dismissOverlay(this.props.componentId);

                    if (this.state.onDismissedCallback) {
                      this.state.onDismissedCallback();
                    }
                  } catch (err) {
                    // Overlay already dismissed
                  }
github terrysahaidak / react-native-retween / src / common.ts View on Github external
export const updateStateProc = maybeProc((
  // custom
  value: A.Value<number>,
  dest: A.Adaptable<number>,
  // state
  finished: A.Value<number>,
  position: A.Value<number>,
  time: A.Value<number>,
  frameTime: A.Value<number>,
  // config
  toValue: A.Value<number>,
) =>
  A.block([
    A.set(finished, 0),
    A.set(time, 0),
    A.set(position, value),
    A.set(frameTime, 0),
    A.set(toValue, dest),
  ]),
);
github terrysahaidak / react-native-reanimatable / lib / core / animations.js View on Github external
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),
    // if the animation is over we stop the clock
    A.cond(state.finished, A.block([A.stopClock(clock), onFinish])),
    // we made the block return the updated position
    A.set(value, state.position),
  ]);
};
github terrysahaidak / react-native-reanimatable / lib / core / animations.js View on Github external
onFinish,
}) => {
  const state = {
    finished: new A.Value(0),
    position: new A.Value(0),
    time: new A.Value(0),
    frameTime: new A.Value(0),
  };

  const config = {
    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
github terrysahaidak / react-native-reanimatable / lib / core / createInterpolationTransitionAnimation.js View on Github external
// reverse input range
        // in order to animate value in reverse way
        // from `to` to `from`
        if (stateValue) {
          outputRange.reverse();
        }

        const valueAnimation = A.interpolate(interpolator, {
          inputRange,
          outputRange,
          extrapolate: A.Extrapolate.CLAMP,
        });

        animatedBlock.push(valueAnimation);

        animationValues[key] = A.block(animatedBlock);
      });
github terrysahaidak / react-native-reanimatable / lib / core / createTransitionAnimation.js View on Github external
acc.backwardAnimations.push(backwardTiming);

          return acc;
        },
        {
          forwardAnimations: [],
          backwardAnimations: [],
        },
      );

      return A.block([
        A.cond(
          A.eq(animationState, ANIMATION_STATE.PLAY_FORWARD),
          // run all the forward animations
          A.block(forwardAnimations),
        ),

        A.cond(
          A.eq(animationState, ANIMATION_STATE.PLAY_BACKWARD),
          // run all the backward animations
          A.block(backwardAnimations),
        ),
      ]);
    }
github terrysahaidak / react-native-retween / src / animations / runSpring.ts View on Github external
{ clock, oppositeClock, value, dest, onFinish }: IAnimationConfig,
  props: SpringTweenAnimation<any>,
) => {
  const state = {
    finished: new A.Value(0),
    position: new A.Value(0),
    time: new A.Value(0),
    velocity: new A.Value(0),
  };

  const config = {
    ...transformSpringConfigToAnimatedValues(props.spring),
    toValue: dest,
  };

  return A.block([
    // stops opposite (opposite direction) clock
    A.cond(
      A.clockRunning(oppositeClock),
      A.stopClock(oppositeClock),
      0,
    ),
    A.cond(A.clockRunning(clock), 0, [
      updateStateProc(
        value,
        dest,
        state.finished,
        state.position,
        state.time,
        state.velocity,
        config.toValue,
      ),
github terrysahaidak / react-native-reanimatable / lib / core / createTransitionAnimation.js View on Github external
dest: to,
          };

          const backwardAnimationConfig = {
            clock: backwardAnimationClock,
            oppositeClock: forwardAnimationClock,
            value: currentValue,
            dest: from,
          };

          if (first) {
            forwardAnimationConfig.onFinish = A.block([
              A.set(animationState, ANIMATION_STATE.END_POINT),
            ]);

            backwardAnimationConfig.onFinish = A.block([
              A.set(animationState, ANIMATION_STATE.START_POINT),
            ]);
          }

          const forwardTiming = getProperAnimation(
            config,
            forwardAnimationConfig,
          );
          const backwardTiming = getProperAnimation(
            config,
            backwardAnimationConfig,
          );

          acc.forwardAnimations.push(forwardTiming);

          acc.backwardAnimations.push(backwardTiming);
github terrysahaidak / react-native-reanimatable / lib / components / ScrollView.js View on Github external
render() {
    const { delegate } = this.props;

    const props = {
      ...this.props,
      onScroll: delegate.event,
      onScrollEndDrag: (evt) => this._onScrollEndDrag(evt),
    };

    return (
      <React.Fragment>
        <A.Code
          exec={A.block([
            A.call([delegate.value], (r) => this._onScroll(r[0])),
            delegate.value,
          ])}
        />
        <A.ScrollView ref={this._ref} {...props} />
      </React.Fragment>
    );
  }
}
github fram-x / react-native-fluid / src / packages / navigation / src / hooks / useNavigationState.ts View on Github external
const updateSwipingNode = useMemo(() => {
    if (stackCardAnimationContext) {
      return always(
        Animated.onChange(stackCardAnimationContext.swiping, [
          Animated.call([stackCardAnimationContext.swiping], updateSwiping),
        ]),
      );
    } else return Animated.block([]);
  }, [stackCardAnimationContext, updateSwiping]);