React Native FlashList - numColumns varies depending on the content

Question

I have a list of documents and i want to display them like on the image below, using a Shopify Flash List in React Native. If a document type is a video, i want it to take the whole width of the screen, all the other documents should be displayed by two in a row. I tried to set numColumns property to 1 or 2, and modify getColumnFlex. But i can not achieve the layout i want.

Index.js :

<View 
style={{flexDirection: 'row',
    minHeight: 2,
    width: '100%',
}>
            <FlashList
              data={documentsList}
              keyExtractor={(item, index) => index.toString()}
              refreshControl={
                <RefreshControl refreshing={loadingDocuments} onRefresh={fetchAllDocuments} />
              }
              renderItem={({ item, index }) => (
                <DocumentsList
                  documentsList={documentsList}
                  document={item}
                  index={index}/>
              )}
              estimatedItemSize={200}
            />
</View>

DocumentList.js

 <TouchableOpacity
      key={document.id}
      style={{
        width: document.type === 'video' ? '100%' : ’50%’,
        height: document === 'video' ? 280 : 210,
      }}>
{/* Code of my component*/}
</TouchableOpacity>

Answer 1

Not sure possible with FlashList, but if there is a possibility to use FlatList, items wrapping can be controlled with flexWrap in columnWrapperStyle.

<FlatList
  columnWrapperStyle={{ flexWrap: 'wrap' }}
  numColumns={99}
  data={...}
  renderItem={({ item }) => (
    <View
      style={{
        width: item.type == 'video' ? '100%' : '50%',
        height: item.type == 'video' ? 280 : 210
      }}>
      <View style={{ backgroundColor: 'lightgrey', flex: 1, margin: 10 }} />
    </View>
  )}
/>