question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

After upgrading from 0.58 to 0.59 keyboard dismisses automatically when focused on TextInput inside a Flatlist

See original GitHub issue

🐛 Bug Report

After upgrading from 0.58 to 0.59 keyboard dismisses automatically when focused on TextInput inside a Flatlist. Issues got in both ios and android. flatlist

To Reproduce

  • Create flatlist with some data.
  • Create TextInput inside Flatlist
  • Run app and Observe behaviour

Expected Behavior

  • Keyboard not dismiss automatically and focus was not lost from TextInput.

Code Example

<FlatList
  data={this.state.productData}
  keyExtractor = {(item, index) => index.toString()}
  onEndReachedThreshold = {0.5}
  key={'product-list'}
  onEndReached = {() => this.state.callNextRequest==true ? this.handleEnd() : undefined}
  renderItem = {({item, index}) => (
    <View>
      <TextInput
        placeholder="Qty"
        value={this.state.qty[index]}
        onChangeText={(qty) => this.qtyChange(qty,index)}
        placeholderTextColor={COLOR_GRAY}
        keyboardType={'numeric'}
        style={style.qtyInput}
      />
    </View>
  )}
/>

Environment

React Native Environment Info: System: OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver) CPU: (4) x64 Intel® Core™ i3-4130 CPU @ 3.40GHz Memory: 352.13 MB / 7.69 GB Shell: 4.4.19 - /bin/bash Binaries: Node: 8.14.0 - /usr/bin/node npm: 6.9.0 - /usr/bin/npm SDKs: Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 23.0.1, 25.0.2, 26.0.1, 26.0.3, 27.0.3, 28.0.0, 28.0.0, 28.0.3 System Images: android-P | Google APIs Intel x86 Atom npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.0 => 0.59.0 npmGlobalPackages: react-native-cli: 2.0.1

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:10
  • Comments:20 (2 by maintainers)

github_iconTop GitHub Comments

21reactions
hypestcommented, Mar 14, 2019

Can this be somehow related to https://github.com/Rachelmorrell/react-native/pull/170?

I think that setting FlatList.removeClippedSubviews to false might be a workaround for now.

4reactions
atrolcdcommented, Apr 4, 2019

I confirm that I also have the same issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TextInput inside a FlatList loses focus when off-screen
Keep the Flatlist inside a ScrollView so that on clicking the bottom text input the view is moved up and it allows the...
Read more >
nested textinput on scrollview react native - You.com
Keyboard dismisses while typing TextInput in nested functional component React ... in it's place; since old input is unmounted, you lose keyboard focus....
Read more >
react-native-keyboard-aware-scroll-view - npm
A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput . Scroll demo ...
Read more >
Today's React Native Tip: Keyboard issues in ScrollView
While using TextInput inside a scrollable page (ScrollView) there are a few issues you will run into with the keyboard being in focus....
Read more >
How to make your React Native app respond gracefully when ...
You can take the base code, which has the keyboard covering the inputs, and update that so that the inputs are no longer...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found