0

I have two forms in react-native. One of the works perfectly, the other (in another component) has a bug. The TextInputs in the form keep blurring when getting focus.

The video I made (see gif below) shows that whenever I click in the input it gets focus and then immediately blurs right after it.

The code for the input (now with debugs):

<TextInput value={group.name}
    blurOnSubmit={false}
    onBlur={() => console.log('I blur')}
    onFocus={() => console.log('I focus')}
    autoFocus={true} style={styles.textInput} />

Everytime I click the input it focusses and blurs

Mosselman
  • 1,718
  • 15
  • 27

3 Answers3

1

I found the answer... and I am confused as to why it is the answer, but here we go:

Apparently when you render a TextInput inside of a TabBarIOS component and you set selected={true} on your tab it will make it impossible to type into the TextInputs. I have no idea why. I had this on true in order to not have to click on the tab every time while building my views. I guess I will just set the default differently then :)

Mosselman
  • 1,718
  • 15
  • 27
1

I just encountered the same issue. In my case the problem was that my TextInput was a child of <TouchableWithoutFeedback onPress={Keyboard.dismiss}>. Removing this component all together fixed the issue.

aCMoFoCord
  • 136
  • 3
-1

**Installation

  1. Install React Navigation

    npm install react-navigation

  2. Install Dependencies

    expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

  3. Install React Navigation Stack

    npm install react-navigation-stack @react-native-community/masked-view

Hardil Singh
  • 11
  • 5