How can I make a picker in react native required

Question

I have created a signup form in react native with formik and yup.According to the documentation I have added the react native picker.

<Formik
        initialValues={{ password: '', first_name: '', email: '', passwordConfirmation: '' }}
        onSubmit={values => handleSubmit(values)}
        validationSchema={registerSchema}
      >
        {({ handleChange, handleBlur, handleSubmit, values, touched, errors }) => (
          <View>
            <TextInput
              style={styles.textInputTop}
              onChangeText={handleChange('first_name')}
              onBlur={handleBlur('first_name')}
              value={values.first_name}
              label="First Name"
              mode="outlined"
            />

            <Text style={styles.errorMsg}>{touched.first_name && errors.first_name}</Text>
           
            //Other Fields I have not mentioned in the code 

            <View style={styles.pickerContainer}>
              <Text style={styles.depText}>Department</Text>
              <Picker
                style={{ height: 50, width: 150 }}
                onValueChange={(itemValue, itemIndex) => setdepartment(itemValue)}
                mode={"dropdown"}
              >
                <Picker.Item label="Management" value="Management" />
                <Picker.Item label="HR" value="HR" />
                <Picker.Item label="Accounting" value="Accounting" />
                <Picker.Item label="Sales" value="Sales" />
              </Picker>
            </View>
            <Button style={styles.btn} mode="contained" onPress={handleSubmit}>
              <Text style={{ color: "white" }}>Sign Up</Text>
            </Button>
          </View>
        )}
      </Formik>

I need to add formik and yup to the picker to make it a required field. How do I do it? If it is not possible with formik and yup, then how I can make the picker required.

Answer 1

on the registerSchema make:

department:  Yup.string().required('this field is required')

department will hold the selected value from the picker, you may change the type from string to array depending on the selected value.