FlatList item onPress not work the first time after refreshed #20011

kientux · 2018-07-03T09:03:50Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Memory: 25.63 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.3.1 => 16.3.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-scripts: 1.14.0

Description

FlatList has item with TouchableHighlight, and a RefreshControl attached.
onPress method of TouchableHighlight is not working the first time after onRefresh called.

If I scroll FlatList a bit after refreshed, then item onPress works fine.
// UPDATE: Android does not have this bug.

Reproducible Demo

Fresh project created by react-native init

import React, { Component } from "react";
import { Text, View, FlatList, TouchableOpacity, RefreshControl } from "react-native";

type Props = {};
export default class App extends Component<Props> {
  constructor() {
    super();
    this.state = { refreshing: true, items: [] };
  }

  componentDidMount() {
    this.refresh();
  }

  genItems = () => [0, 1, 2, 3, 4, 5];

  refresh = () => {
    this.setState({ refreshing: true, items: [] });
    setTimeout(() => this.setState({ refreshing: false, items: this.genItems() }), 1500);
  };

  renderItem = ({ item }) => {
    const text = `${item}`;
    return (
      <TouchableOpacity onPress={() => alert("pressed!")}>
        <Text style={{ width: "100%", height: 48, backgroundColor: "white" }}>
          {text}
        </Text>
        <View style={{ width: "100%", height: 1, backgroundColor: "gray" }} />
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={{ flex: 1, padding: 48 }}>
        <FlatList style={{ flex: 1, backgroundColor: "#aaa", borderColor: "gray", borderWidth: 1 }}
          renderItem={this.renderItem}
          data={this.state.items}
          keyExtractor={item => `${item}`}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.refresh}
            />
          }
        />
      </View>
    );
  }
}

The text was updated successfully, but these errors were encountered:

TheSavior · 2018-07-04T04:39:28Z

Fascinating. Does it work without a refresh control? What about a touchablewithoutfeedback instead of a touchablehighlight?

kientux · 2018-07-04T05:02:52Z

If I remove refreshControl then auto refresh with a setTimeout then it works fine. Touches registered everytime.
It does NOT work with TouchableHighlight, TouchableOpacity or TouchableWithoutFeedback.

kientux · 2018-07-04T09:59:47Z

Update that Android doesn't has this bug.

TheSavior · 2018-07-06T18:37:20Z

Does this repro with v0.56.0?

kientux · 2018-07-07T00:59:40Z

Yes it still does.

// Updated first post with latest info from react-native info.

vkhasanshin · 2018-07-19T16:17:02Z

Same issue!

TheSavior · 2018-07-19T20:20:55Z

This reproes with ScrollView, not just FlatList.

It requires clearing the items and then rendering them. Just triggering a state update with the same items isn't enough.
It requires a refresh control and triggering onRefresh that way. If you do a setInterval in the componentDidMount which calls refresh(), that doesn't repro.

Someone will need to dig into the ScrollView implementation and see if something funky is happening with the refresh control. It could also be somewhere in the ScrollableMixin or something like that.

This is the example I used:

class App extends React.Component<{}> {
  constructor() {
    super();
    this.state = {refreshing: true, items: []};
  }

  componentDidMount() {
    this.refresh();
  }

  refresh = () => {
    this.setState({
      refreshing: true,
      items: [],
    });

    setTimeout(
      () =>
        this.setState({
          refreshing: false,
          items: [0, 1, 2, 3, 4, 5],
        }),
      1500,
    );
  };

  renderItem = ({item}) => {
    return (
      <TouchableOpacity onPress={() => alert('pressed!')} key={`${item}`}>
        <Text style={{width: '100%', height: 48, backgroundColor: 'white'}}>
          {item}
        </Text>
        <View style={{width: '100%', height: 1, backgroundColor: 'gray'}} />
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={{flex: 1, padding: 48}}>
        <ScrollView
          style={{
            flex: 1,
            backgroundColor: '#aaa',
            borderColor: 'gray',
            borderWidth: 1,
          }}
          keyExtractor={item => `${item}`}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.refresh}
            />
          }>
          {this.state.items.map(item => this.renderItem({item}))}
        </ScrollView>
      </View>
    );
  }
}

