Module `AnimatedRe-BsReactNative`

type calculated;

Guide

Animated allows to create declarative animations that are fluid, powerful and easy to build.

basic

The simplest animation starts with creating an animated value and using one of the built-in animations to change its value over time.

The following example demonstrates use of Animated.Timing in order to animate an animated value throughout given period of time.

open BsReactNative;

let animatedValue = Animated.Value.create(0.0);

let animation =
  Animated.timing(
    ~value=animatedValue,
    ~toValue=`raw(1.0),
    ~duration=100.0,
    (),
  );

Animated.start(animation, ());

multiple

Animations can be also combined together in complex ways using composition functions.

The following example demonstrates use of Animated.sequence in order to run animations in a sequence, one by one.

open BsReactNative;

let animatedValue = Animated.Value.create(0.0);

let animation =
  Animated.sequence([|
    Animated.timing(
      ~value=animatedValue,
      ~toValue=`raw(1.0),
      ~duration=100.0,
      (),
    ),
    Animated.timing(
      ~value=animatedValue,
      ~toValue=`raw(0.0),
      ~duration=100.0,
      (),
    ),
  |]);

Animated.start(animation, ());

calculation

You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value.

The following example demonstrates use of Animated.multiply in order to reverse the value of the animatedValue.

open BsReactNative;

let animatedValue = Animated.Value.create(0.0);

let newAnimatedValue = Animated.multiply(
  animatedValue,
  Animated.Value.create(-1.0)
);

Keep in mind that calculated values (such as newAnimatedValue from the snippet above) cannot be animated. Trying to pass them to any of the animated functions will result in a type error.

interpolation

You can interpolate an animated value in order to bind to its value and change the output.

The following example demonstrates interpolation in order to map values of an animated value to the opacity of a container.

let animatedValue = Animated.Value.create(100.0);

let animatedOpacity =
  Animated.Value.interpolate(
    animatedValue,
    ~inputRange=[0.0, 100.0],
    ~outputRange=`float([0.0, 1.0]),
    ~extrapolate=Animated.Interpolation.Clamp,
    (),
  );

styling

Animated values can be passed to an animated component in order to change its apperance as the animated value changes.

The example below demonstrates animating opacity of a component.

open BsReactNative;

let animatedValue = Animated.Value.create(0.0);

let component = ReasonReact.statelessComponent("MyComponent");

let containerStyle = Style.(
  style([
    opacity(Animated(animatedValue))
    flex(1.0)
  ])
);

