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',
  },
});
0 0 votes
Article Rating

Learn React Native App available on play store Download Now.
Do you want to hire us for your Project Work? Then Contact US.
Spread the love
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x