(React-Native) FlatList if one item take all width-CodePudding

I have a component that may have many items or only one item, and I want when I have one item to take the full width and when more than one item take a specific width number ?

Is that possible ? If yes How ?

CodePudding user response：

To render FlatList items you need to pass an array to it, check if the length of that array equals to one item only or has more items and add the width based on it like this example :

const [arrayOfItems,setArrayOfItems] = useState(['Lonely Item']);
const widthCondition = arrayOfItems.length === 1 ? '100%' : '20%'; 
<FlatList  
   data={arrayOfItems}  
   renderItem={({item}) =>  
       <View style={{width:widthCondition}}>
         <Text>{item}</Text>
       </View>
   }  
   ItemSeparatorComponent={this.renderSeparator}  
/>