DEV Community

Cover image for React Native layout properties!
Zahab Kakar
Zahab Kakar

Posted on • Updated on

React Native layout properties!

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

Thanks for reading!

Let's connect on Twitter

Top comments (0)