Redux-form: react-native: text "blinks"

[menesh2]

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

when i write a letter sometime it "blinks"
it disappears and comes back, when i am trying to delete a letter it happens too,
the letter gets deleted and then comes back and then deleted again

What is the expected behavior?

when i am writing a letter or deleting, no blink will happen

Sandbox Link

i do not have a sand box link, i am using react native

What's your environment?

react: 16.8.3
redux-form: 8.2.0
react-redux: 7.0.3
using react native for mobile

Other information

if the app installed from computer the problem disappears but if i get the app through testFlight or app center the bug is reproduced.
(on both ios and android)

this is my code:

...
    public renderInput = (props) => {
        return (
            <CustomInput  {...{
                ...props.input,
                ...props.meta,
                placeholder: props.placeholder,
                keyboardType: props.keyboardType,
                maxLength: props.maxLength,
            }} />
        )
    }

    public renderDateField = (props) => {
        return (
            <TouchableOpacity activeOpacity={1} onPress={this.openDateTimePicker}>
                <CustomInput  {...{
                    ...props.input,
                    ...props.meta,
                    placeholder: props.placeholder,
                    keyboardType: props.keyboardType,
                    maxLength: props.maxLength,
                    editable: props.editable,
                    pointerEvents: props.pointerEvents,
                    label: props.label
                }} />
            </TouchableOpacity>
        )

    }

    public render() {
        return (
            <View>
                <DateTimePicker
                    isVisible={this.state.showDateTimePicker}
                    onConfirm={this.onDateChoose}
                    onCancel={this.hideDateTimePicker}
                    maximumDate={this.state.maximumDate}
                />
                <View testID={'details-section'}>
                    <View style={{marginBottom:60}}>
                        <Field name={'firstName'} {...{
                            maxLength: 20,
                            placeholder: 'First Name'
                        }} component={this.renderInput} />
                    </View>
                    <View style={styles.inputContainer}>
                        <Field name={'lastName'} {...{
                            maxLength: 20,
                            placeholder: 'Last Name'
                        }} component={this.renderInput} />
                    </View>
                    <View style={styles.inputContainer}>
                        <Field name={'dateOfBirth'} {...{
                            placeholder: 'MM-DD-YYYY',
                            editable: false,
                            label:'Date of birth',
                            pointerEvents: 'none',
                        }} component={this.renderDateField} />
                        <Text style={[generalStyles.text_default_regular, {fontSize:14, paddingTop:5, color: colors.dark_gray}]}>You must be at least 18 years old</Text>
                    </View>
                </View>
            </View>
        )
    }
}

export default reduxForm({
    form: 'userDetailsForm',
    validate: (values: ErrorMessages) => {
        const errors: ErrorMessages = {};
        errors.firstName = Validator.nameValidation(values.firstName);
        errors.lastName = Validator.nameValidation(values.lastName);
        errors.dateOfBirth = !values.dateOfBirth ? 'Field is required': '';
        return errors;
    }
})(UserDetailsFormComponent)

what could be the problem?

[tills98]

I have the same issue. Here is a gif of this bug:

[wellingtonleitedev]

I solved this issue just downgrade in redux libraries.
"react-redux": "^5.0.7",
"redux": "^4.0.1",
"redux-form": "^7.4.2",
"redux-thunk": "^2.3.0",

[tills98]

Is there another solution than downgrading?

[menesh2]

joins the question, is there another solution?

[wellingtonleitedev]

Maybe, you don't need to use a really old version, but try downgrade one or two version of Redux, for example.

[tills98]

I've tried it myself and solved the issue by downgrade the following libraries and install "immutable": "^4.0.0-rc.12":
"react-redux": "7.0.0",
"redux": "^4.0.4",
"redux-form": "8.2.2"

I found out that it will start lagging again if react-redux version is higher than 7.0.0.

[marcin-slezak]

The same issue like on @Skyxo gif.
I use react native + expo.
I also noticed that when typing faster input value duplicates in a strange way.

What helped:

Downgrade react-redux from 7.1.0 to 7.0.0

other packages:
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"redux": "^4.0.4",
"redux-form": "^8.2.5",

