Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
[email protected] All source code
• https://github.com/kobkrit/react-native-class-2017
Download Exercise
• https://github.com/kobkrit/react-native-class-2017/
raw/master/exercise/L4.zip
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
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
Setup Project (15 min)
• Enter to your coding directory (Maybe ~/code, or c:\code, but not
c:\windows\system32)
• (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
• 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.
Structure
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.
index.ios.js
index.android.js
JSX Syntax
Tag name: Text Tag body
<Text>Hello World!</Text>
Opening Tag Closing Tag
<Image
style={{height:100, width:100}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
Self Closing Tag Attribute Name Attribute Value
Attribute Value
• Using JavaScript Expression as Attribute Value,
Use { }
• Using String as Attribute Value, Use ''
Putting JS Logic in JSX
• Using JavaScript Statements, Put it between { }
Comment
• To comment in JSX, Put it between {/* */}, {// … \n
}
One Outmost Parent Tag Rules
OK!
BAD!
Only one outmost parent tags: View Multiple outmost parent tags: Text,Text
Basic Elements
iOS Android
<View></View> (Container) (Container)
<Text>Hello World!</Text>
<Image
style={{height:100, width:100}}
source={{uri: 'https://facebook.
github.io/react/img/logo_og.png'}}
/>
<Switch />
Basic Elements
iOS
<TextInput
style={{height:40, borderColor:
'gray', borderWidth: 1}}
value='Useless TextInput’
/>
<TextInput
Android
multiLine={true}
numberOfLine={4}
style={{height:100, borderColor:
'gray', borderWidth: 1}}
value='Useless MultiLine TextInput’
/>
Basic Elements
iOS & Android: Default
<TouchableOpacity onPress={()=>{}}
style={{borderColor:'#f00',
backgroundColor:'#faa', borderWidth:
1, padding:10}}>
<Text>Touch me for Opacity!</Text>
</TouchableOpacity>
iOS & Android: Tapping
<TouchableHighlight onPress={()=>{}}
underlayColor='#f00a'
style={{borderColor:'#f00',
backgroundColor:'#faa', borderWidth:1,
padding:10}}>
<Text>Touch me for Highlight!</Text>
</TouchableHighlight>
JSX’s Example
Style
Basic CSS
View: Blue Box
80
BorderRadius
20 40
80 40 40 80
Height: 200
Margin
40 Padding
80
Width: 200
View: Red Box+ Text
40
Flex:1
Exercise I (5 min)
More CSS for View
More CSS for Text
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.)
Above is flexDirection = row (horizontal)
• 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)
• 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.
Two types of Flex properties
Containers Items
• flexDirection • flex
• justifyContent • alignSelf
• alignItems
• flexWrap
Containers
• flexDirection
• justifyContent
• alignItems
• flexWrap
(Container)
FlexDirection
Horizontally
flexDirection: row;
Vertically
flexDirection: column;
Default flexDirection in React Native is column
(Container)
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
flexDirection: ‘column’,
justifyContent: ‘space-between’
(Container)
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 flexDirection: ‘column’,
justifyContent: ‘center’, alignItems: ‘center’
(Container)
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
nowrap vs wrap
Items
• flex
• alignSelf
(Item)
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)
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)
Colors
• '#f0f' (#rgb) • 'hsl(360, 100%, 100%)'
• '#f0fc' (#rgba) • 'hsla(360, 100%, 100%,
1.0)'
• '#ff00ff' (#rrggbb)
• 'transparent'
• '#ff00ff00' (#rrggbbaa)
• 'rgb(255, 255, 255)' • 'red'
• 'rgba(255, 255, 255, • 0xff00ff00 (0xrrggbbaa)
1.0)'
More Colors…
https://facebook.github.io/react-native/docs/colors.html
Exercise II (10 min)
Exercise III (15 min)
Exercise IV (15 min)
