Opacity style is used to control visibility of a particular component in react native. In this tutorial we would make a simple box using TouchableWithoutFeedback component and change the opacity using animated value. We would call a function on TouchableWithoutFeedback onPress event and start the animation for a particular defined time. So in this tutorial we would create Fade In Fade Out Opacity Animation in React Native Android iOS Example.
Contents in this project React Native Fade In Fade Out Opacity Animation Android iOS Example:
1. Import StyleSheet, View, TouchableWithoutFeedback and Animated component in your app’s App.js file.
|
1 2 |
import React, {Component} from 'react'; import { StyleSheet, View, TouchableWithoutFeedback, Animated } from 'react-native'; |
2. Create our main Export default class named as HomeScreen extends with Component.
|
1 2 3 4 |
export default class HomeScreen extends Component { } |
3. Create constructor() in your HomeScreen class and make a State named as animation. We would also define it some default value as 1. This will be our opacity default value which is 1 so the box component will display on screen.
|
1 2 3 4 5 6 |
constructor(){ super(); this.state={ animation : new Animated.Value(1), } } |
4. Create a function named as startAnimation(). We are calling Animated.timing() function with animation state value and set the animation starting value to Zero and set the animation timing to 400 milliseconds. We would again call the Animated.timing() function because the First call would set opacity to 0 and box will no be visible. So we have to again set the toValue to 1 using animation so box will be visible again.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
startAnimation=()=>{ Animated.timing(this.state.animation, { toValue : 0, timing : 400 }).start(()=>{ Animated.timing(this.state.animation,{ toValue : 1, duration : 400 }).start(); }) } |
5. Create a constant in render’s block. Using this const we will set opacity style named as animated Style.
|
1 2 3 |
const animatedStyle ={ opacity : this.state.animation } |
6. Create TouchableWithoutFeedback component with Animated.View component in render’s return block.
- onPress : Call our start animation function on onPress event.
- Animated.View : Used to create Animated Views.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
render() { const animatedStyle ={ opacity : this.state.animation } return ( <View style={styles.MainContainer}> <TouchableWithoutFeedback onPress={this.startAnimation}> <Animated.View style={[styles.animatedBox, animatedStyle]} /> </TouchableWithoutFeedback> </View> ); } |
7. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems : 'center', padding: 11 }, animatedBox: { width : 200, height: 200, backgroundColor : '#FF1744' }, }); |
8. Complete Source Code for App.js file class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import React, {Component} from 'react'; import { StyleSheet, View, TouchableWithoutFeedback, Animated } from 'react-native'; export default class HomeScreen extends Component { constructor(){ super(); this.state={ animation : new Animated.Value(1), } } startAnimation=()=>{ Animated.timing(this.state.animation, { toValue : 0, timing : 400 }).start(()=>{ Animated.timing(this.state.animation,{ toValue : 1, duration : 400 }).start(); }) } render() { const animatedStyle ={ opacity : this.state.animation } return ( <View style={styles.MainContainer}> <TouchableWithoutFeedback onPress={this.startAnimation}> <Animated.View style={[styles.animatedBox, animatedStyle]} /> </TouchableWithoutFeedback> </View> ); } }; const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems : 'center', padding: 11 }, animatedBox: { width : 200, height: 200, backgroundColor : '#FF1744' }, }); |
Screenshot:
Nice tutorial sir , please make tutorial on redux
Rahul my next tutorial will be on Redux 🙂 .
hii sir i am facing problem in latest version of react native related to import { createDrawerNavigator } from ‘react-navigation-drawer’;
1. drawer navigation working properly in debbuging app in real device and emulator both but when i create signed apk and when i click on menu icon or swipe to left to open drawer app will crash , how can i fix this issue please help me to fix as soon as possible.
package.json file
“@react-native-community/async-storage”: “^1.6.2”,
“apisauce”: “^1.1.1”,
“navigationbar-react-native”: “0.0.5”,
“react”: “16.9.0”,
“react-native”: “0.61.1”,
“react-native-animate-loading-button”: “^1.0.3”,
“react-native-elements”: “^1.2.3”,
“react-native-gesture-handler”: “^1.4.1”,
“react-native-indicator”: “^1.0.0”,
“react-native-indicators”: “^0.16.0”,
“react-native-reanimated”: “^1.3.0”,
“react-native-screens”: “^2.0.0-alpha.3”,
“react-native-simple-dialogs”: “^1.2.0”,
“react-native-size-matters”: “^0.2.1”,
“react-native-storage”: “^1.0.1”,
“react-native-vector-icons”: “^6.6.0”,
“react-navigation”: “^4.0.10”,
“react-navigation-drawer”: “^2.2.2”,
“react-navigation-stack”: “^1.9.3”,
“toggle-switch-react-native”: “^2.1.0”
Main Navigator file
import { createDrawerNavigator } from ‘react-navigation-drawer’;
import { createStackNavigator } from ‘react-navigation-stack’;
import {Dimensions } from ‘react-native’;
//Screen
import EditProfileScreen from ‘../screen/EditProfileScreen’
import HomeScreen from ‘../screen/HomeScreen’
import AccountScreen from ‘../screen/AccountScreen’
import ContactScreen from ‘../screen/ContactScreen’
import CustomDrawerScreen from ‘../screen/CustomDrawerScreen’
const myDrawer = createDrawerNavigator({
Home: {screen: HomeScreen},
Accounts: {screen: AccountScreen},
Contacts: {screen: ContactScreen},
EditProfile: {screen: EditProfileScreen},
},
{
contentComponent: CustomDrawerScreen,
drawerWidth: Dimensions.get(‘window’).width-100,
},);
export const MainNavigator = createStackNavigator({
//Client_Details:Client_DetailsScreen,
Home: {
screen: myDrawer,
navigationOptions: ({ navigation }) => ({
header: null,
gesturesEnabled: false
}),
}
},
{
initialRouteName: “Home”
}
)
i fix my problem
i forget to do these steps
You also need to configure jetifier to support dependencies using androidx:
yarn add –dev jetifier
# or with npm
# npm install –save-dev jetifier
Then add it to the postinstall script in package.json:
“scripts”: {
“postinstall”: “jetifier -r”
}
NOTE: Remember to remove this when you upgrade to React Native 0.60 and higher.
Now, run the postinstall script manually:
yarn postinstall
# or with npm
# npm run postinstall