Skip to content
Tween animation in React Native with 60fps
TypeScript Objective-C Java Ruby JavaScript Python
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Fix some ts errors Sep 29, 2019
example Update accordion example Oct 2, 2019
src
.editorconfig Add readme Sep 29, 2019
.gitignore Add readme Sep 29, 2019
.npmignore Add demo gif. Fix example Sep 29, 2019
.prettierrc Move to lib Sep 28, 2019
CHANGELOG.md 0.2.0 Oct 1, 2019
LICENSE Add readme Sep 29, 2019
README.md Merge branch 'master' of https://github.com/terrysahaidak/react-nativ… Sep 29, 2019
TODO.md Add todo Oct 1, 2019
demo.gif Add demo gif. Fix example Sep 29, 2019
package.json 0.2.0 Oct 1, 2019
tsconfig.json Add readme Sep 29, 2019
yarn.lock Add readme Sep 29, 2019

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, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-reanimated

If you are not using Expo (this might not work with latest sdk yet, since it has outdated version of reanimated), 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.