I am trying to create a form using formik in react native but I am stuck on this error and I don't what I am doing wrong here.

Error:

Error: React.Children.only expected to receive a single React element child.

This error is located at:
    in Formik (created by RegisterScreen)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by RegisterScreen)
    in RCTView (created by View)
    in View (created by RegisterScreen)
    in RegisterScreen (created by SceneView)
.....

My code:

   <ScrollView>
        <Text>Sign up to get started</Text>
        <Formik
          initialValues={{
            name: "",
         ...
          }}
          onSubmit={...}
          validationSchema={yup.object().shape({
            name: .....
          })}
        >
          {" "}
          {({
            values,
            handleChange,
            errors,
            setFieldTouched,
            touched,
            isValid,
            handleSubmit,
          }) => (
            <KeyboardAvoidingView enabled>
              <View style={styles.SectionStyle}>
                <TextInput
                value={values.name}
                  onChangeText={handleChange("name")}
                  onBlur={() => setFieldTouched("name")}
                  style={styles.inputStyle}
                  underlineColorAndroid="#f000"
                  placeholder="Enter Name"
                  placeholderTextColor="#8b9cb5"
                  autoCapitalize="sentences"
                  returnKeyType="next"
                  blurOnSubmit={false}
                />
                {touched.name && errors.name && (
                  <Text style={styles.errorText}>{errors.name}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                .....
                />
                {touched.email && errors.email && (
                  <Text style={styles.errorText}>{errors.email}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                 .....
                />
                {touched.phone && errors.phone && (
                  <Text style={styles.errorText}>{errors.phone}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                .....
                />
                {touched.password && errors.password && (
                  <Text style={styles.errorText}>{errors.password}</Text>
                )}
              </View>
              <View style={styles.SectionStyle}>
                <TextInput
                  .....
                />
                {touched.confirmPassword && errors.confirmPassword && (
                  <Text style={styles.errorText}>{errors.confirmPassword}</Text>
                )}
              </View>
              <View style={styles.CheckBox}>
                <Switch
                  style={styles.switch}
                  onValueChange={(newValue) => setSwitchBox(!newValue)}
                  value={!switchBox}
                />
                <Text style={styles.CheckBoxText}>Show Password</Text>
              </View>
              {error ? (
                <ErrorAwesomeAlerts
                  message={`${error}`}
                  ...
                  }}
                />
              ) : null}
              <Pressable
                disabled={!isValid}
                ...
              >
                {loading ? (
                  <View style={styles.activityIndicator}>
                    ....
                  </View>
                ) : (
                  <Text style={styles.buttonTextStyle}>Sign Up</Text>
                )}
              </Pressable>
            </KeyboardAvoidingView>
          )}
        </Formik>
      </ScrollView>

I have tried resolving this error by removing <View style={styles.SectionStyle}> from <TextInput> but it didn't solve this error.

I have removed some irrelevant code if needed I can put it back please do let me know in the comments.

Why I am getting this error and How can I solve it?

CodePudding user response：

You have 2 "components":

{" "}

And

({...}) => <KeyboardAvoidingView enabled>
...

Try to delete the first one.