Row
In React Native, setting flexDirection to 'row' arranges child elements
horizontally within a container, aligning them side by side. This is useful
for creating horizontal layouts and aligning items in a row.
Props
style
| Type: |
Style Object |
| Description: |
Allows additional custom styles to be applied to the View component.
|
<Row style={{ backgroundColor: 'grey' }} ... />
flex
| Type: |
number |
| Description: |
Controls the flex-grow value of the button, determining how much it
should expand or contract relative to its container.
|
<Row flex={1} ... />
width
| Type: |
number |
| Description: |
Sets the horizontal dimension of a container or element. |
<Row width={250} ... />
height
| Type: |
number |
| Description: |
Sets the vertical dimension of a container or element. |
<Row height={100} ... />
gap
| Type: |
number |
| Description: |
Sets the spacing between rows of child elements in a flex container,
enhancing layout control.
|
<Row gap={1} ... />
justifyContent
| Type: |
string |
| Description: |
Aligns child elements along container's main axis, controlling spacing
in flexbox layouts.
|
<Row justifyContent="center" ... />
alignItems
| Type: |
string |
| Description: |
Aligns child elements along the cross axis of their container. |
<Row alignItems="center" ... />
marginHorizontal
| Type: |
number |
| Description: |
Sets margins on left and right sides of an element. |
<Row marginHorizontal={10} ... />
marginVertical
| Type: |
number |
| Description: |
Sets margins on top and bottom sides of an element. |
<Row marginVertical={10} ... />
paddingHorizontal
| Type: |
number |
| Description: |
Sets padding on left and right sides of an element. |
<Row paddingHorizontal={10} ... />
paddingVertical
| Type: |
number |
| Description: |
Sets padding on top and bottom sides of an element. |
<Row paddingVertical={10} ... />
radius
| Type: |
number |
| Description: |
Rounds the corners of an element's border with specified curvature.
|
<Row radius={10} ... />