React native text input. Text jumps whenever characters are entered into the input

Question

The following video explains what is going on https://www.loom.com/share/c9144a0877b1460c8c02c301afdc3029 There is a noticeable jump in the text when the text is entered. This is what the code for the text input looks like. i already tried scrollenabled=false. Any ideas would be welcome.

 <TextInput
        placeholder={'What do you want to talk about?'}
        placeholderTextColor={'#9A9A9A'}
        onChangeText={onChangeText}
        multiline={true}
        autoFocus={true}
        scrollEnabled={true}
        style={[styles.textInputPost, postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {}]}
      />

Answer 1

Probably, because you are using useState hook to manage the state, some re-renders happen and that is why that happens. Maybe try something like this:

  const [postText, setPostText] = useState('');
  const [postVideoUri, setPostVideoUri] = useState('');
  const [postImage, setPostImage] = useState('');

  const onChangeText = useCallback((text) => {
    setPostText(text);
  }, []);

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="What do you want to talk about?"
        placeholderTextColor="#9A9A9A"
        onChangeText={onChangeText}
        multiline
        autoFocus
        scrollEnabled
        style={[
          styles.textInputPost,
          postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {},
        ]}
      />
    </View>
  );