Display footer before rendering list items

[crabbynguyen]

Hi, I have a small issue with footer of RecyclerListView. I have a product list with a loading spinner show as a footer. But when data is loaded, footer display then product items draw after. How can I make it disappear on first time load?

Here is my code:

<RecyclerListView style={{ flex: 1, paddingTop: 10 }} rowRenderer={rowRenderer} dataProvider={dataProvider} layoutProvider={layoutProvider} onEndReached={parent.onEndReached} onEndReachedThreshold={2800} showsVerticalScrollIndicator={false} renderFooter={renderFooter} externalScrollView={ExtendedScrollView} refreshControl={ <RefreshControl refreshing={parent.state.refreshing} onRefresh={parent.onRefresh} tintColor={loadingColor} /> } />

const renderFooter = () => { let showLoadMore = parent.state.loadMore; return ( <View style={{ alignItems: 'center', paddingBottom: 65 }}> <Image source={require('../../../icon/loading.gif')} style={{ width: 50, height: 50, display: showLoadMore ? undefined : 'none' }} /> </View> ); };

Here is how the issues look like: https://media.giphy.com/media/XljQNVHSqs9sxjK0Jm/giphy.gif

[mblenton]

I solved this issue using a state variable:

...
 const [endIsReached, SetEndIsReached] = useState(false);
  ...
  <RecyclerListView
       ...
        onEndReached={() => {
          SetEndIsReached(true);
        }}
        renderFooter={endIsReached ? renderFooter : null}
   />
...