Col
In React Native, setting flexDirection to 'column' arranges child elements
vertically within a container, stacking them top to bottom. This is useful for
creating vertical layouts and organizing items in a column.
Props
style
| Type: |
Style Object |
| Description: |
Allows additional custom styles to be applied to the View component.
|
<Col 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.
|
<Col flex={1} ... />
width
| Type: |
number |
| Description: |
Sets the horizontal dimension of a container or element. |
<Col width={250} ... />
height
| Type: |
number |
| Description: |
Sets the vertical dimension of a container or element. |
<Col height={100} ... />
justifyContent
| Type: |
string |
| Description: |
Aligns child elements along container's main axis, controlling spacing
in flexbox layouts.
|
<Col justifyContent="center" ... />
alignItems
| Type: |
string |
| Description: |
Aligns child elements along the cross axis of their container. |
<Col alignItems="center" ... />
marginHorizontal
| Type: |
number |
| Description: |
Sets margins on left and right sides of an element. |
<Col marginHorizontal={10} ... />
marginVertical
| Type: |
number |
| Description: |
Sets margins on top and bottom sides of an element. |
<Col marginVertical={10} ... />
paddingHorizontal
| Type: |
number |
| Description: |
Sets padding on left and right sides of an element. |
<Col paddingHorizontal={10} ... />
paddingVertical
| Type: |
number |
| Description: |
Sets padding on top and bottom sides of an element. |
<Col paddingVertical={10} ... />
radius
| Type: |
number |
| Description: |
Rounds the corners of an element's border with specified curvature.
|
<Col radius={10} ... />