Hide/Show components in react native

Question

I\'m really new to React Native and I\'m wondering how can I hide/show a component.
Here\'s my test case:

Answer 1

The only way to show or hide a component in react native is checking a value of a parameter of app state like state or props. I provided a complete example as below:

import React, {Component} from 'react';
import {View,Text,TextInput,TouchableHighlight} from 'react-native'

class App extends Component {

    constructor(props){
        super(props);
        this.state={
            show:false
        }
}

    showCancel=()=>{
        this.setState({show:true})
    };

    hideCancel=()=>{
        this.setState({show:false})
    };

    renderTouchableHighlight(){
        if(this.state.show){
           return(
               
                   
                       Cancel
                   
               
           )
        }
        return null;
    }

    render() {


        return (
            
                
                {this.renderTouchableHighlight()}

            
        );
    }
}

export default App;