checkboxes not changing react native elements

Question

Hi I am doing a form like the component with checkboxes on react native that marks if the user is female or male, but I can't make it work it appears and looks like I want but I can't make the mark change from one option to the other one nor can I pass the value to submit

any help is appreciated

Note: that I am using the library react-native-elements for the <CheckBox /> component.

this is my code

import React, {  useContext,useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

import MyDatePicker from './MyDatePicker';
import { CheckBox } from 'react-native-elements';

const PersonalForm = ({onSubmit, errorMessage}) => {
    const [vName, setvName] = useState('');
    const [vSecondName, setvSecondName] = useState('');
    const [selectedValue, setSelectedValue] = useState(true);


return ( 
    <ScrollView>
      <View style={styles.buttonContainer}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvName => setvName(newvName)}
            value={vName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
        </View>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Segundo nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvSecondName => setvSecondName(newvSecondName)}
            value={vSecondName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
          </View>
          </View>
          <CheckBox
            containerStyle={styles.checkbox}
            textStyle={styles.checkboxTxt}
            uncheckedColor={'#b3b4b5'}
            checkedColor={"#911830"}
            key={4}
            title="Male"
            value={4}
            value="4"
            checkedIcon="stop"
            checked={selectedValue}
            onChange={()=>setSelectedValue(true)}
          />
          <CheckBox
            containerStyle={styles.checkbox}
            textStyle={styles.checkboxTxt}
            uncheckedColor={'#b3b4b5'}
            checkedColor={"#911830"}
            key={3}
            title="Female"
            value={3}
            value="3"
            checkedIcon="stop"
            checked={!selectedValue}
            onChange={()=>setSelectedValue(false)}
          />
          <View>
              <MyDatePicker />
          </View>
              <View style={styles.buttonContainer2}>
              <TouchableOpacity 
                style={ styles.logout}  
                onPress={() => onSubmit(vName, vSecondName, vGender, vEmail)}
              >
                  <Text style={styles.loginText}>GUARDAR</Text>
              </TouchableOpacity>
          </View>
        </ScrollView>
    );
};

Answer 1

Your are using the callback wrong. As mentioned in the docs, the callback you are looking for is onPress instead of onChange.

Change it to this:

 <CheckBox
        containerStyle={styles.checkbox}
        textStyle={styles.checkboxTxt}
        uncheckedColor={'#b3b4b5'}
        checkedColor={"#911830"}
        key={4}
        title="Male"
        value={4}
        value="4"
        checkedIcon="stop"
        checked={selectedValue}
        onPress={()=>setSelectedValue(true)}
      />
     <CheckBox
        containerStyle={styles.checkbox}
        textStyle={styles.checkboxTxt}
        uncheckedColor={'#b3b4b5'}
        checkedColor={"#911830"}
        key={3}
        title="Female"
        value={3}
        value="3"
        checkedIcon="stop"
        checked={!selectedValue}
        onPress={()=>setSelectedValue(false)}
      />