Changing Visibility of a button inside the component dynamically

Question

I am using React-Navigation but I guess You don't really need to have a prior knowledge about it.

So I have a header Component which looks like this

const Header = (props) => {
  return (
  <View style={headerContainer}>
    <View> 
     <Button onPress={() => props.navigation.navigate('Home')} 
      title="Go Back"/> 
    </View>
    <Text style={header}> Knicx   
     <Text style={headerSecondary}> Crypto Ticker </Text> 
     </Text>
  </View>
  )
}

Now, In the above notice the button, Which I am currently showing on all the pages

 <Button onPress={() => props.navigation.navigate('Home')} 
          title="Go Back"/>

But I don't want it to be there on some specific pages, like HomeScreen to say the least.

Now, One solution is to remove the <Header /> component in my homepage, Copy the above code snippet, past it in my HomeScreen and remove the Component ( sort of like hardcoding ) or two create two Header component, one with button and one without button

[Question:] But I was thinking if we could toggle the visibility of button dynamically or stack it on the top of <Header /> ? Can someone please tell me how can we do it? (No, We can set the opacity of the button to zero and change it whenever we need it)

[Update:] We can use redux to manage/pass the state but the problem is that in React-native we do not have display: none and I don't want to change use the opacity

Tomáš Petrovčín · Accepted Answer · 2018-09-13 12:18:56Z

2

Send showHomeButton: boolean as a prop to header

const Header = props => (
    <View style={headerContainer}>
        {this.props.showHomeButton && (
            <View>
                <Button onPress={() => props.navigation.navigate('Home')} title="Go Back" />
            </View>
        )}
        <Text style={header}>
            {' '}
                Knicx
            <Text style={headerSecondary}> Crypto Ticker </Text>
        </Text>
    </View>
);

answered Sep 13, 2018 at 12:18

Tomáš Petrovčín

1362 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Perniferous Over a year ago

This is the correct answer - passing props and conditional rendering is the react mindset after all.

Collectives™ on Stack Overflow

Changing Visibility of a button inside the component dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related