React-Native Prevent keyboard dismiss on state update

Question

I have a button that is disabled if a state is false and the state is change if some conditions are not met on each item in an array, one of the condition is that a textfield should contain something, I check for that condition each time the text change. The condition work but each time I change the state the keyboard is dismiss. ie: each time I enter or remove the first letter of the word.

const [canSave, setCanSave] = useState<boolean>(true);

//this function is called each time one of the textfield is changed
const updateCanSave = () => {
    for (let i = 0; i < currentSteps.length; i++) {
      const step = currentSteps[i];

      if (
        (step.name.length > 0 && step.media === undefined) ||
        (step.name === "" && step.media !== undefined)
      ) {
        setCanSave(false);
        break;
      }
      setCanSave(true);
    }
  };

return (
    //the flatList renderItem contains many textfield and imagePicker
    <FlatList
       data={array}
       ...
       ListFooterComponent={
           <Button on Press={save} disable={!canSave}>Save</Button>
       }
    />
)

@Quoc-AnhNguyen I'm not sure I understand your question but but the renderItem of my FlatList look like that <Container > ... <View> ... <TextInput> ... onChangeText={(text: string) => { ... updateCanSave(); }} </TextInput> </View> </Container> — Antoine Lacroix

Irfan wani Irfan wani · Accepted Answer · 2021-02-10T15:42:49

Though you cannot do that but there are ways to go through it.

1) you can set autoFocus={true} for the input field. But, this is a little buggy. Keyboard stills closes after every change but opens just after that very quickly but not so good.

2) create some other dict (other than state) and store the value of different input fields in that and change the state when the input field loses focus (you can check that by using onBlur prop of input field).

React-Native Prevent keyboard dismiss on state update

1 Answers