How to send data using Formik on react native?
Published: 2022-01-18 07:55:36

`<Formik
          initialValues={{
            topic: "",
            service: "",
            subject: "",
            words: "",
            deadline: "",
          }}
          onSubmit={(values, { resetForm }) => {
            // await dispatch(actionCreators.newOrder(values))

            props.navigation.navigate("NewOrderFirst", {
              newOrderData: values,
            });

            console.log(values);
            resetForm({ values: "" });
          }}
        >
          {({ handleChange, handleBlur, handleSubmit, values }) => (
            <View style={styles.form}>
              <View style={styles.formConrol}>
                <Text style={styles.formLabel}>What is your Topic</Text>
                <TextInput
                  style={styles.formInput}
                  placeholder="Enter your Topic"
                  value={values.topic}
                  onChangeText={handleChange("topic")}
                  onBlur={handleBlur("topic")}
                  returnKeyType="next"
                />
              </View>
              <View style={styles.formConrol}>
                <Text style={styles.formLabel}>Services</Text>
                <Picker
                  selectedValue={values.service}
                  onBlur={handleBlur("service")}
                  onValueChange={handleChange("service")}
                >
                  {service.map((item, index) => (
                    <Picker.Item key={index} label={item} value={item} />
                  ))}
                </Picker>
              </View>
              <View style={styles.formConrol}>
                <Text style={styles.formLabel}>Subject Area</Text>
                <Picker
                  selectedValue={values.subject}
                  onBlur={handleBlur("subject")}
                  onValueChange={handleChange("subject")}
                >
                  {subject.map((item, index) => (
                    <Picker.Item key={index} label={item} value={item} />
                  ))}
                </Picker>
              </View>
              <View style={styles.formConrol}>
                <Text style={styles.formLabel}>No Of Words </Text>
                <View>
                  <TextInput
                    style={{ ...styles.formInput, height: 40 }}
                    placeholder="Enter No Of Words"
                    value={values.words}
                    onChangeText={handleChange("words")}
                    onBlur={handleBlur("words")}
                    keyboardType="number-pad"
                    returnKeyType="next"
                  />
                </View>
              </View>
              <View
                style={{
                  ...styles.formConrol,
                  height: 41,
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
              >
                <Text style={styles.formLabel}>Deadline</Text>
                <Image
                  style={{ position: "absolute", left: 80, top: 12 }}
                  source={require("../assets/icons/calendar-check.png")}
                />
                <DatePicker
                  style={{ width: 240, height: 46 }}
                  date={values.deadline}
                  mode="date"
                  placeholder="select date"
                  format="YYYY-MM-DD"
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                  onDateChange={handleChange("deadline")}
                  showIcon={false}
                />
              </View>
              <TouchableOpacity onPress={handleSubmit}>
                <Text style={styles.btn}>Continue</Text>
              </TouchableOpacity>
            </View>
          )}
        </Formik>`