Section
The React Native View component, when used as a section, acts as a container
for organizing and structuring UI elements within a distinct section of an app
screen. It facilitates layout management, styling, and nesting of other
components, allowing for cohesive presentation and organization of related
content.
Props
style
| Type: |
Style Object |
| Description: |
Allows additional custom styles to be applied to the View component.
|
<Section 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.
|
<Section flex={1} ... />
justifyContent
| Type: |
string |
| Description: |
Aligns child elements along container's main axis, controlling spacing
in flexbox layouts.
|
<Section justifyContent="center" ... />
alignItems
| Type: |
string |
| Description: |
Aligns child elements along the cross axis of their container. |
<Section alignItems="center" ... />
marginHorizontal
| Type: |
number |
| Description: |
Sets margins on left and right sides of an element. |
<Section marginHorizontal={10} ... />
marginVertical
| Type: |
number |
| Description: |
Sets margins on top and bottom sides of an element. |
<Section marginVertical={10} ... />
paddingHorizontal
| Type: |
number |
| Description: |
Sets padding on left and right sides of an element. |
<Section paddingHorizontal={10} ... />
paddingVertical
| Type: |
number |
| Description: |
Sets padding on top and bottom sides of an element. |
<Section paddingVertical={10} ... />
radius
| Type: |
number |
| Description: |
Rounds the corners of an element's border with specified curvature.
|
<Section radius={10} ... />