Objects are not valid as a React child (found: object with keys {item}). If you meant to render a collection of children, use an array instead.

[hamzasaleem2397]

I coppied the code from example facing this issue

[Ruturaj2728]

@hamzasaleem2397 , it will be good If you can provide more details or steps you are following.

[hamzasaleem2397]

@Ruturaj2728, <StaggeredList data={imageURL} animationType={selectedAnimType} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false} renderItem={({item}) => renderChildren(item)} isLoading={isLoading} LoadingView={

        }
      />

ImageURL contains an array with multiple objects which is coming from an API when using StaggeredList it is giving me this error and the same array is working fine on FlatList imported from react-native hopefully this detail is enough for you

[ayyam]

Have you found solution regarding this Issue?,

I was having this same issue, then when i try solve it, i got below error and i am struck in here,

ERROR TypeError: undefined is not a function

See my code for the screen and StaggeredList below,

import React, {useState, useEffect} from 'react';
import {
  View,
  StyleSheet,
  StatusBar,
  SafeAreaView,
  Dimensions,
  Image,
  Text,
  ActivityIndicator,
} from 'react-native';
import StaggeredList from '@mindinventory/react-native-stagger-view';
import {useRoute} from '@react-navigation/native';

function CatScreen2() {
  // const route = useRoute();
  const SCREEN_WIDTH = Dimensions.get('window').width;

  // const selectedAnimType = route?.params?.animationType;
  //   console.log('selectedAnimType >>>', selectedAnimType);
  const [imageURL, setImageURL] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  // let AnimationType = 'FADE_IN_FAST';
  useEffect(() => {
    const fetchImages = () => {
      setIsLoading(true);
      fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1')
        .then(res => res.json())
        .then(resJson => {
          setImageURL([...resJson]);
          setIsLoading(false);
        })
        .catch(e => {
          console.log(e);
          setIsLoading(false);
        });
    };

    fetchImages();
  }, []);

  const getChildrenStyle = () => {
    return {
      width: (SCREEN_WIDTH - 18) / 2,
      height: Number(Math.random() * 20 + 12) * 10,
      backgroundColor: 'gray',
      margin: 4,
      borderRadius: 18,
    };
  };

  const renderChildren = item => {
    return (
      <View style={getChildrenStyle()} key={item.id}>
        <View style={styles.avatarImage}>
          <Image
            onError={() => {}}
            style={styles.img}
            source={{
              uri: item.url,
            }}
            resizeMode={'cover'}
          />
        </View>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.mainWrapperView}>
        {isLoading ? (
          <View style={styles.activityIndicatorWrapper}>
            <ActivityIndicator color={'black'} size={'large'} />
          </View>
        ) : (
          <View>
            <Text>hi</Text>
            <Text>sfsdfsf</Text>
            <StaggeredList
              data={setImageURL}
              animationType={'FADE_IN_FAST'}
              contentContainerStyle={styles.contentContainer}
              showsVerticalScrollIndicator={false}
              renderItem={({item}) => renderChildren(item)}
              isLoading={isLoading}
              LoadingView={
                <View style={styles.activityIndicatorWrapper}>
                  <ActivityIndicator color={'black'} size={'large'} />
                </View>
              }
            />
          </View>
        )}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    backgroundColor: 'gray',
  },
  mainWrapperView: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 20,
  },
  activityIndicatorWrapper: {
    alignSelf: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  contentContainer: {
    paddingHorizontal: 0,
    alignSelf: 'stretch',
  },
  img: {
    width: '100%',
    height: '100%',
  },
  avatarImage: {
    height: '100%',
    width: '100%',
    overflow: 'hidden',
    borderRadius: 18,
  },
});

export default CatScreen2;