apsears · 2018-09-04T23:44:23Z

Are there any workarounds for this? Invoke a fake scroll or touch event? Any more hints for how to go about fixing?

AlainGauthier · 2018-09-18T14:22:48Z

setState does not re-render nor update FlatList on iOS event with the extraData workaround any solution?

rayhk6 · 2018-09-20T05:55:23Z

I used a setTimeout to solve the issue
<RefreshControl refreshing={this.state.refresh} onRefresh={() => setTimeout(() => { this.refeshAction() }, 200) } title="Test />

jemoav · 2018-10-04T09:32:33Z

Thanks @rayhk6, this works fine for me !

binlaniua · 2018-10-06T08:59:34Z

Thanks @rayhk6, this works fine for me !

it's not perfect, it's will show after 200ms, not immediately

binlaniua · 2018-10-06T12:45:02Z

add "title" in RefreshControl, can be work in v0.56

Clearives · 2018-10-31T03:57:08Z

1、 Enter the page
2、Click refresh is OK
3、Pull down to refresh is OK
4、Click refresh is invalid
As long as the drop-down refresh and click refresh will not work,But the pulldown refresh has been normal

kientux · 2018-11-04T13:00:24Z

I recognized that not only FlatList item, but every single Touchable on the screen won't call onPress after FlatList refreshed.

Clearives · 2018-11-05T02:10:02Z

I recognized that not only FlatList item, but every single Touchable on the screen won't call onPress after FlatList refreshed.

onPress is normal,code is normal ,but refresh is not work

_refresh = () => {
        this.setState({
            refreshing: true,
        },() => {console.log(this.state.refreshing)});
        setTimeout(() => {
            this.getAssetDebtList(1)
        }, 1500)
    }
// log： true

pietro3092 · 2018-11-17T23:49:01Z

Same issue. Every touchable item on screen is not clickable after refresh

dgruseck · 2018-12-06T18:22:32Z

Same issue. Every touchable item on screen is not clickable after refresh

for me too, tested on 0.57.7

TheSavior · 2018-12-06T18:40:19Z

Thanks everyone! While we agree that this repros, it would be great if someone wanted to investigate into the root cause. "Me too"s don't really help us solve this. 😕

JongLim107 · 2019-01-01T09:16:44Z

Same issue here!! I stuck here for two days already!

react-native: 0.55.4
platform: only iOS.

1: try to add title for RefreshControl still cannot work. @binlaniua

Here is My Code:

