CODEWITHSUNDEEP
react-nativereact-native-flatlist
warCommander
warCommander

Reputation: 449

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

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 ?

Upvotes: 0

Views: 1099

Answers (1)

Hassan Kandil
Hassan Kandil

Reputation: 1866

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}  
/>

Upvotes: 2

Related Questions