`

[hamzasaleem2397]

@ayyam hello ayaam instead of using staggeredList View i used masronyList this solved my issue try import MasonryList from '@react-native-seoul/masonry-list'; <MasonryList data={imageUrl} keyExtractor={(item) => item.id} numColumns={2} showsVerticalScrollIndicator={false} renderItem={({item}) => renderChildren(item)} // refreshing={isLoadingNext} // onRefresh={() => refetch({first: ITEM_CNT})} onEndReachedThreshold={0.1} // onEndReached={() => loadNext(ITEM_CNT)} /> i hope this will help

[chiragramimi]

@hamzasaleem2397, @ayyam, Thank you for addressing this issue.

We fixed the errors called out from the generic type issue. We figured out them and fixed them.

to avoid the above issue please use version 1.2.0. Thanks!!!

[dungpv]

I'm using version 1.2.0. Issue above is not fix :(

[Ruturaj2728]

@dungpv , Thanks so much for using our library Please provide more details in order to investigate the issue.

[dungpv]

@Ruturaj2728 I copied the source code from the example and encountered the above problem. I can use it with FlatList but StaggeredList is not

[chiragramimi]

Thank you @dungpv for addressing this issue. we have fixed it please check out version 1.2.1 and let me know still if you are facing the same problem.

[dungpv]

@chiragramimi above Issue it fixed. But screens is empty.

[chiragramimi]

@chiragramimi above Issue it fixed. But screens is empty. ![image](https://user-images.githubusercontent.com/6308572/203269068-eed37868-bc51-

You are not returning anything in the renderItem like.

renderItem={({ item }) => renderChildren(item)}

either

renderItem={({ item }) => { return renderChildren(item); }

[dungpv]

@chiragramimi I fixed it like you said but it didn't work. This is my code. import { View, Text, StyleSheet, StatusBar, Dimensions, Image, ActivityIndicator, SafeAreaView, FlatList, ScrollView, } from 'react-native'; import React, {useEffect, useState} from 'react'; import StaggeredList, { AnimationType, } from '@mindinventory/react-native-stagger-view';

export default function ListShoeMasonry() { const shoesArray = [ { id: 1, name: 'Adidas Prophere', alias: 'adidas-prophere', price: 350.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 995, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[2,3,5]', feature: true, image: 'http://svcy3.myclass.vn/images/adidas-prophere.png', }, { id: 2, name: 'Adidas Prophere Black White', alias: 'adidas-prophere-black-white', price: 450.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 990, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[1,4,6]', feature: false, image: 'http://svcy3.myclass.vn/images/adidas-prophere-black-white.png', }, { id: 3, name: 'Adidas Prophere Customize', alias: 'adidas-prophere-customize', price: 375.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 415, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[4,5,7]', feature: true, image: 'http://svcy3.myclass.vn/images/adidas-prophere-customize.png', }, { id: 4, name: 'Adidas Super Star Red', alias: 'adidas-super-star-red', price: 465.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 542, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[7,8,6]', feature: false, image: 'http://svcy3.myclass.vn/images/adidas-super-star-red.png', }, { id: 5, name: 'Adidas Swift Run', alias: 'adidas-swift-run', price: 550.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 674, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[2,3,8]', feature: true, image: 'http://svcy3.myclass.vn/images/adidas-swift-run.png', }, { id: 6, name: 'Adidas Tenisky Super Star', alias: 'adidas-tenisky-super-star', price: 250.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 456, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[4,2,3]', feature: false, image: 'http://svcy3.myclass.vn/images/adidas-tenisky-super-star.png', }, { id: 7, name: 'Adidas Ultraboost 4', alias: 'adidas-ultraboost-4', price: 450.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 854, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[8,2,1]', feature: true, image: 'http://svcy3.myclass.vn/images/adidas-ultraboost-4.png', }, { id: 8, name: 'Adidas Yeezy 350', alias: 'adidas-yeezy-350', price: 750.0, description: 'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n', size: '[36,37,38,39,40,41,42]', shortDescription: 'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n', quantity: 524, deleted: false, categories: '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]', relatedProducts: '[1,4,6]', feature: false, image: 'http://svcy3.myclass.vn/images/adidas-yeezy-350.png', }, ];

const [dataShoe, setDataShoe] = useState([]); const SCREEN_WIDTH = Dimensions.get('window').width;

const getChildrenStyle = () => { return { width: (SCREEN_WIDTH - 18) / 2, height: Number(Math.random() 20 + 12) 10, backgroundColor: 'gray', margin: 4, borderRadius: 18, }; };

const renderChildren = item => {

; }; return ( { return renderChildren(item); }} isLoading={true} LoadingView={ } /> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, backgroundColor: 'gray', }, mainWrapperView: { flex: 1, backgroundColor: 'white', paddingTop: 20, }, activityIndicatorWrapper: { alignSelf: 'center', justifyContent: 'center', flex: 1, }, contentContainer: { paddingHorizontal: 0, alignSelf: 'stretch', }, img: { width: '100%', height: '100%', }, avatarImage: { height: '100%', width: '100%', overflow: 'hidden', borderRadius: 18, }, });

[chiragramimi]

@dungpv Look like your code it's not proper as react-native syntex

=> return keyword is missing into renderChildren function.

import {
  View,
  StyleSheet,
  StatusBar,
  Dimensions,
  Image,
  ActivityIndicator,
} from 'react-native';
import React, { useState } from 'react';
import StaggeredList from '@mindinventory/react-native-stagger-view';

export default function ListShoeMasonry() {
  const shoesArray = [
    {
      id: 1,
      name: 'Adidas Prophere',
      alias: 'adidas-prophere',
      price: 350.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 995,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[2,3,5]',
      feature: true,
      image: 'https://svcy3.myclass.vn/images/adidas-prophere.png',
    },
    {
      id: 2,
      name: 'Adidas Prophere Black White',
      alias: 'adidas-prophere-black-white',
      price: 450.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 990,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[1,4,6]',
      feature: false,
      image: 'http://svcy3.myclass.vn/images/adidas-prophere-black-white.png',
    },
    {
      id: 3,
      name: 'Adidas Prophere Customize',
      alias: 'adidas-prophere-customize',
      price: 375.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 415,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[4,5,7]',
      feature: true,
      image: 'http://svcy3.myclass.vn/images/adidas-prophere-customize.png',
    },
    {
      id: 4,
      name: 'Adidas Super Star Red',
      alias: 'adidas-super-star-red',
      price: 465.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 542,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[7,8,6]',
      feature: false,
      image: 'http://svcy3.myclass.vn/images/adidas-super-star-red.png',
    },
    {
      id: 5,
      name: 'Adidas Swift Run',
      alias: 'adidas-swift-run',
      price: 550.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 674,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[2,3,8]',
      feature: true,
      image: 'http://svcy3.myclass.vn/images/adidas-swift-run.png',
    },
    {
      id: 6,
      name: 'Adidas Tenisky Super Star',
      alias: 'adidas-tenisky-super-star',
      price: 250.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 456,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[4,2,3]',
      feature: false,
      image: 'http://svcy3.myclass.vn/images/adidas-tenisky-super-star.png',
    },
    {
      id: 7,
      name: 'Adidas Ultraboost 4',
      alias: 'adidas-ultraboost-4',
      price: 450.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 854,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[8,2,1]',
      feature: true,
      image: 'http://svcy3.myclass.vn/images/adidas-ultraboost-4.png',
    },
    {
      id: 8,
      name: 'Adidas Yeezy 350',
      alias: 'adidas-yeezy-350',
      price: 750.0,
      description:
        'The adidas Primeknit upper wraps the foot with a supportive fit that enhances movement.\r\n\r\n',
      size: '[36,37,38,39,40,41,42]',
      shortDescription:
        'The midsole contains 20% more Boost for an amplified Boost feeling.\r\n\r\n',
      quantity: 524,
      deleted: false,
      categories:
        '[{"id":"ADIDAS","category":"ADIDAS"},{"id":"MEN","category":"MEN"},{"id":"WOMEN","category":"WOMEN"}]',
      relatedProducts: '[1,4,6]',
      feature: false,
      image: 'http://svcy3.myclass.vn/images/adidas-yeezy-350.png',
    },
  ];

  const [dataShoe, setDataShoe] = useState([]);
  const SCREEN_WIDTH = Dimensions.get('window').width;

  const getChildrenStyle = () => {
    return {
      width: (SCREEN_WIDTH - 18) / 2,
      height: Number(Math.random() * 20 + 12) * 10,
      backgroundColor: 'gray',
      margin: 4,
      borderRadius: 18,
    };
  };

  const renderChildren = (item) => {
    return (
      <View style={getChildrenStyle()} key={item.img}>
        <View style={styles.avatarImage}>
          <Image
            onError={(err) => {}}
            style={styles.img}
            source={{
              uri: item.image,
            }}
            resizeMode={'cover'}
          />
        </View>
      </View>
    );
  };

  return (
    <StaggeredList
      data={shoesArray}
      animationType={'NONE'}
      contentContainerStyle={styles.contentContainer}
      showsVerticalScrollIndicator={false}
      renderItem={({ item }) => {
        return renderChildren(item);
      }}
      loading={false}
      LoadingView={<ActivityIndicator color={'black'} size={'large'} />}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    backgroundColor: 'gray',
  },
  mainWrapperView: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 20,
  },
  activityIndicatorWrapper: {
    alignSelf: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  contentContainer: {
    paddingHorizontal: 0,
    alignSelf: 'stretch',
  },
  avatarImage: {
    height: '100%',
    width: '100%',
    overflow: 'hidden',
    borderRadius: 18,
  },
  img: {
    width: '100%',
    height: '100%',
  },
});```

[dungpv]

@chiragramimi "return keyword is missing into renderChildren function." => I tried but no success

[chiragramimi]

@chiragramimi "return keyword is missing into renderChildren function." => I tried but no success

replace your code with this one. https://github.com/Mindinventory/react-native-stagger-view/issues/2#issuecomment-1323384011

[dungpv]

@chiragramimi I have replaced my code with yours but it doesn't work

[chiragramimi]

@chiragramimi I have replaced my code with yours but it doesn't work

Can you please provide the details of the error?

[dungpv]

@chiragramimi it not console error, screens empty

[iasreact1]

Same Error is coming no error on console but still the screen is empty but in case for flatlist it returning view ...i think its going some thing problematic please fix the issue @akashmi @Ruturaj2728