How to show a component on button click in react native?

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

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…