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

### 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

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

Flexwrap

Types

1. wrap
2. nowrap

Description

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

Examples

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

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