`
'use strict';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Platform, FlatList, FlatListProps, RefreshControl, ScrollView, View } from 'react-native';
import * as Colors from '../../constants/Colors';
import * as Dimens from '../../constants/Dimension';

export interface CommonFlatListProps extends FlatListProps {
    loadMoreMode: 'always' | 'never'
}

export default class CommonFlatList extends Component<CommonFlatListProps>{

    static propTypes = {
        renderItem: PropTypes.func.isRequired
        // Refer to the FlatList for the rest props
    }

    static defaultProps = {
        refreshing: false,
        keyExtractor: (item, index) => ('1000' + index),
        onEndReachedThreshold: 0.01, // don't change
        removeClippedSubviews: true,
        ItemSeparatorComponent: () => <View style={{ height: Dimens.line, backgroundColor: Colors.line }} />
    }

    constructor(props) {
        super(props);
        this.initLoadMore = false
        this.shouldLoadMore = false
    }
    
    scrollToEnd = () => {
        //params?: { animated?: boolean }
        this.list.scrollToEnd();
    }

    scrollToIndex = (params) => {
        //params: { animated?: boolean; index: number; viewOffset?: number; viewPosition?: number }
        this.list.scrollToIndex(params)
    }

    scrollToItem = (params) => {
        //params: { animated?: boolean; item: ItemT; viewPosition?: number }
        this.list.scrollToItem(params)
    }

    onScrollBeginDrag = ({ nativeEvent }) => {
        const { contentOffset: co, contentSize: cs, layoutMeasurement: ls } = nativeEvent
        if (co.y > 0 && (parseInt(co.y + ls.height) >= parseInt(cs.height))) {
            this.shouldLoadMore = true
        }
        this.props.onScrollBeginDrag && this.props.onScrollBeginDrag()
    }

    onScrollEndDrag = ({ nativeEvent }) => {
        const { loadMoreMode, onScrollEndDrag } = this.props
        const { contentOffset: co, contentSize: cs, layoutMeasurement: ls, velocity } = nativeEvent
        if (loadMoreMode == 'always') {
            if (this.shouldLoadMore && Platform.OS === 'android') {
                if (velocity.y < -1.2) {
                    this._onEndReached({}, true)
                }
            } else if (this.shouldLoadMore && parseInt(co.y + ls.height) > parseInt(cs.height + 30)) {
                this._onEndReached({}, true)
            }
        }
        this.shouldLoadMore = false
        onScrollEndDrag && onScrollEndDrag()
    }

    _onEndReached = (info, load) => {
        const { loadMoreMode, onEndReached } = this.props
        if (loadMoreMode == 'always' && load === true) {
            onEndReached && onEndReached(info, true, Platform.OS === 'android')
        } else if (Platform.OS === 'android' && !this.initLoadMore &&
            loadMoreMode == 'always' && info.distanceFromEnd < -1) {

            this.initLoadMore = true
            onEndReached && onEndReached(info, true, true)
        } else {
            onEndReached && onEndReached(info, false)
        }
    }

    _renderScrollComponent = (props) => {
        const { onRefresh, progressViewOffset } = props;
        if (onRefresh) {
            return <ScrollView
                {...props}
                refreshControl={
                    <RefreshControl
                        title='pull down to refresh'
                        colors={[Colors.baseColor]}
                        tintColor={Colors.baseColor}
                        refreshing={this.props.refreshing}
                        progressViewOffset={progressViewOffset}
                        onRefresh={onRefresh}
                    />
                }
            />
        } else {
            return <ScrollView {...props} />
        }
    }

    render() {
        return <FlatList
            {...this.props}
            ref={c => this.list = c}
            style={[{ backgroundColor: Colors.background }, this.props.style]}
            renderScrollComponent={this._renderScrollComponent}
            keyboardDismissMode='on-drag'
            onScrollBeginDrag={this.onScrollBeginDrag}
            onScrollEndDrag={this.onScrollEndDrag}
            onEndReached={this._onEndReached}
        />
    }
}

`

jarnove · 2019-07-08T11:33:33Z

Same issue. Also setTimeout doesn't work for me because of the breaking animation. Somebody has a better solution?

ravirajn22 · 2019-10-10T05:54:07Z

The following are the details I found by debugging, may be some one more familiar with reactnative event plugin could take it further.

This reproes with ScrollView, not just FlatList.

It requires clearing the items and then rendering them. Just triggering a state update with the same items isn't enough.
It requires a refresh control and triggering onRefresh that way. If you do a setInterval in the componentDidMount which calls refresh(), that doesn't repro.

Someone will need to dig into the ScrollView implementation and see if something funky is happening with the refresh control. It could also be somewhere in the ScrollableMixin or something like that.

This is the example I used:

class App extends React.Component<{}> {
  constructor() {
    super();
    this.state = {refreshing: true, items: []};
  }

  componentDidMount() {
    this.refresh();
  }

  refresh = () => {
    this.setState({
      refreshing: true,
      items: [],
    });

    setTimeout(
      () =>
        this.setState({
          refreshing: false,
          items: [0, 1, 2, 3, 4, 5],
        }),
      1500,
    );
  };

  renderItem = ({item}) => {
    return (
      <TouchableOpacity onPress={() => alert('pressed!')} key={`${item}`}>
        <Text style={{width: '100%', height: 48, backgroundColor: 'white'}}>
          {item}
        </Text>
        <View style={{width: '100%', height: 1, backgroundColor: 'gray'}} />
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={{flex: 1, padding: 48}}>
        <ScrollView
          style={{
            flex: 1,
            backgroundColor: '#aaa',
            borderColor: 'gray',
            borderWidth: 1,
          }}
          keyExtractor={item => `${item}`}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.refresh}
            />
          }>
          {this.state.items.map(item => this.renderItem({item}))}
        </ScrollView>
      </View>
    );
  }
}

