This document provides an overview of building mobile applications with React Native. It discusses that React Native allows building native mobile apps using JavaScript and reusable React components. It also covers setting up the React Native environment, important concepts like state, props, and styling, and how to configure the layout of components with flexbox. The document demonstrates how to run React Native apps for both iOS and Android and lists some common React Native components and APIs.

1. BUILD MOBILE APPLICATION
WITH REACT-NATIVE
(BASICS)
DTS-TUNE TEAM
KHOI.DANG

2. REACT NATIVE - OVERVIEW
• React Native is a JavaScript framework for building native mobile
apps. It uses the React framework and offers large amount of inbuilt
components and APIs.
• React Native lets you build mobile apps using only JavaScript. It uses
the same design as React, letting you compose a rich mobile UI from
declarative components.
• With React Native, you don't build a mobile web app, an HTML5 app,
or a hybrid app; you build a real mobile app that's indistinguishable
from an app built using Objective-C or Java

3. REACT NATIVE - ENVIRONMENT SETUP
• Software requirements
• NodeJS and NPM, Yarn, …
• IDE (Android Studio, XCode, Visual Studio, Visual Code)
• SDK (JDK, Android SDK, … )
• Install React Native
• npm install -g react-native-cli / npm install -g create-react-
native-app
/ npm install exp --global
• Install packages
• npm install <package-name@version>

4. CORE CONCEPTS
• State
• Props
• Styling
• Height and Width
• Layout with Flexbox
• Running IOS
• Running Android
• …

5. REACT NATIVE - STATE
• We can understand it as a model of a Component
• State can be updated in the future
• Example: class Home extends Component {
state = {
myState: 'Ready'
}
}

6. REACT NATIVE - PROPS
• Most components can be customized when they are created,
with different parameters. These creation parameters are called
props.
• We can understand it as properties of a Component
• Props can’t be updated
• Example:

7. REACT NATIVE – PROPS: EXAMPLE
const PresentationalComponent = (props) ⇒ {
return (
<View>
<Text onPress = {props.updateState}> {props.myState} </Text>
</View>
)}
class Home extends Component {
state = { myState: 'Ready’ }
return (
<View>
<PresentationalComponent myState = {this.state.myState} updateState =
{this.updateState}/>
</View>
)}

8. REACT NATIVE - STYLING
• There are a couple of ways to style your elements in React
Native.
• You can use the style property to add the styles inline.
However, this is not the best practice because it can be hard to
read the code.
• You can use this to make styles "cascade" other way do in CSS.

9. REACT NATIVE – STYLING: EXAMPLE
const PresentationalComponent = (props) ⇒ {
return (
<View>
<Text onPress = {props.updateState} style = {styles.myStyle}>
{props.myState} </Text>
</View>
)}
const styles = StyleSheet.create ({
myStyle: {
marginTop: 20,
textAlign: 'center',
color: 'blue',
fontWeight: 'bold',
fontSize: 20
}
})
style = {styles.myState}

10. REACT NATIVE - HEIGHT AND WIDTH
• A component's height and width determine its size on the screen.
• Fixed Dimensions
• The simplest way to set the dimensions of a component is by adding a fixed
width and height to style.
• style={{width: 50, height: 50, backgroundColor: 'powderblue'}}
• Flex Dimensions
• Use flex in a component's style to have the component expand and shrink
dynamically based on available space
• style={{flex: 1, backgroundColor: 'powderblue’}}
• style={{flex: 2, backgroundColor: 'powderblue'}}

11. REACT NATIVE - LAYOUT WITH FLEXBOX
• A component can specify the layout of its children using the flexbox
algorithm. Flexbox is designed to provide a consistent layout on
different screen sizes.
• Flex Direction
• row/ column: default column
• Justify Content (Y)
• flex-start, center, flex-end, space-around, space-between and space-
evenly.
• Align Items (X)
• flex-start, center, flex-end, and stretch.

12. Flex Direction Justify Content Align Items

13. REACT NATIVE - RUNNING
• Running IOS
• react-native run-ios
• react-native run-ios --simulator "iPhone 5s"
• Running Android
• react-native run-android

14. COMPONENTS AND APIS
• View
• WebView
• Modal
• TextInput
• ListView
• ScrollView
• Images
• Http
• Button
• Animations
• Router
• …

15. REACT NATIVE - DEMO

17. DOCUMENT REFERENCE
• https://www.tutorialspoint.com/react_native/index.htm
• https://facebook.github.io/react-native/docs/getting-
started.html
• https://expo.io/learn

18. Q&A