Hide Show View Text Component in React Native on button Click

Hiding and Showing the any component from the application screen is a easy process if you have a little knowledge about States. We would going to Change the states value on button onPress. Regarding the changed value we have been Hide Show View component using ternary operator in Android and iOS.

Contents in this project Hide Show View Text Component :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry , StyleSheet , Text , View and Button  component in import block.

3. Create Constructor in your class with Super method and make a state named as status. Now set the status state value as true. This is the default status value so when the application load at first time it will show us the View or Text component passed in ternary operator syntax.

4. Create function named as ShowHideTextComponentView . We have to call this function on button onPress and it will change the status state value . If the value is true then it changes it to false and if the value is false then it set it to true.

5. Create custom style css class named as MainContainer .

6. Add View as parent view in render’s return block and Call the MainContainer class into View.

7. Add {  } curly bracts inside the View component and inside the curly bracket using Ternary operator set condition. So if the given status state value is true then it shows the first passed view and if the status value is false then it hide the first view.

8. Add Button component, set onPress on button and call the ShowHideTextComponentView function.

9. Complete source code for index.android.js / index.ios.js file.

Screenshots :

Hide Show View

16 Comments

  1. Hi admin,
    Your tutorials are very helpful. Thanks for it !!

  2. if i have to call a function on value changed in Picker.
    Like, if i have 2 values in picker, on selecting one value a TextInput should display and on selecting another, that TextInput should get hide.

    • Yes hitesh you can do this simply create a State and store the Picker value in state now according to that value create a if condition and set another state value true false. Now simply hide the text input using my tutorial.

  3. import React, { Component } from ‘react’;

    import { AppRegistry, StyleSheet, Text, View, Button, Alert, Picker } from ‘react-native’;

    export default class Myproject extends Component {

    constructor(){

    super();

    this.state ={

    status:true,
    PickerValueHolder:”

    }
    }

    ShowHideTextComponentView = (val) =>{
    if (val == ‘even’){if(this.state.status == true)
    {
    this.setState({status: false})
    }
    else
    {
    this.setState({status: true})
    }
    }

    }

    render() {

    return (

    {
    // Pass any View or Component inside the curly bracket.
    // Here the ? Question Mark represent the ternary operator.

    this.state.status ? Hello Friends : null
    }

    this.ShowHideTextComponentView(itemValue)} >

    );
    }
    }

    const styles = StyleSheet.create({

    MainContainer :{

    // Setting up View inside content in Vertically center.
    justifyContent: ‘center’,
    flex:1,
    margin: 10

    }

    });

    AppRegistry.registerComponent(‘FirstProject’, () => Myproject);

    I want to display the text when i select “even” and i want to hide it when i select “Asap”

    • Hitesh here is the updated code for you : In this code if you select 1 then it will show the Text component and if you select 2 then it will hide the Text component.

      import React, { Component } from ‘react’;

      import { StyleSheet, Alert, View, Button, Picker, Text } from ‘react-native’;

      export default class App extends Component< {}> {

      constructor(){

      super();

      this.state={

      PickerValueHolder : ”,

      status : true

      }
      }

      GetSelectedPickerItem=()=>{

      //Alert.alert(this.state.PickerValueHolder);

      if(this.state.PickerValueHolder == 1)
      {

      this.setState({status: true});

      }else{

      this.setState({status: false});
      }

      }

      render() {
      return (

      {
      // Pass any View or Component inside the curly bracket.
      // Here the ? Question Mark represent the ternary operator.

      this.state.status ? Hello Friends : null

      }

      this.setState({PickerValueHolder: itemValue})} >


      );
      }
      }

      const styles = StyleSheet.create({

      MainContainer: {
      flex: 1,
      justifyContent: ‘center’,
      margin: 20

      }

      });

  4. here is my picker :-
    this.ShowHideTextComponentView(itemValue)} >

  5. thanks admin.
    but i want to call the function on selecting the value from picker. I don’t want to call it onPress button function.

  6. I did it like this and it worked :-
    this.GetSelectedPickerItem(this.setState({PickerValueHolder: itemValue}))} >

  7. One thing i noticed today is that when i call “GetSelectedPickerItem” function , it takes the previously selected state not the current selected state.
    Please help to resolve this issue as where i had left.

  8. Good afternoon – thank you for this tutorial. I have used in in the app I am creating!

    I am very new to React Native and maybe this is a bit naive but on button press I would like to show some text (“hello friends”) and a text input box to collect information. I seem to be able to add the text input box but I am not able to to display both text and input box.

    Any help would be appreciated!

    • JHayek you want to show the text hello friends on button press and on the same time you want to get input from user am i right ?

  9. Hi admin,
    Your tutorials are very helpful.
    its help in my project
    Thanks for it !!

  10. Hey admin , I am new to react native so how can we stay in touch that whenever I need help I lol get some

Leave a Reply

Your email address will not be published. Required fields are marked *