CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-paperreact-native-modal
RiddleRiddlerRddler
RiddleRiddlerRddler

Reputation: 363

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

Upvotes: 5

Views: 2707

Answers (3)

superrman777
superrman777

Reputation: 45

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

Upvotes: 0

RiddleRiddlerRddler
RiddleRiddlerRddler

Reputation: 363

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

Upvotes: 15

Will T
Will T

Reputation: 655

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.

Upvotes: 0

Related Questions