The issue happens because responderInst is still kept hold by the ScrollView after all the events are fired whereas in case where items: [] is commented in the setState, the responderInst is correctly set to null.

responderInst is a react component which will get all the touch events, how it works and set can be found in setResponderAndExtractTransfer in ReactNativeRenderer-dev.js.

targetInst is the react component on which the original touch happened.

Nesting of components is like this
View -> ScrollView -> (View -> Text ) * multiplied by number of list items

There are lots of events fired in following order

topTouchStart (targetInst = RCTText of the list item)
topTouchMove (Many) (targetInst = RCTText of the list item)
topScrollBeginDrag (targetInst = ScrollView)
topScroll (targetInst = ScrollView)
topTouchMove (Many) (targetInst = RCTText of the list item)
topRefresh (targetInst = RCTRefreshController)
topTouchMove (Many) (targetInst = RCTText of the list item)
topTouchEnd (here is where the problem happens, targetInst = null since the list item are cleared)
topScrollEndDrag (targetInst = ScrollView)
topMomentumScrollBegin (targetInst = ScrollView)
topScroll (targetInst = ScrollView)
topMomentumScrollEnd (targetInst = ScrollView)
topScroll (targetInst = ScrollView)
topMomentumScrollEnd (targetInst = ScrollView)

The partial flow is when we pull to refresh, topTouchStart event is fired which calls ScrollView's scrollResponderHandleTouchStart which sets isTouching to true.

  /**
   * Invoke this from an `onTouchStart` event.
   *
   * Since we know that the `SimpleEventPlugin` occurs later in the plugin
   * order, after `ResponderEventPlugin`, we can detect that we were *not*
   * permitted to be the responder (presumably because a contained view became
   * responder). The `onResponderReject` won't fire in that case - it only
   * fires when a *current* responder rejects our request.
   *
   * @param {PressEvent} e Touch Start event.
   */
  scrollResponderHandleTouchStart: function(e: PressEvent) {
    this.state.isTouching = true;
    this.props.onTouchStart && this.props.onTouchStart(e);
  },

isTouching determines if the ScrollView wants to become responderInst when topScroll event is fired

  /**
   * Invoke this from an `onScroll` event.
   */
  scrollResponderHandleScrollShouldSetResponder: function(): boolean {
    // Allow any event touch pass through if the default pan responder is disabled
    if (this.props.disableScrollViewPanResponder === true) {
      return false;
    }
    return this.state.isTouching;
  },

isTouching is set to false inside scrollResponderHandleTouchEnd when onTouchEnd event is fired . In our case this function is never called. Because ReactNativeBridgeEventPlugin's extractEvents which determines which listeners (on the component) to call depends on targetInst. Since we set items=[] in setState the targetInst becomes null and none of our listeners in ScrollVIew (ScrollView is the parent of items, since items is null we cannot know its parents now) are called after the items are cleared. Hence when onTouchEnd is fired scrollResponderHandleTouchEnd of ScrollView is not called.

  /**
   * Invoke this from an `onTouchEnd` event.
   *
   * @param {PressEvent} e Event.
   */
  scrollResponderHandleTouchEnd: function(e: PressEvent) {
    const nativeEvent = e.nativeEvent;
    this.state.isTouching = nativeEvent.touches.length !== 0;
    this.props.onTouchEnd && this.props.onTouchEnd(e);
  },

Hope someone familiar with ScrollView responder system and react event system can take it further.

EDIT 1: In ScrollView setting disableScrollViewPanResponder=true will prevent this bug from happening, since it will prevent the ScrollView to become responder. But don't use this, since I don't know what regression it creates. Only purpose I added is for documenting.

EDIT 2: Tagging people who might know about this, @shergin

tabfed · 2019-11-16T14:20:39Z

me too ，0.61.4

deniskutovskiy · 2019-12-14T18:31:27Z

@ravirajn22 , thanks! Passing disableScrollViewPanResponder prop to my FlatList fixed the bug.

