Set data from backend as value of input not working on RN 0.60

[Metallistener]

Someone can help me pls. After update my RN version the value prop not working properly, in profile screen I get some data from backend and I need to set it as a value for field but it doen't work, field is empty. I've tried to use defaultValue prop, it works but I cannot change color of this value, it's grey while I don't focus field, and I think that using defaultValue prop not correct( What can I do? @n4kz pls help) Application is already huge more than 35 screens And so I would not want to change library.

[bb-cuongnv]

Someone can help me pls. After update my RN version the value prop not working properly, in profile screen I get some data from backend and I need to set it as a value for field but it doen't work, field is empty. I've tried to use defaultValue prop, it works but I cannot change color of this value, it's grey while I don't focus field, and I think that using defaultValue prop not correct( What can I do? @n4kz pls help) Application is already huge more than 35 screens And so I would not want to change library.

I have the same problem. I downgraded from 0.16.1 to 0.12.0. It worked for me I using React-native: 0.61.5

[art1373]

@Metallistener defaultValue instead of value.

[Metallistener]

@Metallistener defaultValue instead of value.

It works but a field is light grey color by default, a field color changes after focus on it ( So I cannot find how to change defaultValue color, if you know can you say how to do it pls?

UPD: Solved!) Need to change baseColor

[billel-boudchicha]

@Metallistener , how did you manage to solve this with 0.16.1 ? the value doesn't update when props gets changed ex: wrapping with Formik @bbturtle yes downgrade does work but it rises the life cycle warning

[ttcg]

@billel-boudchicha Have you managed to sort the issue?

I've got the same problem now with 0.16.1. It's wrapped in Formik and the value doesn't update when I use setFieldValue('name', xxx)

[billel-boudchicha]

@ttcg sorry , iam using the 0.12.0 with formik , i think the issue is still persist with 0.16.1

[Drzaln]

@Metallistener hey, how can you solve this? i already using defaultValue but nothing happen

[ttcg]

@Metallistener hey, how can you solve this? i already using defaultValue but nothing happen

It works for me.

<TextField
              onChangeText={handleChange("dateUsed")}
              onBlur={handleBlur("dateUsed")}
              onFocus={showDatePicker}
              label='Date'
              baseColor='#000000'
              defaultValue={values.dateUsed}
              keyboardType='decimal-pad'
              error={errors.dateUsed}
              renderRightAccessory={() => renderRightIcon('calendar')}
            />

You can see my sample code here: https://github.com/ttcg/react-native-costdiary/blob/master/screens/AddNewScreen.js

[tristanbrandt014]

My solution was to add a ref to each field and manually call setValue when the values change. It's quite verbose/hacky, especially if there's a lot of fields, but solves the problem of the fields starting in the baseColor until focussed. I'm using formik here, but it will work regardless of how you manage state.

RN: 0.62.2 Package version: 0.16.3

const Checkout: React.FC<Props> = ({values, handleChange}) => {
  const emailField = useRef<OutlinedTextField | null>();
  useEffect(() => {
    emailField.current?.setValue(values.email);
  }, [values]);

  return (
          <OutlinedTextField
            label="Email Address"
            value={values.email}
            ref={instance => emailField.current = instance}
            onChangeText={handleChange('email')}
          />
  );
};

export default withCheckoutForm(Checkout);

[CVRamana]

@Metallistener hey, how can you solve this? i already using defaultValue but nothing happen

It works for me.

<TextField
              onChangeText={handleChange("dateUsed")}
              onBlur={handleBlur("dateUsed")}
              onFocus={showDatePicker}
              label='Date'
              baseColor='#000000'
              defaultValue={values.dateUsed}
              keyboardType='decimal-pad'
              error={errors.dateUsed}
              renderRightAccessory={() => renderRightIcon('calendar')}
            />

You can see my sample code here: https://github.com/ttcg/react-native-costdiary/blob/master/screens/AddNewScreen.js

use defaultValue instead of value, works for me