An Introduction To Animations In React Native. #ReactNativeAnimatable

Hello guys, how are you?
So, in this article we are going to discuss about react native animations. For this, I prefer react native animatable library.

First of all, what are the animations?
Animation is a method in which pictures are manipulated to appear as moving images. Also we can say, moving views, moving texts, transitioning etc.
Now, #ReactNativeAnimatable is a library used for animations in #ReactNative. It is a declarative transitions and animations library for React Native.
To animate things you must use the createAnimatableComponent composer similar to the Animated.createAnimatedComponent.
The common components View, Text and Image are precomposed and exposed under the Animatable namespace. If you have your own component that you wish to animate, simply wrap it with a Animatable.View.
So without wasting anytime let's create a demo project to test basics of animations within an app.
So first of all we need to create a fresh project using cli.
npx react-native init animationsApp
Go to the project directory.
cd animationsApp
After this, try to run that blank project on both iOS and android devices. 
npx react-native run-ios  (mac only)
npx react-native run-android
If everything ok, you will see blank React Native app as shown in image.

Now, install NativeBase library for UI purposes.
yarn add native-base
Link the project assets. 
npx react-native link
So after that you need to replace App.js with this code.
import React, {Component} from 'react';
import {
  Container,
  Header,
  Title,
  Content,
  Body,
  Text,
  ListItem,
  Button,
} from 'native-base';
import * as Animatable from 'react-native-animatable';
let users = [
  {
    name: 'Happy',
  },
  {
    name: 'Gulshan',
  },
  {
    name: 'Harry',
  },
];
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fontSize: null,
    };
  }
  render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Animations</Title>
          </Body>
        </Header>
        <Content padder>
          {users.map((item, index) => (
            <Animatable.View
              animation="fadeInRightBig"
              delay={index * 1000}
              direction="normal">
              <ListItem>
                <Text>{item.name}</Text>
              </ListItem>
            </Animatable.View>
          ))}
          <Animatable.Text animation="slideInUp">Zoom me up</Animatable.Text>
          <Button
            onPress={() =>
              this.setState({fontSize: (this.state.fontSize || 10) + 5})
            }>
            <Animatable.Text
              transition="fontSize"
              style={{fontSize: this.state.fontSize || 10}}>
              Size me up
            </Animatable.Text>
          </Button>
          <Button
            style={{marginTop: 10}}
            onPress={() =>
              this.setState({fontSize: (this.state.fontSize || 10) - 5})
            }>
            <Animatable.Text
              transition="fontSize"
              style={{fontSize: this.state.fontSize || 10}}>
              Size me Down
            </Animatable.Text>
          </Button>
        </Content>
      </Container>
    );
  }
}
Save everything and run the project again by using following commands.
npx react-native run-ios  (mac only)
npx react-native run-android
You will see your Animations Demo App is ready and showing in the simulators (or devices). Output gif mages is attached and link to the video of the project's coding as given below.
I hope you like the article regarding React Native Animations using React Native Animatable Library. This is how you can create animations for views, text and transitions for text etc. in the React Native app for Android and iOS. If you have any questions or you want to get a tutorial on some topic, you can comment below.
There will be more posts coming soon. Stay tuned! Bye. 🙂

Post a Comment

0 Comments