Scribd
Upload
1K views12 pages

React Native Cheat Sheet

The document is a cheat sheet for React Native layout properties. It outlines different flexbox properties for controlling layout including flexDirection, justifyContent, alignItems and their possible values like 'row', 'column', 'flex-start', 'center' etc. It also covers flex properties, alignSelf, aspectRatio, flexWrap and positioning with relative and absolute.

Uploaded by

Kike Santana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views12 pages

React Native Cheat Sheet

The document is a cheat sheet for React Native layout properties. It outlines different flexbox properties for controlling layout including flexDirection, justifyContent, alignItems and their possible values like 'row', 'column', 'flex-start', 'center' etc. It also covers flex properties, alignSelf, aspectRatio, flexWrap and positioning with relative and absolute.

Uploaded by

Kike Santana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

justify align

relative absolute items content

‘column’/’column-reverse’/’row’/’row-reverse’

flexDirection column

1 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

flex

2 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

flex:1

flex

flex:1 flex:1

flex:2 flex:3

‘flex-start’/’flex-end’/’center’/’space-between’/’space-around’

3 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

flex-start

‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’

4 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

stretch width

width flex-start flex-end

5 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’

6 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

‘wrap’, ‘nowrap’

nowrap

‘flex-start’/’center’/’flex-end’/’stretch’/’space-between’/’space-

around’

flexWrap:'wrap'

7 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

‘relative’/’absolute’

relative

absolute

8 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

relative

9 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

10 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

11 of 12 8/15/2018, 12:03 PM
The Full React Native Layout Cheat Sheet – Dror Biran – Medium https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet...

12 of 12 8/15/2018, 12:03 PM

You might also like