Formik intialValue erases Input

[haso5898]

❓Question

Hi,

I am new to React-Native and Javascript. I was trying to build an app where the user has to give one field values. I tried to do the validation with Formik but after using Formik I can not write anything. As soon as I write a single letter it is deleted immediately. Can someone show me what my mistake is with my code?

<Formik initialValues={{ name: '' }} onSubmit={(value) => {}} enableReinitialize >
            {(formikProps) => (
              <Form>
                <Input
                  placeholder="Listen Name hinzufügen"
                  rounded
                  right
                  name='name'
                  icon="list"
                  family="Feather"
                  iconSize={25}
                  iconColor="black"
                  onChangeText={() => formikProps.handleChange('name')}
                  enableReinitialize='true'

                  value={formikProps.values.name}
                />
                <Input
                  placeholder="Mitglieder Hinzufügen"
                  rounded
                  right
                  icon="team"
                  family="antdesign"
                  iconSize={25}
                  iconColor="black"
                />

                <View style={{ marginLeft: 120, flexDirection: "row" }}>
                  <View>
                    <Button
                      round
                      uppercase
                      color
                      color="error"
                      style={styles.button2}
                      onPress={() => props.navigation.navigate("Home")}
                    >
                      <Label style={(styles.font, styles.buttonText)}>
                        Abbrechen
                      </Label>
                    </Button>
                  </View>
                  <View>
                    <Button
                      round
                      uppercase
                      color
                      color="#50C7C7"
                      style={styles.button}
                      onPress={formikProps.handleSubmit}
                    >
                      <Label style={(styles.font, styles.buttonText)}>
                        Speichern
                      </Label>
                    </Button>
                  </View>
                </View>
              </Form>
            )}
          </Formik>

[johnrom]

hi @haso5898 ,

I can't see your issue in the code above. Is it possible your keypress or input change is causing React to re-render an ancestor of Formik? If any of the components do not maintain their identity either by being "constant" or by having identical key={value} over time, React will re-render that and all child components, resulting in Formik starting from scratch.

You can try removing enableReinitialize and see if that solves your problem. If so, the problem is that you're passing initialValues or some other prop that is changing on each keypress, and when it changes it resets the value state of your form to initialValues.

[haso5898]

I really dont know enableReinitiliaze did not help. I am using input field from galio I thought that was the problem but normal textinput does not work either.

this is my code above

const AddListView = (props) => {
  return (
    <View style={({ height: 50 }, styles.font)}>
      <Header>
        <Title style={styles.font}>Liste Hinzufügen</Title>
      </Header>

      <Card title="Listen Name">
        <View style={{ flexDirection: "row" }}>
          <View>
            <TouchableOpacity
              style={{
                marginTop: 5,
                marginLeft: 10,
                borderWidth: 1,
                borderColor: "rgba(0,0,0,0.2)",
                alignItems: "center",
                justifyContent: "center",
                width: 70,
                height: 70,
                backgroundColor: "#fff",
                borderRadius: 50,
              }}
            >
              <Icon name={"image"} size={30} color="#01a699" />
            </TouchableOpacity>
          </View>
          <View>
            <Text style={{ marginTop: 30, marginLeft: 30 }}>
              Optionale Eingabe Bild
            </Text>
          </View>
        </View>
        <View>

[haso5898]

No one?

[cdmoss]

I'm also having this exact issue.

[johnrom]

@cdmoss please reproduce with a codesandbox as it is pretty much impossible to tell what the issue is without the context of your app.

Formik template: https://codesandbox.io/s/91q6rxmmrp withFormik template: https://codesandbox.io/s/437wy20rx4

(sorry for the ping haso didn't see how old your issue was)