Navigate back to the homepage

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

Infinitbility
React Native
December 31st, 2021 · 1 min read
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.
1import React, { useState } from 'react';
2import { Button, View, Text } from 'react-native';
3
4const ContentComponent = () => {
5 return (
6 <View>
7 <Text>I am also a cat!</Text>
8 </View>
9 );
10}
11
12const Cafe = () => {
13 const [show, setShow] = useState(false);
14
15 return (
16 <View>
17 <Button title={'Show Component'} onPress={() => setShow(!show) } />
18 {show && <ContentComponent />}
19 </View>
20 );
21}
22
23export 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…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to change textinput placeholder text color in react native?

How to change textinput placeholder text color in react native?

React Native, change textinput placeholder color.

December 30th, 2021 · 1 min read
How to provide custom input value in autocomplete textfield in react material UI?

How to provide custom input value in autocomplete textfield in react material UI?

React Material UI ( MUI ), Provide custom input value in Autocomplete Textfield.

December 29th, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]