p.s. if anyone use expo and has an issue with downgrade like
error: bundling failed: Error: Unable to resolve module./hooks/useDispatchfrom
then remember to clear expo cache:
expo r -c

[bigchamp]

Downgrading react-redux library to 7.0.0 solved this issue.
"react-redux": "7.0.0",
"redux": "^4.0.1",
"redux-form": "8.2.5",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"

[vivek25constants]

Downgrading doesn't solve it for me. Unbelievably, it is happening on all forms in my app except one. I don't know how. It's identical

[toumas]

Instead of passing props.input.value to the input component let the Input component handle it's own value.

This is what I had before

const FormInput = ({
    input: {onChange, ...restInput},
    ...rest
}) => {
  return <Input onChangeText={onChange} {...restInput} {...rest} />
}

And this is after "fixing" it. Notice the unused value in the spread operator.

const FormInput = ({
    input: {onChange, value, ...restInput},
    ...rest
}) => {
  return <Input onChangeText={onChange} {...restInput} {...rest} />
}

I haven't noticed any downsides in my application so far.

[tattivitorino]

I'm having the same issue! I'm using redux-form and nativebase inputs! tried with plain RN TextInput but no luck! When I try the nativebase input by itself it does not happen! It all started happening when I upgraded my project as follow.

This is before and it was working:
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-saga": "^1.0.2",
"reselect": "^4.0.0"

This is now and it's not working:
"expo": "^33.0.0",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-redux": "^7.1.0",
"redux": "^4.0.4",
"redux-form": "^8.2.5",
"redux-saga": "^1.0.5",
"reselect": "^4.0.0"

I'll try downgrading the redux libs and see what happens! I don't like this approach though!

[tattivitorino]

Yes! downgrading react-redux to 7.0.0 solved it!
yarn remove react-redux
yarn add [email protected]
rebuild the project (my app is ejected from Expo)
Cheers!!!!

[vivek25constants]

How could it work properly in one form and not the other?!! I'm using the same component in different forms and its working in one, not working in the other forms (react native)

[tattivitorino]

@vivek25constants let us see a bit of your code, maybe we can share some light!!

[herarya]

the same issue, I try downgrade still happens

[radko93]

I downgraded to 7.0.3 and it also helped (so no need to use 7.0.0). But not sure where to look for a fix

[driley-emoney]

7.1.0 is needed if you want to use the new redux hooks. So for some downgrading is not preferred. Any idea on a fix?

[mato2593]

Instead of passing props.input.value to the input component let the Input component handle it's own value.

This is what I had before

const FormInput = ({
  input: {onChange, ...restInput},
  ...rest
}) => {
  return <Input onChangeText={onChange} {...restInput} {...rest} />
}

And this is after "fixing" it. Notice the unused value in the spread operator.

const FormInput = ({
  input: {onChange, value, ...restInput},
  ...rest
}) => {
  return <Input onChangeText={onChange} {...restInput} {...rest} />
}

I haven't noticed any downsides in my application so far.

This works for normal inputs, but it doesn't work for inputs that are using the format prop 😞or if you are automatically filling some inputs.

[mato2593]

7.1.0 is needed if you want to use the new redux hooks. So for some downgrading is not preferred. Any idea on a fix?

@driley-emoney try doing this:

const FormInput = ({
    input: {onChange, value, ...restInput},
    ...rest
}) => {
  return (
    <Input
      onChangeText={onChange}
      defaultValue={value}
      {...restInput}
      {...rest}
    />
  );
}

It's not pretty, but it's working for us and you are still able to use formatting and redux hooks 😄

[driley-emoney]

@mato2593 that did work thanks!

[mmerickel]

Confirmed downgrading to react-redux 7.0.3 from 7.1.1 works for me as well.

[fredev]

Same issue here with native base inputs, downgrading to 7.0.0 from 7.1.0 works for us.

[YoungDu]

Same issue here with RN TextInput blinking, downgrading to 7.0.3 from 7.10.0 works for me.

[edritech93]

same for me

[bbauduin]

7.1.0 is needed if you want to use the new redux hooks. So for some downgrading is not preferred. Any idea on a fix?

@driley-emoney try doing this:

