Skip to content
Tween animation in React Native with 60fps
TypeScript Objective-C Java Ruby JavaScript Python
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
example
src
.editorconfig
.gitignore
.npmignore
.prettierrc
CHANGELOG.md
LICENSE
README.md
TODO.md
demo.gif
package.json
tsconfig.json
yarn.lock

README.md

React Native ReTween

Blazing fast and easy tween animation.

Installation

Open a Terminal in the project root and run:

yarn add react-native-retween

Now we need to install react-native-reanimated.

If you are using Expo (this might work slower with latest Expo SDK 35 than vanilla RN, since it has outdated version of reanimated with no proces), to ensure that you get the compatible versions of the libraries, run:

expo install react-native-reanimated

If you are not using Expo, run the following:

yarn add react-native-reanimated

If you are using Expo, you are done. Otherwise, continue to the next steps.

Next, we need to link these libraries. The steps depends on your React Native version:

  • React Native 0.60 and higher

    On newer versions of React Native, linking is automatic.

    To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

    cd ios
    pod install
    cd ..
  • React Native 0.59 and lower

    If you're on an older React Native version, you need to manually link the dependencies. To do that, run:

    react-native link react-native-reanimated

Quick overview

You can find this in the example folder.

function TweenExample() {
  const { play, values, stop } = useTween(() => ({
    timing: {
      duration: 400,
    },
    // otherwise you can use spring
    // spring: {
    //   mass: 1,
    // },
    from: {
      width: 50,
      height: 50,
      left: 20,
      borderRadius: 0,
    },
    to: {
      width: 200,
      height: 200,
      left: windowWidth - 20 - 200,
      borderRadius: 2,
    },
  }));

  const [backward, setBackward] = React.useState(false);

  function onPress() {
    play(backward);
    setBackward((val) => !val);
  }

  return (
    <View style={s.animationContainer}>
      <View style={s.row}>
        <Button onPress={onPress} title="Toggle animation" />
        <Button onPress={stop} title="Stop" />
      </View>

      <Animated.View style={[s.animatedView, values]} />
    </View>
  );
}

License

MIT

You can’t perform that action at this time.