Passing Array into FlatList React Native (Not Rendering)

Question

So I have this array, as shown below:

const categoryData=[
        {
            id: 1,
            name: "cat1",
            icon: icons.one
        },
        {
            id: 2,
            name: "cat2",
            icon: icons.two
        },
]

I'm trying to store it in a useState const called categories, and then display categories in the data parameter within a FlatList:

const [categories, setCategories] = React.useState(categoryData)

<FlatList
    data={categories}
    keyExtractor={item => `${item.id}`}
    renderItem={renderItem}
    numColumns={4}
    contentContainerStyle={{ padding: SIZES.padding }}
/>

However, nothing renders when within the FlatList (important to note, the FlatList loads when a Modal is triggered, and the FlatList does render the items properly when data={categoryData} instead of just categories).

Thanks for the assistance.

EDIT: Here is an Expo link to depict the issue (https://snack.expo.dev/HsffYfsrc)

I don't see any issue with the code you've shared. Perhaps the issue is caused by something else. Can you provide a minimal, complete, and reproducible code example so we can see what all the code is doing? If possible could you try creating a running Expo Snack demo that reproduces this issue that we could inspect and debug live? — Drew Reese
– Drew Reese, Commented Apr 15, 2022 at 23:42
Alright, I've linked the Expo example for you, its a very rough imitation of what I actually have, just reduced the amount of View components and etc, but it still produces the same result. — guyman
– guyman, Commented Apr 17, 2022 at 19:09

Drew Reese · Accepted Answer · 2022-04-18 20:12:54Z

In your code example you've used/referenced categoryData prior to it having been declared.

const App = () => {
  const [categories, setCategories] = React.useState(categoryData); // <-- used, undefined
  const [modalVisible, setModalVisible] = React.useState(false);

  const categoryData = [ // <-- declared here
    {
      id: 1,
      name: 'cat1',
      icon: 'test'
    },
    {
      id: 2,
      name: 'cat2',
      icon: 'test'
    },
  ];

  function renderList() {
    ...
  }

  return <SafeAreaView>{renderList()}</SafeAreaView>;
}

I don't see any internal dependencies (to the component) to require that categoryData be declared within the component. I suggest declaring it outside the component so it's declared prior to the component and in scope.

const categoryData = [ // <-- declared
  {
    id: 1,
    name: 'cat1',
    icon: 'test',
  },
  {
    id: 2,
    name: 'cat2',
    icon: 'test',
  },
];

const App = () => {
  const [categories, setCategories] = React.useState(categoryData); // <-- defined
  const [modalVisible, setModalVisible] = React.useState(false);

  function renderList() {
    ...
  }

  return <SafeAreaView>{renderList()}</SafeAreaView>;
};

Expo Snack

If categoryData is not known at compile time and is actually fetched later then provide valid initial state and load/update the category state in an useEffect hook.

Example:

const App = () => {
  const [categories, setCategories] = React.useState([]); // <-- valid initial state
  const [modalVisible, setModalVisible] = React.useState(false);

  useEffect(() => {
    ... fetch/loading logic
    setModalVisible(data); // <-- update state with fetched/loaded data
  }, []);

  function renderList() {
    ...
  }

  return <SafeAreaView>{renderList()}</SafeAreaView>;
};

qretsar · Accepted Answer · 2022-04-16 00:13:39Z

0

If you say it works when Modal is triggered, then the issue might be that your data is not ready on load. I suggest you try:

{categories && <FlatList
data={categories}
keyExtractor={item => `${item.id}`}
renderItem={renderItem}
numColumns={4}
contentContainerStyle={{ padding: SIZES.padding }}/>}

answered Apr 16, 2022 at 0:13

qretsar

135 bronze badges

2 Comments

guyman Over a year ago

Didn't seem to load the categories still, I've added an Expo link which is a rough example of what is occurring if you'd like to take a look.

qretsar Over a year ago

I found the issue and I fixed it. The issue was that you called useState with array categoryData but you declared categoryData later. The second issue was that your FlatList was inside modal and it appears only when you press to open Modal...

Collectives™ on Stack Overflow

Passing Array into FlatList React Native (Not Rendering)

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related