TakaKeiji · 2019-12-20T21:44:23Z

@ravirajn22 , thanks! Passing disableScrollViewPanResponder prop to my FlatList fixed the bug.

This worked for me properly on a SectionList

Thanks a lot!

Satur-nity · 2020-03-02T07:42:50Z

<ScrollView disableScrollViewPanResponder={true} refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this.onRefresh.bind(this)} /> } >

This worked for me

Thanks

tranconghieu · 2020-03-13T03:26:06Z

disableScrollViewPanResponder = {true} fix the bug

jurelik · 2020-03-25T21:51:09Z

Does anybody know what the consequences of using disableScrollViewPanResponer are? It all looks fine on first glance but I'm worried about any side effects down the line (performance, bugs, etc.)

On another note - I figured out that this bug doesn't occur when you swipe down and release quickly. It only happens if you swipe down and still hold your finger down after the list has refreshed. Hopefully this helps.

shapovalstas · 2020-04-18T15:41:55Z

same bug here with the simple FlatList
"react-native": "0.62.2"

Dinkelborg · 2020-04-21T08:06:03Z

I've been stuck with a similar issue I don't know if its related or not. I'm developing for android only using a ScrollView and on a real device I can click buttons, they respond to being touched with the downstate etc but onPress doesn't trigger. disableScrollViewPanResponder = {true} did not help in this case

Aryk · 2020-07-25T21:51:19Z

Same issue just push this inside the flatList onRefresh={() => setTimeout(() => { this.refeshAction() }, 200) } is working for me !!

I needed to increase the timeout to 400, but it doesn't appear to be working so far...

roshanj80 · 2020-08-05T05:17:55Z

Still facing this issue on Android. Any solution for this? Even adding a setTimeout doesn't work for me

roshanj80 · 2020-08-05T05:42:57Z

Hi all, I found the bug and the actual problem was with updating the redux state (there is some kind of delay here). If you're updating the state on press, please comment that code and check if it works for you. In my case I was updating the state on press and opening an animated view... This is a weird issue. I should find a way now to pass the updated state before displaying the animated view

Summary: According to #20011, the first onPress will not work after pull to refresh. Dive into the code, found out that is because the state `isTouching` in `Libraries/Components/ScrollResponder.js` is not updated after the pull to refresh. Update the `isTouching` state in `scrollResponderHandleResponderRelease` to fix this. ## Changelog  [iOS] [Fixed] - First press not working after pull to refresh Pull Request resolved: #30291 Test Plan: ### Before - The first onPress fail ![ezgif-4-c6aa5383e898](https://user-images.githubusercontent.com/48589760/97789482-cd4c4100-1bfb-11eb-8a6b-649e8a966b99.gif) ### After - The first onPress success ![ezgif-4-195f9f6c302e](https://user-images.githubusercontent.com/48589760/97789488-da693000-1bfb-11eb-9a87-f005e61b8ad0.gif) Eli: I tested this myself internally using this code sample: ``` 'use strict'; import PlaygroundRoute from 'PlaygroundRoute'; import type {SurfaceProps} from 'Surface'; import TetraText from 'TetraText'; import TetraView from 'TetraView'; import {TouchableOpacity, Text, View, ScrollView, RefreshControl, StyleSheet} from 'react-native'; import * as React from 'react'; type Props = SurfaceProps<PlaygroundRoute>; class App extends React.Component<{}> { constructor() { super(); this.state = {refreshing: true, items: []}; } componentDidMount() { this.refresh(); } refresh = () => { this.setState({ refreshing: true, items: [], }); setTimeout( () => this.setState({ refreshing: false, items: [0, 1, 2, 3, 4, 5], }), 1500, ); }; renderItem = ({item}) => { return ( <TouchableOpacity onPress={() => alert('pressed!')} key={`${item}`}> <Text style={{width: '100%', height: 48, backgroundColor: 'white'}}> {item} </Text> <View style={{width: '100%', height: 1, backgroundColor: 'gray'}} /> </TouchableOpacity> ); }; render() { return ( <View style={{flex: 1, padding: 48}}> <ScrollView style={{ flex: 1, backgroundColor: '#aaa', borderColor: 'gray', borderWidth: 1, }} keyExtractor={item => `${item}`} refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this.refresh} /> }> {this.state.items.map(item => this.renderItem({item}))} </ScrollView> </View> ); } } export default function Playground(props: Props): React.Node { return ( <App /> ); } const styles = StyleSheet.create({ container: { padding: 10, paddingTop: 30, }, }); ``` {F351458967} Reviewed By: appden Differential Revision: D25574927 Pulled By: TheSavior fbshipit-source-id: 7abf8a2f947d94150419e51d46a19e792441c981

