Hide and Show View With Animation in React Native v0.46.

Question

Friends,

I have issue to hide and show view in react native. I have do the folloing code. Want to hide and show view with animation. Please help me.

Code :

import React, { Component } from "react";
import {
  AppRegistry,
  Image,
  View,
  Text,
  Button,
  StyleSheet,
  TouchableHighlight,
} from "react-native";
import { StackNavigator } from "react-navigation";
import SignUpScreen from "./SignUp";
import AddManagerScreen from "./AddManager";

class SplashScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
          isModalVisible : true,
        }
    }


    static navigationOptions = {
      title: 'DashBoard',
    };

    ShowView(){
      this.state.isModalVisible = true;
      console.log(this.state.isModalVisible);

      if (this.state.isModalVisible) {
        return(
          <View style={styles.container}>
            <View style = {[styles.overlayView , {display : 'flex'}]}>
            </View>
          </View>

        );

      }else{
        return null;
      }


      //this.refs.secondView.getDOMNode().style.display="none";
    }

  render() {
    console.log(this.state.isModalVisible);

    console.disableYellowBox = true;
    const { navigate } = this.props.navigation;

      if (this.state.isModalVisible) {
        return (
          <View style={styles.container}>
            <Image style={{width: '100%', height: '100%'}}
                   source={require("./Images/background.png")} />

           <View style={styles.viewStyle}>

             <TouchableHighlight style = {styles.buttonStart}
                 onPress={() => navigate("SignUp")}>
                   <Image
                     source={require('./Images/hire.png')}
                   />
             </TouchableHighlight>

             <TouchableHighlight style = {styles.buttonEnd}
                 onPress={() => this.ShowView()}>
                   <Image style = {{marginBottom : 0}}
                     source={require('./Images/call.png')}
                   />
             </TouchableHighlight>
           </View>
          </View>
        );
      }else{
        return(
          <View style={styles.container}>
            <View style = {[styles.overlayView , {display : 'flex'}]}>
            </View>
          </View>

        );
      }

  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#FFFFFF",
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",

  } ,
  viewStyle :{
     width: '100%',
     height : '46%',
     position : 'absolute',
     backgroundColor : 'red',
     alignItems: "flex-start",
     justifyContent: "flex-start",

  },
  buttonStart :{
     width: '100%',
     height : '60%',
     alignItems: "flex-start",
     justifyContent: "flex-start",

  },
  buttonEnd :{
     width: '100%',
     height : '40%',
     alignItems: "flex-end",
     justifyContent: "flex-end",

  },
  overlayView :{
    width: '100%',
    height : '100%',
    position : 'absolute',
    backgroundColor : 'red',
  }
});

const Apple = StackNavigator(
  {
    Splash: { screen: SplashScreen },
    SignUp: { screen: SignUpScreen },
    AddManager : { screen : AddManagerScreen},
  },
  {
    headerMode: 'Splash' ,
  //  initialRouteName: "Splash" ,
  }
);

AppRegistry.registerComponent("Apple", () => Apple);

I Want to solution V 0.46 in react native.

Thanks.

@ShubhamSingla There are no error but Hidden view doesn't show. — Kirit Modi, Jul 19 '17 at 05:35

score 6 · Accepted Answer · answered Jul 19 '17 at 18:24

you're not too far off here.

First off - your ShowView function isn't rendered (this.ShowView()) anywhere so the returned JSX will never show up. This is fine, and you can remove that returned code entirely and still achieve your desired result.

Second, you need to make the ShowView a class method so it is aware of the component's state. Simply changing ShowView() { to ShowView = () => { should solve this for you. You can read a bit about this here https://www.ian-thomas.net/autobinding-react-and-es6-classes/

Another thing I noticed is how you directly change the state object without setState, which is a big React no-no. this.state.isModalVisible = true should be avoided at all costs, use the provided this.setState function to alter state.

Lastly, your render function could be reworked. I've put together a smaller example Snack for you to review here: https://snack.expo.io/SkKrb7prZ which accomplishes animating a modal overtop the main view.

Hope this helps!

@KiritModi By changing which style element is animated by the interpolated value. In the case of a zoom in, zoom out animation - `transform: [{scale }]` is what you want. In this example I'm also animating the opacity: https://snack.expo.io/ByerV2m8W — gtfargo, Jul 24 '17 at 17:54
Hi I will implement your logic code. But its work fine in iOS but not in android. You can see : https://snack.expo.io/ryZrnekv-?session_id=snack-session-rkxfX6eyv- — Kirit Modi, Aug 02 '17 at 07:23

Hide and Show View With Animation in React Native v0.46.

1 Answers1

Linked