React Native TextInput ReRenders when calling useState Hook inside a custom component

Question

Description When a TextInput component triggers action such as in onChangeText or onKeyPress method which then triggers setState, the component will re render and lose focuse.

React Native version: 0.62 (Unable to upgrade due to use of Expo)

Steps To Reproduce Provide a detailed list of steps that reproduce the issue.

Create a Custom Wrapper Component simple like
Declare useStateHook
Pass TextInput to the Wrapper Component either by direct JSX or Custom Component
Bind setState function to any of event listeners of TextInput.

Expected Results sets State but does not lose focus or rerenders

Snack, code example, screenshot, or link to a repository: Expo Example https://snack.expo.io/@ksi9302/1f9369

Hi Guys, this is a bug report I made to React Native. But I'm not sure if I'm doing something wrong here.

What I've tried so far and doesn't work

Get rid of all styles.
make custom input component with class react component, disable shouldComponentUpdate
not binding value
make different state structure and actually pass within object {}
make dummy key

What I know will work

Get rid of custom wrapper and use plain JSX (In other words, not passing TextInput as children component) //Almost impossible when app gets bigger

Bad Compromise

using AutoFocus={true} //on Web works fine, but on Mobile, keyboard flickers a lot.

user_11407096 · Answer

Take the wrapper out as it keeps getting rerendered due to the search value changes.

import React, { useState } from "react";
import { View, TextInput } from "react-native";

const Test = () => {
  const handleChange = e => {
    setSearch(e);
  };
  const [search, setSearch] = useState(null);

  return (
    
       {
          handleChange(e);
        }}
        placeholder="type here"
      />
    
  );
};

const Wrapper = props => {
    return (
      
        {props.children}
      
    );
  };

export default Test;

React Native TextInput ReRenders when calling useState Hook inside a custom component

1 Answers