React Native: Refreshing gets stuck while scrolling in nesting FlatLists in Androdid

Question

While using a horizontal FlatList with other vertical FlatList as items there seems to be an issue with the refreshing. This happens when refreshing is enabled on the vertical lists but not on the horizontal container list. It is actually possible to refresh each individual list if you are very carful and only scrolls vertically (this is very hard). But at once you scrolls sideways the refreshing gets stuck.

• React Native nested FlatLists
• Issue in Android. Works in iOS

Attempts I have tried replacing the wrapping FlatList with a ScollView with the same result. I am fully aware of that it is possible to disable refreshing of the individual list and enable it on the containing FlatList but that is not very appropriate in my case.

I have also tried the upvoted answers on this similar question but it didn't solve it.

Example:

 <FlatList
            horizontal={true}
            pagingEnabled={true}
            data={[{key: 'a'}, {key: 'b'}]}
            renderItem={({item}) =>
                <FlatList
                    style={{width: 400}}
                    ref="scrollView"
                    horizontal={false}
                    refreshing={false}
                    onRefresh={() => {}}
                    data={[{key: 'c'}, {key: 'd'}]}
                    renderItem={({item}) =>  <Text>{item.key}</Text>}
                />
            }
        />

Does anyone have a solution to this?

Answer 1

ScrollView/ Flatlist import from react-native-gesture-handler can be stuck refresh when released outside of the screen. Use ScrollView import from react-native

Answer 2

i created a component based on what i understood from ur question, make second flat list width as u want and put the height as '100%' so it will com full screen, so that it behaves like paging 2 flat lists... Hope it works for u

Here is the code Snack URL

import React, {Component} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  FlatList,
  Dimensions,
} from 'react-native';

const { width } = Dimensions.get('window');
export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          horizontal
          pagingEnabled
          data={[{ key: 'a' }, { key: 'b' }]}
          renderItem={({ item }) => (
            <FlatList
              style={{ width, height: '100%' }}
              // ref="scrollView"
              horizontal={false}
              refreshing={false}
              onRefresh={() => {}}
              data={[{ key: 'c' }, { key: 'd' }, { key: 'f' }, { key: 'h' }]}
              renderItem={({ item }) => (
                <Text style={{ paddingVertical: 40 }}>{item.key}</Text>
              )}
            />
          )}
        />
      </View>
    );
  }
}