5

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

RiddleRiddlerRddler
  • 303
  • 3
  • 17
  • 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 – Will T Nov 19 '20 at 23:19
  • Sorry, missed it from the snippet. I've included the state in the snippet now. – RiddleRiddlerRddler Nov 19 '20 at 23:22
  • 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. – Someone Special Nov 21 '20 at 17:37

2 Answers2

9

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

RiddleRiddlerRddler
  • 303
  • 3
  • 17
0

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.

Will T
  • 647
  • 5
  • 16