I am having problems with selecting between two values in the checkbox. It only works when I make click on Celsius. I don't know what I am doing wrong, can someone assist me with this.
I am not getting any error both as web app or phone app. I only need to make it possible to work when I click on the checkbox that the user selects.
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import Checkbox from 'expo-checkbox';
const Settings = () => {
const [isChecked, setChecked] = useState();
function tempUnit(isChecked) {
if (isChecked) {
return (
<TouchableOpacity>
<View style={styles.checkboxVariables}>
<Checkbox
value={true}
onValueChange={setChecked}
/><Text style={styles.checkboxVariable}>Celsius</Text>
<Checkbox
value={false}
onValueChange={setChecked}
/><Text style={styles.checkboxVariable}>Fahrenheit</Text>
</View>
</TouchableOpacity>
)
} else {
return (
<TouchableOpacity >
<View style={styles.checkboxVariables}>
<Checkbox
value={false}
onValueChange={setChecked}
/><Text style={styles.checkboxVariable}>Celsius</Text>
<Checkbox
value={true}
onValueChange={setChecked}
/><Text style={styles.checkboxVariable}>Fahrenheit</Text>
</View>
</TouchableOpacity>
)
}
}
return (
<View style={styles.container}>
<Text style={styles.containerTitle}>Application Settings</Text>
<Text style={styles.settingsTitle}>Temperature Unit</Text>
<TouchableOpacity>
{tempUnit(isChecked)}
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
containerTitle: {
fontWeight: 'bold',
fontSize: 40,
paddingTop: 50,
color: '#51697f',
},
settingsTitle: {
paddingTop: 20,
fontStyle: 'italic',
},
checkboxVariables: {
flexDirection: "row",
marginBottom: 10,
padding: 10,
},
checkboxVariable: {
marginRight: 30,
}
});
export default Settings;
Aucun commentaire:
Enregistrer un commentaire