Show/ Hide components based on the checkbox state in react native

in the settings page I have a check box checked as the default value. If a user uncheck it, then all the images in the application will be hidden and the user won't be able to see any image in the whole application. I think I need to control the state of the checkbox (checked or not ), change that value when clicking/ pressing on the checkbox, passing that new value to all the app (HOW? ), and then based on that value I can decide whether display or not the images.

So basically, my problem is to access to that status value and then decide what to display. here is the code I'm using in the settings page :

constructor(props) {
        super(props);

        this.state ={
            status:false
        }
    };

toggleStatus(){
        this.setState({
            status:!this.state.status
        });
        console.log('toggle button handler: '+ this.state.status);
    }
...
render() {
return(
<TouchableOpacity onPress={()=>this.toggleStatus()}>
    <Text>
        press me to change state 
    </Text>
</TouchableOpacity> 

This code is working fine and it changes the value of status from false to true every time I press it

PS: I'm using native base and I was wondering if I can do a onPress in the check box itself instead of touchableOpacity