React Native Elements Checkbox SetState is not a function

Question

Have implemented a screen that uses checkboxes. Following the example from React Native Checkbox

On clicking a checkbox, receive the following error:

TypeError: _this.setState is not a function. (In '_this.setState({
      checked: !_this.state.checked
    })', '_this.setState' is undefined)

Below is my code:

import * as React from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {Button, Card, CheckBox} from 'react-native-elements';

function MyScreen({navigation}) {
  return (
    <View style={styles.view}>
      <View style={styles.panel}>
        <Card containerStyle={styles.card} title="My Checkboxes">
          <CheckBox
            title="My Checkbox"
            checked={this.state.checked}
            onPress={() => this.setState({checked: !this.state.checked})}
          />
        </Card>
        <Button
          style={styles.button}
          title="Done"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  view: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  panel: {
    width: Dimensions.get('window').width,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
  },
  button: {
    margin: 5,
    width: 150,
    height: 50,
  },
  card: {
    width: Dimensions.get('window').width,
    marginBottom: 20,
  },
});

export default MyScreen;

I've tried searching here, and pretty much everywhere, and can't seem to find a solution.

Any assistance would be appreciated.

Answer 1

If you are using your functional component as a child in another component, you can have use props instead.

 function MyScreen({navigation, onChecked, checked}) {
      return (
        <View style={styles.view}>
          <View style={styles.panel}>
            <Card containerStyle={styles.card} title="My Checkboxes">
              <CheckBox
                title="My Checkbox"
                checked={checked}
                onPress={onChecked}
              />
            </Card>
            <Button
              style={styles.button}
              title="Done"
              onPress={() => navigation.navigate('Home')}
            />
          </View>
        </View>
      );
    }

  MyScreen.propTypes = {
     checked: PropTypes.bool.isRequired,
     onChecked: PropTypes.func.isRequired
  };

export default MyScreen;

On the parent component the onChecked can look like:

onChecked =()=>{
  ...
  this.setState({checked: !this.state.checked})
}

Also in the parent component, you can use MyScreen as:

<MyScreen
  onCheck={this.onChecked} 
  checked={this.state.checked}
/>

Answer 2

You are using a functional component.

Change it to a class component or use hooks inside this functional component.

Change your code as following

class component

import React, { Component } from 'react'
import {Dimensions, StyleSheet, View} from 'react-native';
import {Button, Card, CheckBox} from 'react-native-elements';

export default class App extends Component {
state={ checked: false };
  render() {
    return (
      <View style={styles.view}>
      <View style={styles.panel}>
        <Card containerStyle={styles.card} title="My Checkboxes">
          <CheckBox
            title="My Checkbox"
            checked={this.state.checked}
            onPress={() => this.setState({checked: !this.state.checked})}
          />
        </Card>
        <Button
          style={styles.button}
          title="Done"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
    )
  }
}

or functional component

import React, {useState} from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {Button, Card, CheckBox} from 'react-native-elements';

function MyScreen({navigation}) {
  const [checked, toggleChecked] = useState(false);
  return (
    <View style={styles.view}>
      <View style={styles.panel}>
        <Card containerStyle={styles.card} title="My Checkboxes">
          <CheckBox
            title="My Checkbox"
            checked={checked}
            onPress={() => toggleChecked(!checked)}
          />
        </Card>
        <Button
          style={styles.button}
          title="Done"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
  );
}