Hello Friends đź‘‹,

Welcome to Infinitbility.

Many times, we need to show components on some condition or we can also say conditional rendering then we are going to learn how we can show or hide components on a button click.

Basically, we follow the below code steps to done show the component on a button click.

  1. Create components with content.
  2. Create button component.
  3. Render Content component based on state.
  4. Change state on button click.
import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';

const ContentComponent = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
}

const Cafe = () => {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button title={'Show Component'} onPress={() => setShow(!show) } />
      {show && <ContentComponent />}
    </View>
  );
}

export default Cafe;

Output

React native hide and show examples
React Native hide/show component example

Conclusion

In this tutorial, we will learn how we can do conditional rendering in react native with example of React Native hide/show component.

Thanks for reading…