jeudi 14 juillet 2022

React Native Expo checkbox select between values

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