search

colbymillerdev / react-native-progress-steps

A simple and fully customizable React Native component that implements a progress stepper UI.
MIT License
377 stars 147 forks source link

With Formik? #51

Closed SPineapple closed 4 years ago

SPineapple commented 4 years ago

I've tried adding Formik third library for forms, and it is not working for me. How can I implement this with Formik?

Help is appreciated, thanks.

This is my attempt:

`

  <Formik
    initialValues={{ email: "" }}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {(props) => (
      <View>
        <ProgressSteps>
          <ProgressStep
            label="Info"
            nextBtnStyle={buttonTextStyle}
            nextBtnTextStyle={buttonTextStyle}
            //   onPrevious={this.onPrevStep}
            onNext={() => console.log("Next Step")}
            // errors={errors}
          >
            <TextInput
              style={{ borderWidth: "2px" }}
              onChangeText={props.handleChange("email")}
              value={props.values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
          </ProgressStep>
        </ProgressSteps>
      </View>
    )}
  </Formik>
</Fragment>`
colbymillerdev commented 4 years ago

Hi @SPineapple !

The Formik component should be placed inside of a ProgressStep so that it can be displayed on that step. Please take a look at issue #45 when you get a chance, it was also discussed there.