-

1. Ilya Ivanov
Mobile Team Lead at Ciklum
Advanced React-Native

2. Why this talk
• Share my experience with React-Native
• Can we write native apps in JavaScript?

3. About me
• 2 years in react-native
• 3 years in react
• 7 years in software development
Back-end
Web
front-end
Mobile
front-end
Ilya Ivanov
Mobile Team Lead

4. Agenda
• In the context
• How it works
• Animations
• Advantages
• Limitations
• When to use

5. Agenda
• In the context
• How it works
• Animations
• Advantages
• Limitations
• When to use

6. MountainRoad
Hybrid
Cyclo-cross Cross-country
So I want to buy a bike…

7. Web
Web
Code
Browser
Hybrid
Native
Container
Web
Code
Native
Native
App
So I want to build an app…

8. Agenda
• In the context
• How it works
• Animations
• Advantages
• Limitations
• When to use

9. React in Web
class App extends Component {
render = () => (
<Box>
<Title/>
</Box>
);
}
const Box = ({children}) => (
<div style={styles.box}>{children}</div>
);
const Title = () => (
<span style={styles.title}>Title</span>
);
div
span
react
div
span
Browser
react-dom

10. React in Native Mobile
const Box = ({children}) => (
<View style={styles.box}>{children}</View>
);
const Title = () => (
<Text style={styles.title}>Title</Text>
);
import {Text, View} from 'react-native';
class App extends Component {
render = () => (
<Box>
<Title/>
</Box>
);
}
View
Text
android.view
android.text
Android
iOS
UIView
UIText
react
react-native

11. Native Code Bridge
JS runtime
environment
How React-Native works

12. Agenda
• In the context
• How it works
• Animations
• Advantages
• Limitations
• When to use

13. Warning
UX nerd ahead

14. Animations Web vs Native
Medium article In web Google Play native app

15. Add header scroll animation
<ScrollView
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.scrollY}}}]
)}
>
<Animated.Image
style={
{
opacity: imageOpacity,
transform: [{translateY: imageTranslate}]
},
}
/>
ScrollView Animated.Image
Animation executes only in native threadhttps://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e
scrollY = new Animated.Value(0);

16. Agenda
• In the context
• How it works
• Animations
• Advantages
• Limitations
• When to use

17. Advantages
• Cross-platform native development
• Community

18. Do not mix issues related to…
• Fundamental limitations of cross-platform development
• Technology based limitations

19. Limitations
• Two different platforms (leaky abstractions)
• You still need to write native code

20. Leaky abstractions
AndroidiOS

21. Areas of expertise

22. You still need to write native code
• It still takes around 5-10% of time to write Swift/Java code
• Percentage may vary

23. Agenda
• In the context
• How it works
• Animations
• Advantages
• Limitations
• When to use

24. When to use

25. Summary
• React-Native apps are native apps written in JavaScript
• Native views including animations are defined in JavaScript
• There is a bridge in runtime doing Native <=> JS interop
• React-Native has huge potential
• If you want to know the short way to try React-Native on a real
device, speak to me in the area

26. Questions?
Ilya Ivanov
Skype: innerself89
Email: static.ila@gmail.com