CODEWITHSUNDEEP
responsive-designexporeact-native
kartik patel
kartik patel

Reputation: 23

Dynamically Create Component in react native

There is situation where, I have array with names(size may vary) and i want to create buttons for each name in array, such that every name should present in screen,

the condition is (numbers of character will be different in every name that is for sure) so, I want to present names Horizontally in screen, and when if size of button that created, exceeds the size of screen Horizontally, current Name in array and coming up Names should be created just below already created buttons and so on.. until last name and it will allow to create N rows and N columns.

Something like this

What I have done till now is, I have fixed the row(which is 2) and calculate the size of buttons(width+margin+padding) and compare it with the Width of the Screen of device.

and this is not ideal solution for any condition

Upvotes: 1

Views: 62

Answers (1)

Sagar Shakya
Sagar Shakya

Reputation: 654

You should wrap the buttons with a view and add the following style to it:

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
// Add the buttons here
</View>

Upvotes: 1

Related Questions