Hide Show View Text Component in React Native on button Click

This tutorial explains how to hide and show Text Component in react native application on button click. Hiding and showing any component in react native application is very easy and simple, just we need to use state object in react native component. Here in this example we are using content as state object with the helps of this we are displaying and hiding text component data in android or ios device screen.

Example to Hide Show Component in React Native

Lets follow the below steps to hide and show text component in React Native on button click.

Step 1: First create the new reactive project.

Step 2: Open App.js File  in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Button } from 'react-native';

Step 4 : Create constructor in your App class with props parameter and Create super method with props parameter in constructor. Now using this.state we are defining the content item inside the state object.

constructor() {
    super();
    this.state = {
      content: true
    }
}

Step 5 : Create a function named as componentHideAndShow. Using this method we are hiding and showing text component inside the View Component layout.

 componentHideAndShow = () => {
    this.setState(previousState => ({ content: !previousState.content }))
  }

Step 6: Open App.js component and  and Implement render method. With the help of state and ternary operator we are hiding and showing content for text component.

render() {

    return (
      <View style={styles.container}>

       {
        // Display the content in screen when state object "content" is true.
        // Hide the content in screen when state object "content" is false. 
        this.state.content ? <Text style= {styles.headerText}> Hello Friends </Text> : null
      }
 
      <Button title="Hide Text Component" onPress={this.componentHideAndShow} />

      </View>
    );
  }

Step 7 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to Hide and Show View Text Component in React Native Application on button Click.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Button } from 'react-native';


export default class App extends Component {

  constructor() {
    super();
    this.state = {
      content: true
    }
  }

  componentHideAndShow = () => {
    this.setState(previousState => ({ content: !previousState.content }))
  }


  render() {

    return (
      <View style={styles.container}>

       {
        // Display the content in screen when state object "content" is true.
        // Hide the content in screen when state object "content" is false. 
        this.state.content ? <Text style= {styles.headerText}> Hello Friends </Text> : null
      }
 
      <Button title="Hide Text Component" onPress={this.componentHideAndShow} />

      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },

});

Screenshot : 

This is all about Hide/Show components in react native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.