CODEWITHSUNDEEP
react-nativeuitextinput
Mosselman
Mosselman

Reputation: 1748

My textinput in react native blurs directly after focus

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

Upvotes: 2

Views: 3106

Answers (3)

aCMoFoCord
aCMoFoCord

Reputation: 146

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.

Upvotes: 2

Hardil Singh
Hardil Singh

Reputation: 9

**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

Upvotes: -2

Mosselman
Mosselman

Reputation: 1748

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 :)

Upvotes: 1

Related Questions