Rotate Image View Using Animation
Hello Guyz! How are you? Hope you are doing well! so here i am gonna show you how you make a React Native Rotate Image View Using anim
This is an example of React Native Rotate Image View Using Animation. We are using the property of Animated Component from react-native.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command-line utility. Open the terminal and go to the workspace and run.
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the –version argument:
react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next
This will make a project structure with an index file named App.js in your project directory.
Open App.js in any code editor and replace the code with the following code.
App.js
/*This is an Example of React Native Rotate Image View Using Animation*/
import React from 'react';
//import react in our project
import { StyleSheet, View, Animated, Image, Easing } from 'react-native';
//import all the components we needed
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={{
uri:
'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#C2C2C2',
},
});Tags :
Website Designing Company in Delhi || Magento Development Company
React Native Navigation React Native Navigation Drawer React Native Bottom Navigation Build a News Mobile App with Ionic 5 & React