Learn Basic Elements of React-Native and UI Layout by using CSS Library called FlexBox.

1. Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
kobkrit@gmail.com

2. All source code
• https://github.com/kobkrit/react-native-class-2017

3. Download Exercise
• https://github.com/kobkrit/react-native-class-2017/
raw/master/exercise/L4.zip

4. Prepare ENV for making Android App by
React-Native on Windows
• See https://kobkrit.com/react-native-tutorial-react-
native-setup-on-windows-for-android-development-
walkthrough-a463e825159d#.joucl9xkg

5. Prepare ENV for making Android App by
React-Native on Mac
• https://kobkrit.com/react-native-tutorial-set-up-
react-native-on-mac-for-ios-and-android-
development-78a30a26aa3b#.cn29imr81

6. Setup Project (15 min)
• Enter to your coding directory (Maybe ~/code, or c:code, but not
c:windowssystem32)
• (Both) $ react-native init flexbox
(Both) $ cd flexbox
• Open index.ios.js current directory with your IDE
(Mac) $ atom index.ios.js
(Win) > notepad index.android.js
• (Win) Run your android emulator (e.g. Genymotion)
• (Mac) $ react-native run-ios
(Win) > react-native run-android

7. • Set up the Screen like this.
• Enable Hot Reloading
• Open Developer Menu by Command-D on Mac
or Menu Button in Android Simulator (for
Windows)
• Tap Enable Hot Reloading
• Make Change the file, and hit Save.
• See the changes in Simulators.

8. Structure

9. JSX
• JSX is a JavaScript syntax extension that looks
similar to XML.
• We use a JSX to write User Interface (UI).
• JSX use camelCase.
• We use JSX at the render() function of a React
component.

10. index.ios.js
index.android.js

11. JSX Syntax
<Text>Hello World!</Text>
<Image
style={{height:100, width:100}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
Tag name: Text
Opening Tag Closing Tag
Tag body
Attribute Name Attribute ValueSelf Closing Tag

12. Attribute Value
• Using JavaScript Expression as Attribute Value,
Use { }
• Using String as Attribute Value, Use ''

13. Putting JS Logic in JSX
• Using JavaScript Statements, Put it between { }

15. Comment
• To comment in JSX, Put it between {/* */}, {// … n
}

16. One Outmost Parent Tag Rules
OK!
Only one outmost parent tags: View
BAD!
Multiple outmost parent tags: Text,Text

17. Basic Elements
<Text>Hello World!</Text>
iOS Android
<Image
style={{height:100, width:100}}
source={{uri: 'https://facebook.
github.io/react/img/logo_og.png'}}
/>
<Switch />
<View></View> (Container) (Container)

18. Basic Elements
<TextInput
style={{height:40, borderColor:
'gray', borderWidth: 1}}
value='Useless TextInput’
/>
iOS
Android<TextInput
multiLine={true}
numberOfLine={4}
style={{height:100, borderColor:
'gray', borderWidth: 1}}
value='Useless MultiLine TextInput’
/>

19. Basic Elements
<TouchableOpacity onPress={()=>{}}
style={{borderColor:'#f00',
backgroundColor:'#faa', borderWidth:
1, padding:10}}>
<Text>Touch me for Opacity!</Text>
</TouchableOpacity>
iOS & Android: Default
iOS & Android: Tapping
<TouchableHighlight onPress={()=>{}}
underlayColor='#f00a'
style={{borderColor:'#f00',
backgroundColor:'#faa', borderWidth:1,
padding:10}}>
<Text>Touch me for Highlight!</Text>
</TouchableHighlight>

20. JSX’s Example

21. Style

22. Basic CSS

23. View: Blue Box
80
80
80
8040
40
40
40
Margin
Padding
BorderRadius
20
Width: 200
Height: 200

24. View: Red Box+ Text
Flex:1
40

25. Exercise I (5 min)

26. More CSS for View

29. More CSS for Text

31. Flexbox Layout
• Flexbox => CSS Flexible Box Layout (in W3C Last Call
Working Draft)
• Providing efficient way to layout, align and distribute space
among items in a container, even when their size is
unknown and/or dynamic (flex)
• Containers can alter its items width/height and order to
best fill the available space.
• Flexbox is a direction-agnostic, which support complex
applications (especially when it comes to orientation
changing, resizing, stretching, shrinking, etc.)

32. • main axis - Primary axis of a flex container,
defined by flexDirection.
• main-start | main-end — Flex items placed within container
starting from main-start and going to main-end.
• main-size - Flex item’s width or height, whichever is in the
primary dimension.
Above is flexDirection = row (horizontal)

33. Above is flexDirection = row (horizontal)
• cross axis - Secondary axis that perpendicular to the
primary axis (opposed with the flexDirection)
• cross-start | cross-end - Flex lines are filled with items and
placed into the container starting on the cross-start side or
on the cross-end side.
• cross-size - the flex item’s width or height, whichever is in
the cross dimension.

34. Two types of Flex properties
Containers
• flexDirection
• justifyContent
• alignItems
• flexWrap
Items
• flex
• alignSelf

35. Containers
• flexDirection
• justifyContent
• alignItems
• flexWrap

36. FlexDirection
Horizontally
flexDirection: row;
Vertically
flexDirection: column;
(Container)

37. Default flexDirection in React Native is column

38. Justify Content
• Adding justifyContent to a
component's style determines
the distribution of children
along the primary axis.
• Should children be distributed
at the start, the center, the end,
or spaced evenly?
• Available options are flex-
start, center, flex-
end, space-around, and
space-between.
• Default is flex-start
(Container)
flexDirection: ‘column’,
justifyContent: ‘space-between’

40. Align Items
• Adding alignItems to a
component's style determines
the alignment of children along
the secondary axis (if the
primary axis is row, then the
secondary is column, and vice
versa).
• Should children be aligned at
the start, the center, the end, or
stretched to fill?
• Available options are flex-
start, center, flex-
end, and stretch.
• Default is flex-start
(Container)
flexDirection: ‘column’,
justifyContent: ‘center’, alignItems: ‘center’

42. FlexWrap
• By default, flex items will all try
to fit onto one line.
• Adding FlexWrap, You can
change that and allow the
items to wrap as needed with
this property.
• Direction also plays a role
here, determining the direction
new lines are stacked in.
• Available options are nowrap,
wrap
• Default is nowrap
(Container)
nowrap vs wrap

44. Items
• flex
• alignSelf

45. Flex
• “Flex” CSS syntax applied to item elements to tell how much they can
stretches inside their container by compares with its siblings.
• {flex: (positive integer number)}, e.g., {flex : 1}
• They equally divide all container’s space by the sum of flex values of
their children, then allocate space according to each child’s flex score.
(Item)

47. Align Self
• Adding alignSelf to a component's style determines the alignment of itself
along the secondary axis (overwrite the alignItems from its container).
• Available options are auto, flex-start, center, flex-end, and
stretch.
• Default is auto (Follow the alignItems from its container)
(Item)

49. Colors
• '#f0f' (#rgb)
• '#f0fc' (#rgba)
• '#ff00ff' (#rrggbb)
• '#ff00ff00' (#rrggbbaa)
• 'rgb(255, 255, 255)'
• 'rgba(255, 255, 255,
1.0)'
• 'hsl(360, 100%, 100%)'
• 'hsla(360, 100%, 100%,
1.0)'
• 'transparent'
• 'red'
• 0xff00ff00 (0xrrggbbaa)

50. More Colors…
https://facebook.github.io/react-native/docs/colors.html

51. Exercise II (10 min)

52. Exercise III (15 min)

53. Exercise IV (15 min)