TheSavior · 2020-12-16T18:36:21Z

The fix for this has been landed in #30291

As 0.64 has already been cut and is close to release I don't expect this to be included there. I expect this to be part of 0.65.

myckhel · 2020-12-17T19:38:15Z

Infact you are the real Savior! After 2 years 😁

TheSavior · 2020-12-17T21:01:45Z

It wasn't me at all, it was all @yum650350. This was their first contribution to React Native!

QiYuNew · 2021-02-17T17:34:26Z

@ravirajn22 Thank you!
rn 0.63.4

vimalswaroopj · 2021-08-13T19:25:18Z

if onPress is not workingin the flatlist's renderItem method try using onTouchStart method of the components if they have in the flatList's renderItem method.

Rahulnagarwal · 2022-01-10T12:50:49Z

try import { TouchableOpacity } from 'react-native-gesture-handler';
It's working properly

souzaluiz · 2022-02-02T02:36:55Z

@Rahulnagarwal perfect!
import { TouchableOpacity } from 'react-native-gesture-handler';
it worked here for me

dittmarconsulting · 2022-02-24T03:36:28Z

I don't understand why this hasn't been fixed yet. It only happens on Android

I'm really struggling with that. I don't use Refreshcontrol but rather remove an item from the array.

Here my setup

"react": "^17.0.2",
"react-native": "^0.66.3",

Here the process

Load data (array) from API into a hook
Display the hook data in FlatList (data={data})
The renderItem is wrapped in a TouchableOpacity
By pressing on the renderItem an ID gets stored in the hook
After invoking the delete function the original data gets filtered (new array) and stored in the hook data
The FlatList re-renders and removes the item
After that I can't press the item anymore (onPress doesn't get invoked)

I tried import { TouchableOpacity } from 'react-native-gesture-handler' as @souzaluiz suggested but it has no effect.

Please help !!!!

Stevemoretz · 2022-03-23T07:41:09Z

I used a setTimeout to solve the issue <RefreshControl refreshing={this.state.refresh} onRefresh={() => setTimeout(() => { this.refeshAction() }, 200) } title="Test />

Not working when using a custom refreshControl

MarquisAlexander · 2022-08-23T19:14:35Z

@Rahulnagarwal perfect! import { TouchableOpacity } from 'react-native-gesture-handler'; it worked here for me

it worked here s2

vladimirevstratov · 2022-09-02T06:59:15Z

@Rahulnagarwal perfect! import { TouchableOpacity } from 'react-native-gesture-handler'; it worked here for me

Thank you, it works on RN 0.64

oleandrosiq · 2022-09-16T12:11:30Z

Hey guys, I managed to solve my problem by following this question https://stackoverflow.com/questions/68502633/react-native-why-is-my-flatlist-not-displaying

Props that I added to my flatList to work.

maxToRenderPerBatch={1000} windowSize={60} updateCellsBatchingPeriod={50} initialNumToRender={50}

Hope this helps you too <3

oleandrosiq · 2022-09-16T12:15:41Z

Hey guys, I managed to solve my problem by following this question https://stackoverflow.com/questions/68502633/react-native-why-is-my-flatlist-not-displaying

Props that I added to my flatList to work.

maxToRenderPerBatch={1000}
windowSize={60}
updateCellsBatchingPeriod={50}
initialNumToRender={50}

Hope this helps you too <3

react-native-bot added the 🔶Lists label Jul 3, 2018

react-native-bot added the ⏪Old Version label Jul 4, 2018

