nested Flatlist not scrolling horizontally

Question

nesting list view is not scrolling horizontally in React-native

Parent list is working fine but child is not scrolling. working fine for vertical scroll

dependencies: "react": "18.1.0" "react-native": "0.70.6", "react-native-gesture-handler": "^2.9.0",

expo snack - https://snack.expo.dev/@mukeshbuwade/nestedflatlist

Answer 1

use flexDirection:'row' in outerItemContainer CSS,

import React, { useState } from 'react';
import { View, Text,  StyleSheet, Animated ,} from 'react-native';
import {FlatList} from "react-native-gesture-handler"

const NestedFlatList = () => {
  const [outerData, setOuterData] = useState([
    { id: '1', items: [{ name: 'Item 1-1' }, { name: 'Item 1-2' }, { name: 'Item 1-3' }] },
    { id: '2', items: [{ name: 'Item 2-1' }, { name: 'Item 2-2' }, { name: 'Item 2-3' }] },
    { id: '3', items: [{ name: 'Item 3-1' }, { name: 'Item 3-2' }, { name: 'Item 3-3' }] },
  ]);

  const renderOuterItem = ({ item }) => (
    <View style={styles.outerItemContainer}>
      <Text style={styles.outerItemText}>{item.id}</Text>
      <FlatList
        data={item.items}
        horizontal
        renderItem={renderInnerItem}
        keyExtractor={(innerItem) => innerItem.name}
        contentContainerStyle={styles.innerList}
      />
    </View>
  );

  const renderInnerItem = ({ item }) => (
    <View style={styles.innerItemContainer}>
      <Text style={styles.innerItemText}>{item.name}</Text>
    </View>
  );

  return (
    <Animated.FlatList
      data={outerData}
      horizontal
      renderItem={renderOuterItem}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.outerList}
    />
  );
};

const styles = StyleSheet.create({
  outerList: {
    alignItems: 'center',
    paddingHorizontal: 10,
  },
  outerItemContainer: {
    paddingVertical: 10,
    alignItems: 'center',
    backgroundColor: '#ddd',
    flexDirection:'row',
    borderRadius: 5,
    marginHorizontal: 10,
    width: 150,
  },
  outerItemText: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  innerList: {
    paddingTop: 10,
    alignItems: 'center',
  },
  innerItemContainer: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 5,
    marginHorizontal: 10,
    width: 100,
  },
  innerItemText: {
    fontSize: 14,
    textAlign: 'center',
  },
});

export default NestedFlatList;