javascriptreactjsreact-nativereact-native-paperreact-native-modal

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

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:

enter image description here

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

Solution

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