React Native Fade In Fade Out Opacity Animation Android iOS Example

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.

2. Create our main Export default class named as HomeScreen extends with 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.

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.

5. Create a constant in render’s block. Using this const we will set opacity style named as animated Style.

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.

7. Creating Style.

8. Complete Source Code for App.js file class.

Screenshot:

React Native Fade In Fade Out Opacity Animation Android iOS Example

4 Comments

  1. Nice tutorial sir , please make tutorial on redux

  2. 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”
    }

    )

  3. 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

Leave a Reply

Your email address will not be published.