Make/ Create checkbox component in react native

Question

I have been facing some issues with the native base checkbox and AsynStorage. In fact, AsynStorage only accepts strings by default BUT can store boolean variables also, I tried to use that method but I get a string stored every time. While the checkbox does only accept boolean variables and throws a warning if I tried to use a string and it does not show the previous state of the checkbox (checked or not ). So, I decided to make my own checkbox using TouchbleOpacity .. So do you guys have any idea how to make it ? Here is the result i want to achieve:

So, the purpose is to make a checkbox settings page that controls the style of a text in another page and to get the checkbox as left the previous time, for an example : if I check it , I change the page and go back again to the settings page , I need to find it checked (indicating the previous state) The code is in the settings page :

toggleStatus() {
        this.setState({
            status: !this.state.status
        });
        AsyncStorage.setItem("myCheckbox",JSON.stringify(this.state.status));
    }
// to get the previous status stored in the AsyncStorage 
componentWillMount(){
        AsyncStorage.getItem('myCheckbox').then((value) => {
            this.setState({
                status: value
            });
            if (this.state.status == "false") {
                this.setState({
                    check: false
                });
            }
            else if (this.state.status == "true") {
                this.setState({
                    check: true
                });
            }
            if (this.state.status == null) {
                this.setState({
                    check: false
                });
            }
        }); 
    }
render {
return(
 ...

                            <CheckBox
                                onPress={() => { this.toggleStatus() }
                                checked={ this.state.check }/>

)}

In other page :

componentDidMount(){
        AsyncStorage.getItem('myCheckbox').then((value) => {
            JSON.parse(value)
            this.setState({
                status: value
            });

        });

    }

This code change the status after TWO clicks and I don't know why and i get this weird output in the console, every time I click the checkbox

Answer 1

If you take a look at AsyncStorage documentation, you can see that, in fact, the method getItem() will always return a string (inside the promise).

For the problem with the AsyncStorage you should consider trying to parse this string returned to a boolean using this method explained here and then use this parsed value inside the native base checkbox.

But if you want to do your own component, try doing something like this:

export default class Checkbox extends Component {
    constructor(){
        super();
        this.state = { checked: false }
    }

    render(){
        return(
        <TouchableOpacity
        onPress={()=>{
            this.setState({ checked : !this.state.checked });
        }}    
        >
            <Image source={this.state.checked ? require('checkedImagePath') : require('uncheckedImagePath')} />
        </TouchableOpacity>
        );
    }
}

You will need to set some style to this image to configure it the way you want.

-- Based on your edition:

I can't see nothing wrong on your toggleStatus() method in settings page, but try changing your componentWillMount() to this:

componentWillMount(){
    AsyncStorage.getItem('myCheckbox').then((value) => {
        if (value != null){
            this.setState({
                check: (value == 'true')
            });
        }
    }); 
}

However in the other page the line you do JSON.parse(value) is doing nothing, once you are not storing the result anywhere.