let make = _children => {
  ...component,
  didMount: _self => {
    Animated.start(
      Animated.timing(
        ~value=animatedValue,
        ~toValue=`raw(1.0),
        ~duration=100.0,
        (),
      ),
      ~callback=_didFinish => (),
      ()
    );
  },
  render: _self => <Animated.View style=containerStyle />,
};

event

You can map gestures and other events state directly to an animated value directly with Animated.event.

let animatedValue = Animated.Value.create(0.0);

let handler =
  Animated.event(
    [|{
        "nativeEvent": {
          "contentOffset": {
            "x": animatedValue,
          },
        },
      }|],
    {"useNativeDriver": true},
  );

<ScrollView onScroll=handler />

API reference

type regular;

type value('a);

Type of an Animated value.

A regular value is a one created by calling Value.create.

A calculated is a value received as a result of performing Value.interpolate, Value.add, Value.divide or Value.modulo.

Note: Some operations are only allowed on either regular or calculated values.

type valueXY;: Type of a vector Animated value. See ValueXY module for details. Unlike value, it cannot be interpolated or subject to math operations.

module Animation: { ... };: Configured animation as created by calling timing, spring or decay.

module Interpolation: { ... };: Allows mapping input ranges of an Animated value to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.

module Value: { ... };: Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones.

module ValueXY: { ... };: 2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Value, but multiplexed. Contains two regular Animated.Values under the hood.

type animatedEvent;: Event handler that maps values to value. See next section for example use.

let event: array('a) => 'b => animatedEvent;

You can map gestures and other events state directly to an animated value directly with Animated.event.

Example

let animatedValue = Animated.Value.create(0.0);

let handler =
  Animated.event(
    [|{
        "nativeEvent": {
          "contentOffset": {
            "x": animatedValue,
          },
        },
      }|],
    {"useNativeDriver": true},
  );

<ScrollView onScroll=handler />

let delay: float => Animation.t;

Helper function to delay execution of the animation. To be used with other Animated functions, as demonstrated at the below example.

Example

let barValue = Animated.Value.create(0.0);

let animation =
  Animated.sequence(
    [|
      Animated.delay(500.),
      Animated.timing(
        ~value=barValue,
        ~toValue=`raw(0.0),
        ~duration=100.0,
        (),
      ),
    |]
  );

Animated.start(animation, ());

The above example will delay the barValue animation by 500 milliseconds.

let sequence: array(Animation.t) => Animation.t;

Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started.

Example

See delay example above.

let parallel: array(Animation.t) => Js.t({. stopTogether: bool, }) => Animation.t;

Runs an array of animations in parallel.

Example

let fooValue = Animated.Value.create(0.0);
let barValue = Animated.Value.create(0.0);

let animation =
  Animated.parallel(
    [|
      Animated.timing(
        ~value=fooValue,
        ~toValue=`raw(1.0),
        ~duration=100.0,
        (),
      ),
      Animated.timing(
        ~value=barValue,
        ~toValue=`raw(0.0),
        ~duration=100.0,
        (),
      ),
    |],
    {"stopTogether": false},
  );

Animated.start(animation, ());

When stopTogether is set to true, callback passed to Animated.start will get executed only once, after all animations within the array have finished. Otherwise, it may get executed many times.

You should check for the value of didFinish boolean that is the first argument to the callback function.

let stagger: float => array(Animation.t) => Animation.t;

Array of animations may run in parallel (overlap), but are started in sequence with successive delays.

Example

let fooValue = Animated.Value.create(0.0);
let barValue = Animated.Value.create(0.0);

let animation =
  Animated.stagger(
    50.0,
    [|
      Animated.timing(
        ~value=fooValue,
        ~toValue=`raw(1.0),
        ~duration=100.0,
        (),
      ),
      Animated.timing(
        ~value=barValue,
        ~toValue=`raw(0.0),
        ~duration=100.0,
        (),
      ),
    |],
  );

Animated.start(animation, ());

let loop: ?⁠iterations:int => animation:Animation.t => unit => Animation.t;

Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start.

You can specify the number of interations explicitly here or use iterations property when defining animation.

Example

let fooValue = Animated.Value.create(0.0);

let animation =
  Animated.loop(
    ~animation=Animated.timing(
      ~value=fooValue,
      ~toValue=`raw(0.0),
      ~iterations=4,
      ~duration=100.0,
      (),
    ),
    (),
  );

Animated.start(animation, ());

let createAnimatedComponent: ReasonReact.reactClass => ReasonReact.reactClass;: Make any React component Animatable

let timing: value:value(regular) => toValue:[ `raw(float) | `animated(value(regular)) ] => ?⁠easing:BsReactNative.Easing.t => ?⁠duration:float => ?⁠delay:float => ?⁠isInteraction:bool => ?⁠useNativeDriver:bool => ?⁠onComplete:Animation.endCallback => ?⁠iterations:int => unit => Animation.t;: See Value.Timing for details.

let spring: value:value(regular) => toValue:[ `raw(float) | `animated(value(regular)) ] => ?⁠restDisplacementThreshold:float => ?⁠overshootClamping:bool => ?⁠restSpeedThreshold:float => ?⁠velocity:float => ?⁠bounciness:float => ?⁠speed:float => ?⁠tension:float => ?⁠friction:float => ?⁠stiffness:float => ?⁠mass:float => ?⁠damping:float => ?⁠isInteraction:bool => ?⁠useNativeDriver:bool => ?⁠onComplete:Animation.endCallback => ?⁠iterations:int => unit => Animation.t;: See Value.Spring for details.

let decay: value:value(regular) => velocity:float => ?⁠deceleration:float => ?⁠isInteraction:bool => ?⁠useNativeDriver:bool => ?⁠onComplete:Animation.endCallback => ?⁠iterations:int => unit => Animation.t;: See Value.Decay for details.

let stop: Animation.t => unit;: See Animation.stop for details.

let start: Animation.t => ?⁠callback:Animation.endCallback => unit => unit;: See Animation.start for details.

let reset: Animation.t => unit;: See Animation.reset for details.