Dynamically Create Component in react native

Question

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

Sagar Shakya · Accepted Answer · 2020-12-25 15:01:38Z

1

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>

answered Dec 25, 2020 at 15:01

Sagar Shakya

6544 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically Create Component in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related