react native textinput lost focus after 1 char type-CodePudding

I have this problem with ios but not with android. It only disturb the add task input the task edit and the list name edit. The input addList(It's the one with "What to do?" on the draw) in the header works fine.

UI drawing Achitecture of components

I console log my component and I can see it rerender everytime I add a letter in the input field.

I checked on google and follow this:(can we link other website here?) https://www.codegrepper.com/code-examples/javascript/react native textinput lost focus after charter type

Tried the the first solution with onBlurr and onFocus. I tried to make a TextInput component for add task. I even try with my component addList but it didn't solve the problem.

Anyone have faced this problem before? Is there anyway to by pass this?

My code without the import/style look like this:

const TaskList: FunctionComponent<TasksListProps> = ({
  addTask,
  deleteTask,
  toggleTask,
  editTaskName,
  ...props
}) => {
  console.log('props', props);

  const [nameOfTask, setNameOfTask] = useState('');
  console.log('name', nameOfTask);
  const textHandler = (enteredName: string) => {
    setNameOfTask(enteredName);
  };

  const handleSubmitTask = () => {
    if (nameOfTask === '') {
      return;
    }
    addTask(props.listId, nameOfTask);
    setNameOfTask('');
  };

  return (
    <View style={styles.tasksListContainer}>
      {props.tasks.map(task => (
        <SingleTask
          key={task.id}
          task={task}
          listId={props.listId}
          deleteTask={deleteTask}
          toggleTask={toggleTask}
          editTaskName={editTaskName}
        />
      ))}
      <View style={styles.taskInputContainer}>
        <TextInput
          style={styles.tasksTextInput}
          value={nameOfTask}
          onChangeText={textHandler}
          placeholder="Write a task to do"
        />

        <TouchableOpacity onPress={handleSubmitTask}>
          <Image source={require('./Img/add-button.png')} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

CodePudding user response：

You can create a HOC and wrap your screen width DismissKeyboard

import { Keyboard } from 'react-native';

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);

CodePudding user response：

That because Re render.

Try to make the input with the main component of the page to test it.

Then check where the error with re-render