Intro To React Native with Varun Vachhar OVERVIEW React Native introduces a new way to write native mobile apps. You can take everything that you know and love about React and apply it to native apps. Unlike hybrid apps, it gives you access to both native APIs and UI components. The application logic uses JavaScript whereas, the UI is fully native! It also brings the best of the web to native, things like – flexbox layout model, XMLHttpRequest, requestAnimationFrame, etc. OBJECTIVE To introduce the audience to React Native. Show how they can leverage their knowledge of web development to build native apps. TARGET AUDIENCE Developers familiar with React who are interested in building native mobile apps. ASSUMED AUDIENCE KNOWLEDGE Basic knowledge of React, ES6 and CSS. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What is React Native How it is an extension of hybrid How to use polyfills to leverage the best of the web while getting native performance How to debug React Native apps How to use Flexbox and CSS for styling a React Native app

1. Varun Vachhar
@winkerV eck
React Native

2. H rid App

3. H rid App Are
A we view
running a we app
with acce to native API
that ou uild once and deplo
ever where

4. React Native I An
xten ion of H rid

5. What I It?
An em edded in tance of
Java criptCore.
React component with inding to
native UI component .
Manipulating call into O jective C &
Java for ehavior.
And pol fill for ome we API
Native App
React Native li rar
Java cript ngine
React J
React Native J
Li rar
Your app

6. Pol fill
&
C (Flex ox)!

7. Getting tarted
In tall Node
(optional)

8. Create a New Project

9. Platform pecific xten ion
// MyComponent.ios.js
// MyComponent.android.js
import MyComponent from './components/MyComponent';

10. Flex ox

11. how Me
the Code

12. Component
class MyComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);

13. t le
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

14. De ugging

15. More De ugging

16. Touch
Toucha leHighlight and Toucha le*
Ge ture Re ponder tem &
PanRe ponder

17. Network
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content‐Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
});

18. Animation
Declarative
Compo a le: parallel, equence & tagger
Ge ture and event can drive animation

19. Navigator
Will feel familiar
tack a ed
Pu h/pop tate
call ack decide what to
render

20. Timer

21. Wh u e it?

22. Native
Look and
Feel

23. Performance

24. True Multi-Threading
Java cript ha it' own thread. We can move
image proce ing, data manipulation , etc.
to a different thread.

25. Developer fficienc

26. React Native i
xten i le

27. Learn Once, Write An where

28. Varun Vachhar
githu .com/winkerV eck / potif -arti t-
lookup
@winkerV eck
Thank You!