const FormInput = ({
  input: {onChange, value, ...restInput},
  ...rest
}) => {
  return (
    <Input
      onChangeText={onChange}
      defaultValue={value}
      {...restInput}
      {...rest}
    />
  );
}

It's not pretty, but it's working for us and you are still able to use formatting and redux hooks 😄

This didn't work for us...

We did this :

const FormInput = ({
    normalizeInput = (value) => value,
    input,
    ...rest
}) => {
  const [value, setValue] = React.useState(input.value)
  return (
    <Input
      onChangeText={(params) => {
          const value = normalizeInput(params)
          input.onChange(value)
          setValue(value)
      }}
      value={value}
      onBlur={input.onBlur}
      onFocus={input.onFocus}
      {...rest}
    />
  );
}

The caveat is to use a custom function normalizeInput (normalize is kept by redux Field component).

[peacepostman]

@mato2593 Thanks dude, that did the tricks for us

[sbycrosz]

CMIIW but @mato2593 solution will make your input to be an uncontrolled input (which may break your application if your app expects the input to be controlled input).

Edit: We ended up rolling back to 7.4.2 😢

[HayderEspinoza]

Have you found how to solve this issue?

[nazwa]

Spreading the input prop instead of manually assigning value and onChange did the trick for me.

// BAD
const { value, onChange } = input

<StyledTextInput value={value} onChange={onChange} />

// GOOD
<StyledTextInput {...input} />

[habovh]

Updating to react-redux 7.1.3 (from 7.1.1) fixed it for me.
It seems that 7.1.2 brought the fix that's causing this particular issue, you can read the changelog here: react-redux 7.1.2.

[mohitkmr170]

Found the same issue of TextInput flickering _onchangeText_
_Solution_

Downgrading version of react-redux and redux-form worked perfectly fine
package.json after changes :-
"react-redux": "^5.0.7",
"redux-form": "^7.4.2",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",

[ErikCupal]

Updating to react-redux 7.1.3 (from 7.1.1) fixed it for me.
It seems that 7.1.2 brought the fix that's causing this particular issue, you can read the changelog here: react-redux 7.1.2.

I can confirm this worked for me. Don't forget to clean expo cache expo r -c.

[slavikdenis]

Occured in [email protected] as well. I did not have this problem for a while, but now it occurs again.

"react-redux": "7.2.0",
"redux": "^4.0.5",
"redux-form": "^8.3.6",

[habovh]

Same as @slavikdenis, haven't had this issue for a while but after updating to react-native 0.63 it's happening again.

For information, RN 0.63.2 now uses [email protected] (as opposed to 16.11.0 before my update from RN 0.62.2).

[lorenzoangelini]

@habovh @slavikdenis did you find a solution with React Native 0.63?

[slavikdenis]

@habovh @slavikdenis did you find a solution with React Native 0.63?

Well, I'm migrating to formik unfortunately.

[habovh]

@habovh @slavikdenis did you find a solution with React Native 0.63?

In my case I migrated most of my simple forms to Final Form.

For the remaining forms that needed to live inside redux —using React Native, I needed forms to be able to spread through multiple screens—, I decided to initialise text fields to the field value, and not assign the value prop directly.

This behaviour, while not ideal, proved to be a good workaround as it allows my fields to use initialValues properly, while getting rid of the timing issue between the UI and the controlled input.

Example

I went from:

<TextInput onChangeText={input.onChange} value={input.value} />

To:

<TextInput onChangeText={input.onChange} defaultValue={input.value}/>

[Rendfold]

It seems migrating is the only option? I also have problem with React Native 0.63, but only on iOS?

[PrimulaX]

Any workaround about this issue? It's pretty much strange only occur on iOS.

[kriss34]

habovh's workaround worked for me, changing
_value_
to
_defaultValue_

[YesSkyscrapers]

Any other solution?
For some reasons cant change value -> defaultValue...
And using React Hooks, so cant downgrade to 7.0.0....
Any ideas?

[vgm8]

Having this same problem after updating to RN 0.63.4

[nnphongdsv]

Having this same problem after updating to RN 0.63.4

• "react-redux": "^7.2.2"
• "redux": "^4.0.5"
• "redux-form": "^8.3.7",