DEV Community

VIKAS PATEL
VIKAS PATEL

Posted on

How to send data using Formik on react native?

` 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>`
Enter fullscreen mode Exit fullscreen mode

Top comments (0)