Animations

When building an application, there is a need to create animations to enrich the user experience. Although React Native provides a way to implement arbitrary animations, it is not an easy task to do it, even for simple animations. That's where @shoutem/animation package comes in. Package contains animation components that should be wrapped around components that you want to get animated and driver that controls the animations.

Install

$ npm install --save @shoutem/animation

Docs

All the documentation is available on the Developer portal.

Community

Join our community on Facebook. Also, feel free to ask a question on Stack Overflow using "shoutem" tag.

Examples

To see animation components in action, start by creating new React Native project:

$ react-native init HelloWorld

Locate to project and install @shoutem/animation:

$ cd HelloWorld
$ npm install --save @shoutem/animation

Now, simply copy the following to your index.ios.js file of React Native project:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  ScrollView,
  StyleSheet,
} from 'react-native';

import {
  FadeOut,
  FadeIn,
  ZoomOut,
  ZoomIn,
  ScrollDriver,
} from '@shoutem/animation';

export default class App extends Component<{}> {
  render() {
    // Create new ScrollDriver that will animate animations
    // when passing through scroll positions in input range
    const driver = new ScrollDriver();
    return (
      <ScrollView {...driver.scrollViewProps}>
        <View style={style.container}>
          {/* This will fade out and zoom in on scroll position 100 */}
          <ZoomIn driver={driver} inputRange={[50, 100]} maxFactor={3}>
            <FadeOut driver={driver} inputRange={[50, 100]}>
              <Text>Good Bye</Text>
            </FadeOut>
          </ZoomIn>
          {/* This will fade in and zoom out on scroll position 200 */}
          <ZoomOut driver={driver} inputRange={[150, 200]} maxFactor={3}>
            <FadeIn driver={driver} inputRange={[150, 200]}>
              <Text>Hello</Text>
            </FadeIn>
          </ZoomOut>
        </View>
      </ScrollView>
    );
  }
}

const style = StyleSheet.create({
  container: {
    height: 800,
    flexDirection: 'column',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

Finally, run the app!

$ react-native run-ios

For more complex animations, run application from examples folder:

$ git clone [email protected]:shoutem/animation.git
$ cd animation/examples/ShoutemAnimation/
$ npm install
$ react-native run-ios

UI Toolkit

Shoutem UI is a part of the Shoutem UI Toolkit that enables you to build professionally looking React Native apps with ease.

It consists of three libraries:

• @shoutem/ui: beautiful and customizable UI components
• @shoutem/theme: “CSS-way” of styling entire app
• @shoutem/animation: declarative way of applying ready-made animations

License

The BSD License

Copyright (c) 2016-present, Shoutem