react-native webview button hide and enable

Question

I started developing new application in React. I have a webview application and I want to add a feature like this, I want the basket icon at the bottom to not appear when the user login is not provided, but I need to ensure that the bottom basket button is active again when the user logs in. Can you help me on how to do this ?

 onPressButtonURL = (url) => { console.log("==========>>> URL: ", url); this.setState({ url:`${url}?t=${Date.now()}` }); } mystyles = { display: "none" }; render() { return ( <Container> <WebView source={{uri:this.state.url}} ref={WEBVIEW_REF} useWebKit={true} cacheEnabled={true} style={{marginTop: 30, flex: 1}} onLoadProgress={({ nativeEvent }) => {this.loadingProgress = nativeEvent.progress;}}/> <View style={{ alignSelf: "auto"}}> <Fab active={this.state.active} direction="up" containerStyle={{bottom: 100 }} style={{ backgroundColor: '#5067FF'}} position="bottomRight" onPress={() => this.setState({ active: !this.state.active })}> <Icon type="FontAwesome" name="share-alt" /> <Button style={{ backgroundColor:'#34A34F'}} ref="whatsapp" onPress={() => Linking.openURL('whatsapp://send?text='+wa_message+'&phone='+wa_number) }><Icon type="FontAwesome" name="whatsapp"/></Button> <Button style={{ backgroundColor:'#3B5998'}} ref="facebook" onPress={() => Linking.openURL(fb_url) }><Icon type="FontAwesome" name="facebook"/></Button> <Button style={{ backgroundColor:'#f09433'}} ref="inst" onPress={() => Linking.openURL(inst_url) }><Icon type="FontAwesome" name="instagram"/></Button> <Button style={{ backgroundColor:'#DD5144'}} ref="mail" onPress={() => Linking.openURL('mailto:'+mail_url) }><Icon type="FontAwesome" name="envelope"/></Button> </Fab> <Footer> <FooterTab> <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'index.php')} danger={this.state.clicked}><Icon type="FontAwesome" name="home" /><Text></Text></Button> <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'sepetimigoster.html')} danger={this.state.clicked}><Icon type="FontAwesome" name="shopping-basket" id="shopping-basket" /><Text></Text></Button> <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'uyegiris.html')}><Icon type="FontAwesome" name="user" /><Text></Text></Button> <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goBack()}><Icon type="FontAwesome" name="arrow-left" /><Text></Text></Button> <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goForward()}><Icon type="FontAwesome" name="arrow-right" /><Text></Text></Button> </FooterTab> </Footer> </View> </Container> ); } }

Answer 1

If you want the button to be omitted completely you can just conditionally include it with something like this:

 onPressButtonURL = (url) => { console.log("==========>>> URL: ", url); this.setState({ url:`${url}?t=${Date.now()}` }); } mystyles = { display: "none" }; render() { let isLoggedIn = false; // wherever this comes from return ( <Container> <WebView source={{uri:this.state.url}} ref={WEBVIEW_REF} useWebKit={true} cacheEnabled={true} style={{marginTop: 30, flex: 1}} onLoadProgress={({ nativeEvent }) => {this.loadingProgress = nativeEvent.progress;}}/> <View style={{ alignSelf: "auto"}}> <Fab active={this.state.active} direction="up" containerStyle={{bottom: 100 }} style={{ backgroundColor: '#5067FF'}} position="bottomRight" onPress={() => this.setState({ active: !this.state.active })}> <Icon type="FontAwesome" name="share-alt" /> <Button style={{ backgroundColor:'#34A34F'}} ref="whatsapp" onPress={() => Linking.openURL('whatsapp://send?text='+wa_message+'&phone='+wa_number) }><Icon type="FontAwesome" name="whatsapp"/></Button> <Button style={{ backgroundColor:'#3B5998'}} ref="facebook" onPress={() => Linking.openURL(fb_url) }><Icon type="FontAwesome" name="facebook"/></Button> <Button style={{ backgroundColor:'#f09433'}} ref="inst" onPress={() => Linking.openURL(inst_url) }><Icon type="FontAwesome" name="instagram"/></Button> <Button style={{ backgroundColor:'#DD5144'}} ref="mail" onPress={() => Linking.openURL('mailto:'+mail_url) }><Icon type="FontAwesome" name="envelope"/></Button> </Fab> <Footer> <FooterTab> <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'index.php')} danger={this.state.clicked}><Icon type="FontAwesome" name="home" /><Text></Text></Button> {isLoggedIn && <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'sepetimigoster.html')} danger={this.state.clicked}><Icon type="FontAwesome" name="shopping-basket" id="shopping-basket" /><Text></Text></Button>} <Button vertical onPress={() => this.onPressButtonURL(this.site_url+'uyegiris.html')}><Icon type="FontAwesome" name="user" /><Text></Text></Button> <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goBack()}><Icon type="FontAwesome" name="arrow-left" /><Text></Text></Button> <Button vertical onPress={() =>this.refs[WEBVIEW_REF].goForward()}><Icon type="FontAwesome" name="arrow-right" /><Text></Text></Button> </FooterTab> </Footer> </View> </Container> ); } }