react-native-bot removed the ⏪Old Version label Jul 7, 2018

hramos added 🔶Components and removed 🔶Components labels Sep 21, 2018

jemoav mentioned this issue Oct 4, 2018

FlatList refresh bug #14761

Closed

Clearives added a commit to Clearives/ccM that referenced this issue Nov 5, 2018

代码有执行，但是刷新效果出不来，facebook/react-native#20011

3bdca95

hramos added Component: FlatList and removed 🔶Components labels Jan 24, 2019

rnike mentioned this issue Oct 31, 2020

[iOS] fix: First press not working after pull to refresh #30291

Closed

TheSavior closed this as completed Dec 16, 2020

QiYuNew mentioned this issue Feb 17, 2021

Need to touch twice to fire onPress after adding RefreshControl jemise111/react-native-swipe-list-view#543

Closed

FlatList item onPress not work the first time after refreshed #20011

FlatList item onPress not work the first time after refreshed #20011

Comments

kientux commented Jul 3, 2018 • edited Loading

Environment

Description

Reproducible Demo

TheSavior commented Jul 4, 2018

kientux commented Jul 4, 2018

kientux commented Jul 4, 2018

TheSavior commented Jul 6, 2018

kientux commented Jul 7, 2018 • edited Loading

vkhasanshin commented Jul 19, 2018

TheSavior commented Jul 19, 2018

apsears commented Sep 4, 2018

AlainGauthier commented Sep 18, 2018

rayhk6 commented Sep 20, 2018 • edited Loading

jemoav commented Oct 4, 2018

binlaniua commented Oct 6, 2018

binlaniua commented Oct 6, 2018

Clearives commented Oct 31, 2018 • edited Loading

kientux commented Nov 4, 2018

Clearives commented Nov 5, 2018

pietro3092 commented Nov 17, 2018

dgruseck commented Dec 6, 2018 • edited Loading

TheSavior commented Dec 6, 2018

JongLim107 commented Jan 1, 2019 • edited Loading

jarnove commented Jul 8, 2019

ravirajn22 commented Oct 10, 2019 • edited Loading

tabfed commented Nov 16, 2019

deniskutovskiy commented Dec 14, 2019

TakaKeiji commented Dec 20, 2019

Satur-nity commented Mar 2, 2020

tranconghieu commented Mar 13, 2020

jurelik commented Mar 25, 2020

shapovalstas commented Apr 18, 2020 • edited Loading

Dinkelborg commented Apr 21, 2020 • edited Loading

Aryk commented Jul 25, 2020

roshanj80 commented Aug 5, 2020 • edited Loading

roshanj80 commented Aug 5, 2020

TheSavior commented Dec 16, 2020

myckhel commented Dec 17, 2020

TheSavior commented Dec 17, 2020

QiYuNew commented Feb 17, 2021

vimalswaroopj commented Aug 13, 2021

Rahulnagarwal commented Jan 10, 2022 • edited Loading

souzaluiz commented Feb 2, 2022

dittmarconsulting commented Feb 24, 2022

Stevemoretz commented Mar 23, 2022

MarquisAlexander commented Aug 23, 2022 • edited Loading

vladimirevstratov commented Sep 2, 2022

oleandrosiq commented Sep 16, 2022

oleandrosiq commented Sep 16, 2022

kientux commented Jul 3, 2018 •

edited

Loading

kientux commented Jul 7, 2018 •

edited

Loading

rayhk6 commented Sep 20, 2018 •

edited

Loading

Clearives commented Oct 31, 2018 •

edited

Loading

dgruseck commented Dec 6, 2018 •

edited

Loading

JongLim107 commented Jan 1, 2019 •

edited

Loading

ravirajn22 commented Oct 10, 2019 •

edited

Loading

shapovalstas commented Apr 18, 2020 •

edited

Loading

Dinkelborg commented Apr 21, 2020 •

edited

Loading

roshanj80 commented Aug 5, 2020 •

edited

Loading

Rahulnagarwal commented Jan 10, 2022 •

edited

Loading

MarquisAlexander commented Aug 23, 2022 •

edited

Loading