Reputation: 71
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>
);
};
Upvotes: 0
Views: 1192
Reputation: 8804
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)}
/>
Upvotes: 3