React native paper TextInput in Modal, cursor flashes backwards after a character is input

Question

Some odd behaviour on a TextInput on a Modal in React Native Paper. When I type a character, it is input into the text box, but then the cursor flashes back (as if it is deleted) and then it reappears again. This all happens very quickly and the character is retained, but it all looks a bit janky. Gif below to illustrate:

The code is fairly simple for the modal:

import { Portal, Modal, Button, Title, Text, TextInput } from 'react-native-paper'; 

const [nameNew, setNameNew] = useState('')
const [emailNew, setEmailNew] = useState('')

const renderModalAddPerson = () => {
    return (
      <Portal>
        <Modal visible={visibleModalAddPerson} onDismiss={closeModalAddPerson} contentContainerStyle={styles.modalContainer}>
          <View>
            <Title style={{alignSelf:'center'}}>Title here</Title>
            <Text>  </Text>
            <TextInput
              mode="outlined"
              label="Name"
              style={{alignSelf:'center', width:'95%'}}
              value={nameNew}
              onChangeText={nameNew => setNameNew(nameNew)}
              ref={input1}
              returnKeyType='next'
              blurOnSubmit={false}
              onSubmitEditing={() => input2.current.focus()}
            />
            <TextInput
              mode="outlined"
              label="Email"
              style={{alignSelf:'center', width:'95%'}}
              value={emailNew}
              onChangeText={emailNew => setEmailNew(emailNew)}
              ref={input2}
              returnKeyType='done'
              blurOnSubmit={false}
              onSubmitEditing={() => addPerson()}
            />
            <Button
              uppercase={false} 
              style={{backgroundColor:'#2c3e50', width: '95%', alignSelf:'center', margin: 10}} 
              labelStyle={{color:'white'}}
              onPress={()=>addPerson()}
            >Add person</Button>
          </View>
        </Modal>
      </Portal>
    );
  };

Issue observed on iOS and not tested on Android

Filthy

Where is your state? Is it just missing from your snippet? Because I've seen this before and the input didn't have any state – Denticle

Sorry, missed it from the snippet. I've included the state in the snippet now. – Filthy

this is "normal' behaviour. suggest you use uncontrolled behaviour. Meaning you omit value={emailNew} and just retrieve emailNew in addPerson(). This allows you to use the double space (period .) behaviour also. – Notecase

Answer 1

Looks like this is a known bug in React Native. Best solution I have found is to use defaultValue prop instead of value.

Filthy

Answer 2

The only thing I can see is that your using the same variable name to update your state as the name of the state which could be causing something weird to happen.

 <TextInput
          mode="outlined"
          label="Name"
          style={{alignSelf:'center', width:'95%'}}
          value={nameNew}
          onChangeText={val => setNameNew(val)}
          ref={input1}
          returnKeyType='next'
          blurOnSubmit={false}
          onSubmitEditing={() => input2.current.focus()}
        />

Please try the above as I've tested and its working as expected for me.

Denticle

It doesn't seem to make any difference. Still have the same issue. – Filthy

Answer 3

For those who are struggling this bug in 2024, use useRef().

const email = useRef(null);
<TextInput 
  value={email.value}
  onChangeText={(value) => {
    email.value = value;
  }}
/>

Remember to reset the value to null if state changed.

email.value = null

Tlaxcala