React Native – Animation

In this tutorial I am going to show you a animation of blinking and rotation of image. Firstly I use a text and blink that text. So lets start the tutorial.

Blinking of Text

App.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
class BlinkText extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };
    setInterval(() => {
        this.setState(previousState => {
          return { showText: !previousState.showText };
        });
      },
      1000
    );
  }
  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text style={{ textAlign: 'center', marginTop: 10 }}>{display}</Text>
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1, alignContent:'center',justifyContent: 'center', padding:20}}>
        <BlinkText text="Hello and wlecome to this blinking of the text tutorial." />
      </View>
    );
  }
}

Rotation of Image

In this example of Rotate Image View Using Animation. We are using the property of Animated Component from react-native.

App.js

import React from 'react';
import { StyleSheet, View, Animated, Image, Easing } from 'react-native';
export default class App extends React.Component {
  constructor() {
    super();
    this.RotateValueHolder = new Animated.Value(0);
  }
  componentDidMount() {
    this.StartImageRotateFunction();
  }
  StartImageRotateFunction() {
    this.RotateValueHolder.setValue(0);
    Animated.timing(this.RotateValueHolder, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
    }).start(() => this.StartImageRotateFunction());
  }
  render() {
    const RotateData = this.RotateValueHolder.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });
    return (
      <View style={styles.container}>
        <Animated.Image
          style={{
            width: 200,
            height: 200,
            transform: [{ rotate: RotateData }],
          }}
          source={{
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#C2C2C2',
  },
});