Skip to content
Easy way to create 60fps animations using https://github.com/kmagiera/react-native-reanimated
JavaScript
Branch: master
Clone or download
terrysahaidak Merge pull request #13 from terrysahaidak/tr-lazy-interpolation
Add support for lazy values initialization for interpolation transition animation
Latest commit f4e26e2 Mar 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example Add lazy values initialization for interpolation animation Mar 24, 2019
lib Remove unsued code Mar 25, 2019
.babelrc Add linter Feb 9, 2019
.eslintrc Fix using multiple animations Feb 18, 2019
.gitignore remove package-lock files Feb 19, 2019
.npmignore Bump version to 0.4.2 Feb 18, 2019
.prettierrc Init Feb 9, 2019
LICENSE Init Feb 9, 2019
README.md Add usage block Feb 17, 2019
package.json Bumb version number 0.5.0 Mar 23, 2019

README.md

react-native-reanimatable

Easy way to create 60fps animations using react-native-reanimated.

Warning

This is still very work in progress. Many things may change. It's not recommended to use it in production right now (but I will :D).

Many things are still missing. Check out our roadmap.

Installation

Install the library from npm:

npm i --save react-native-reanimatable

or

yarn add react-native-reanimatable

After that, follow the Getting Started of Reanimated, because the library uses it under the hood.

Usage

Please, check out Example folder for now. You can run examples using Expo.

Detailed usage and explanation will come later.

Roadmap

  • Add support for decay and spring type of animations
  • Add support for keyframes (interpolation)
  • Add support for scroll event delegation
  • Add support for pan events delegation
  • Add support for animated snap point of delegation
  • Add support for mounting/unmounting animations
  • Add more examples
  • Add docs
  • Add typings
  • Add some out of the box animations (bounces, zooms etc)
  • Add animation lifecycle
  • Add support for color animations
  • Add ability to control the animation (play, pause, reset)

Example

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Animated,
} from 'react-native';
import { Reanimatable, createAnimationConfig } from 'react-native-reanimatable';
import Animated from 'react-native-reanimated';

const config = createAnimationConfig({
  animation: {
    type: 'timing',
    duration: 300,
  },
  values: {
    width: { from: 100, to: 150 },
    height: { from: 100, to: 150 },
    translateY: { from: 0, to: 200 },
  },
});

const s = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  animationContainer: {
    marginBottom: 100,
  },
  animatableView: {
    height: 100,
    backgroundColor: 'red',
  },
});

export default class App extends React.PureComponent {
  state = {
    value: false,
  };

  toggleAnimation() {
    this.setState((state) => ({ value: !state.value }));
  }

  render() {
    return (
      <View style={s.container}>
        <Reanimatable
          config={config}
          value={this.state.value}
          containerStyle={s.animationContainer}
        >
          {({ width, height, translateY }) => (
            <Animated.View
              style={[
                s.animatableView,
                { width, height, transform: [{ translateY }] },
              ]}
            />
          )}
        </Reanimatable>

        <Button
          title="Toggle Animation"
          onPress={() => this.toggleAnimation()}
          style={s.button}
        />
      </View>
    );
  }
}

Inspirations

Inspired by incredible react-native-animatable.

License

MIT © Terry Sahaidak 2019

You can’t perform that action at this time.