React Native layout properties!

React Native layout properties!

Zahab kakar's photo
Zahab kakar

Published on Aug 7, 2021

2 min read

Subscribe to my newsletter and never miss my upcoming articles

A simple guide with examples for React Native layout properties!

Content

  • flexbox
  • Shadow Prop Types IOS

flexbox

alignContent

Types

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. space-between
  6. space-around

Description

  • determine how should children's components be aligned along the primary axis of their container.

Examples 1_cC2XFyCF_igp20Ombt4wBw.png

alignItems

Types

  1. flex-start
  2. flex-end
  3. center
  4. stretch

Description

  • determine how should children's components be aligned along the secondary axis of their container.

  • Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.

Default

  • stretch

Examples

2.png

alignSelf

Types

  1. auto
  2. flex-start
  3. flex-end
  4. center
  5. stretch

Default

  • auto

Description

  • alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent.

Examples 3.png

Flexwrap

Types

  1. wrap
  2. nowrap

Description

Controls whether items are forced on a single line or can be wrapped on multiple lines.

Examples

1__7v4uQhSsuCn1cfeOMVfrA.png

Position

Types

  1. relative
  2. absolute

Description

  • position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

Default

  • relative

Examples

7.png

Shadow Prop Types IOS

Name Type Description
shadowColor customColorPropType Sets the drop shadow color
shadowOffset customReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) Sets the drop shadow offset
shadowOpacity number Sets the drop shadow opacity (multiplied by the color's alpha component)
shadowRadius number Sets the drop shadow blur radius
 
Share this