react-native flatlist with dynamic rows and columns-CodePudding

I'm trying to build a simple layout using FlatList in react-native application like this: example-image. I need to create a dynamic layout depending on the item's index, so if index ===0 1st image should be wide and the column below should be 2 smaller images in a row, this is my code.

With this logic I can display 1st image as wide but the rest images are not displayed correctly, I get something like this current layout The smaller image below the wide image has an empty space next to it, if I change index === 5 same things happens, the column below the wide image has a spot where the other smaller image should be. I can't figure out why is this happening and how to fix it, I've read other posts here too. Any advise and help is greatly appreciated.

<FlatList
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{
         alignSelf: 'center',
         alignItems: 'center',
         }}
         columnWrapperStyle={{flexWrap: 'wrap'}}
         data={layoutData}
         renderItem={({item, index}) =>
                    index === 0 ? (
                    <TouchableOpacity
                    style={styles.container}
                    <Image
                    style={styles.wideImg}
                    />
                    </TouchableOpacity>
              )  : (

                    <TouchableOpacity
                    style={styles.container}
                    <Image
                    style={styles.img}
                    />
                </TouchableOpacity>
              )
            }
            numColumns={2}
          />

CodePudding user response：

It is because of you set numColumns={2}, this makes FlatList renders every two items into a row. First large item and second item are in the same row, third item and forth item are in the new row. So there will be a spot beside the second item. You can set numColumns to the length of layoutData instead of 2.

    <FlatList
     showsVerticalScrollIndicator={false}
     contentContainerStyle={{
     alignSelf: 'center',
     alignItems: 'center',
     }}
     columnWrapperStyle={{flexWrap: 'wrap'}}
     data={layoutData}
     renderItem={({item, index}) =>
                index === 0 ? (
                <TouchableOpacity
                style={[styles.container, { width: '100%', height: 50, borderColor: 'white', borderWidth: 1 }]}
                >
                {/* <Image
                style={styles.wideImg}
                /> */}
                </TouchableOpacity>
          )  : (

                <TouchableOpacity
                style={[styles.container, { width: '50%', height: 50, borderColor: 'white', borderWidth: 1 }]}
                >
                {/* <Image
                style={styles.img}
                /> */}
            </TouchableOpacity>
          )
        }
        numColumns={layoutData.length}
      />