Create Simple Form

FormScreen.js

    return (
        <ScrollView style={styles.detailContainer}>
            <Text style={styles.headingText}>Basic Form </Text>

            <View style={styles.fieldsContainer}>

                <Text style={styles.labelText}>Name</Text>
                <TextInput
                    style={styles.input}
                    onChangeText={setName}
                    value={name}
                    placeholder="Enter Name"
                    color="#4B4A4F"
                    placeholderTextColor="#C1C1C1"
                />

                <Text style={styles.labelText}>Contact No.</Text>
                <TextInput
                    style={styles.input}
                    onChangeText={newText => {
                        newText.length > 10
                            ? alert('Please enter 10 digit only')
                            : setPhone(newText);
                    }}
                    value={phone}
                    keyboardType="numeric"
                    placeholder="Enter Contact Number"
                    color="#4B4A4F"
                    placeholderTextColor="#C1C1C1"
                />

                <Text style={styles.labelText}>Address</Text>
                <TextInput
                    style={styles.inputAddress}
                    onChangeText={setAddress}
                    value={address}
                    multiline={true}
                    numberOfLines={4}
                    placeholder="Enter Address"
                    color="#4B4A4F"
                    placeholderTextColor="#C1C1C1"
                />


                <Text style={styles.labelText}>Gender</Text>
                <View style={styles.genderWrap}>
                    <RadioButton
                        value="Male"
                        status={gender === 'Male' ? 'checked' : 'unchecked'}
                        onPress={() => setGender('Male')}
                        color="#4B4A4F"
                        placeholderTextColor="#4B4A4F"
                    />
                    <Text style={styles.genderText}>Male</Text>
                    <RadioButton
                        value="Female"
                        status={gender === 'Female' ? 'checked' : 'unchecked'}
                        onPress={() => setGender('Female')}
                        color="#4B4A4F"
                        placeholderTextColor="#C1C1C1"
                    />

                    <Text style={styles.genderText}>Female</Text>

                    <RadioButton
                        value="Female"
                        status={gender === 'Other' ? 'checked' : 'unchecked'}
                        onPress={() => setGender('Other')}
                        color="#4B4A4F"
                        placeholderTextColor="#C1C1C1"
                    />

                    <Text style={styles.genderText}>Other</Text>
                </View>




                <TouchableOpacity
                    style={styles.submitBtnContainer}
                    onPress={submitForm}
                    activeOpacity={0.8}>
                    <Text style={{color:'white',fontSize:23,fontWeight:'bold'}}>Submit</Text>
                </TouchableOpacity>


            </View>
        </ScrollView>
    )