[FIXED] Only running software in Android simulator, Scrollview nested flatlist, unable to scroll

Issue

I use srcollview to nest flatlist to render data. After the rendering is successful, however, when running on Android, the view cannot be scrolled, but running on IOS does not.

<View >
  <FlatList
    data={categoryState}
    renderItem={item => <ItemCombination data={item} click={loading} detail={detail} />}
    listKey={(item, index) => index.toString()}
    numColumns={3}
    ListFooterComponent={
      <View style={{ width: 794, backgroundColor: '#fff', alignItems: 'center', maxHeight: 300 }} >
        {
          show ?
            showLoading ?
              <ActivityIndicator color='#21b6a8' size='large' style={{ marginVertical: 20 }} />
              :
              {/* unable to scroll */}
            <ScrollView style={{ width: Platform.OS === 'web' ? 780 : 794, height: 300 }} showsVerticalScrollIndicator={true} contentContainerStyle={{ alignItems: 'center' }}>
              {/* unable to scroll */}
              <FlatList
                data={menuItems}
                renderItem={item => <Item data={item} click={menuItemClick} categoryId={categoryId} />}
                keyExtractor={(item, index) => item.id + index.toString()}
                numColumns={3}
                showsVerticalScrollIndicator={false}
              />
            </ScrollView>
          :
          <View></View>
        }
      </View>
    }
  />
</View>

Solution

you can use the built-in nestedscrollenabled prop for the children FlatList component.

<FlatList nestedScrollEnabled />

Nested scrolling is supported by default on iOS. so for android you need to add this.

Answered By - Mehran Khan
Answer Checked By - Timothy Miller (JavaFixing Admin)