All source code

• https://github.com/anhhna/learning-react-native
 Download Exercise

• https://github.com/anhhna/learning-react-native/
tree/master/solutions/l4_flexbox
Prepare ENV for making Android App by
React-Native on Windows

React Native Installing

for Android Development
on Windows
• See https://www.youtube.com/watch?v=L3KIlNZOp3c
 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
 JS
X
• 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></ (Container) (Container)
View>

<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)
FlexWra
•
p
• By default,
Adding flex items
FlexWrap, will
You canall try
to fit onto
change one
that line.
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)

Fle
x

• “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)
Q/A