The document discusses React Native, a JavaScript framework for building mobile apps using React. It allows building iOS and Android apps using one codebase by rendering native UI components. Some key points covered include: - React Native uses JavaScript to build mobile apps that render native components, bridging to native platforms. - It offers native experience and performance while allowing 80% shared code between iOS and Android. - Styling uses Flexbox layout model similar to CSS. - JSX combines JavaScript and XML syntax to create views using single file components. - The document provides an overview and demo of building a basic React Native app.

1. React Native
Mehmet Ali BAĞCI

2. Agenda
Tools to build mobile apps
What is React Native?
Why RN?
Why not RN?
How React Native draw?
JSX
Styling
Demo Application
Q&A

4. Approach of Mobile App Development
Approximately 20-30 screens

5. What is React Native?
Javascript framework for
building iOS and Android
mobile apps
Based on popular
Javascript Web framework
called React
React-Native bridges and
invokes the Native
rendering API in Objective-
C (iOS) and Java (Android)
Created by Facebook
Native App
React Native Library
JavaScript Engine
React JS
React Native
JS Library
Your App

6. Native Experience
One language rules them all, JavaScript.
Fast & Great Development Experience
Don’t Waste Time Recompiling (Hot Reloading)
80% Share code between Android & iOS
Great Debugging Tool using Chrome Developer Tools
Be able to bridge with Native Code when we need to
Why React Native?

7. React-Native is still relatively young compared with
Native iOS and Android Communities (Released on
2015)
Some of Native API still are not supported. (But you
can use the native libraries through)
Add one additional layer to mobile app project.
Why NOT React Native?

8. React for the Web, render normal HTML elements
React Native, render cross-platform (or platform specific) native UI
component.
How React Native Draw?
Cross Platform (iOS,
Android)
Platform Specific

9. Platform Specific Components

10. Code is javascript
Styles are … javascript
Views are … javascript
Layout calculation is … javascript
Everything is JavaScript

11. Combining JavaScript and XML-markup syntax to
create view.
Single File Concept (Write down at Component
Class), Not Seperate Files (Split HTML, CSS, JS)
JSX
var app = <Nav color="blue">
<Profile>click</Profile>
</Nav>
var Nav, Profile;
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);

12. In Web, We have CSS, necessary part of the Web.
In React-Native, We have something similar to CSS, called
Flexbox Layout Model.
Styling

13. FlexBox
<View style={styles.container}>
<View style={[styles.box, styles.box1]}></View>
<View style={[styles.box, styles.box2]}></View>
<View style={[styles.box, styles.box3]}></View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
box: {
height: box_height
},
box1: {
backgroundColor: '#2196F3'
},
box2: {
backgroundColor: '#8BC34A'
},
box3: {
backgroundColor: '#e3aa1a'
}
});
flexDirection:
'column'
flexDirection:
'row'

14. Demo Application