Question 32735 in React native Question posted in
The official React Native documentation can be found here.

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

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%' } : {}]}
      />
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    ok so i found a solution. it has two components.

    1. use useCallback() for onchangeText function.

    2. provide a width component for the textInput field. That is critical for the solution to work. With both of these things, it will not jump.

       textInputPost: {
fontFamily: 'Montserrat',
fontSize: 18,
lineHeight: 30,
alignItems: 'flex-start',
justifyContent: 'flex-start',
height: '38%',
**width: windowWidth - 40,**
paddingRight: 20,

      },


  2. 0

    It behaves like that because you are probably calling the setState() function directly on change, which triggers a re-render every time you edit text input content. For text inputs, I recommend to use the React-Hook-Form library and use Controller to make it controlled input; then it should work fine.

    Login or Signup to reply.
  3. 0

    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>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search