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

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>
  );
}