CODEWITHSUNDEEP
react-nativereactjshorizontallisttouchableopacity
Ali Zeynalov
Ali Zeynalov

Reputation: 3027

how react-native renders the TouchableOpacity components on the same row - horizontally

I have a product component - TouchableOpacity as shown in picture. Number of products is dynamic.Thing is that, I want to post 2 products on each row. But I can't. It renders them vertically, although I set horizontal as true. How can I solve, it? Do you have any suggestion?

enter image description here

Here is my styling of the component

enter image description here

And it is how they are rendered enter image description here

Upvotes: 1

Views: 3457

Answers (1)

Kevin Amiranoff
Kevin Amiranoff

Reputation: 14553

The default value for flexDirection in react-native is column. You should set it to row in the style of the container of your list of TouchableOpacity.

Here is an example from the official documentation : https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

If you want your elements, that exceed the container size to be wrapped to the next line, you can set flexWrap:"wrap". Here is the doc: https://facebook.github.io/react-native/docs/layout-props.html#flexwrap

Upvotes: 1

Related Questions