![Add header scroll animation
<ScrollView
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}
>
<Animated.Image
style={
{
opacity: imageOpacity,
transform: [{translateY: imageTranslate}]
},
}
/>
ScrollView Animated.Image
Animation executes only in native thread](https://image.slidesharecdn.com/ivanovilya-reactnative-180604125615/85/Mobile-Fest-2018-React-Native-14-320.jpg)
Mobile Fest 2018. Илья Иванов. Как React-Native перевернул наше представление о нативных приложениях
- 1. Absolute Mobile Fest Kyiv 2018 How React-Native shaped the way we think about native apps Ilya Ivanov Mobile Team Lead at Ciklum
- 2. 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 Kyiv 2018
- 3. Why this talk • Show you the core principles behind react-native • Show why you might want to consider react-native Kyiv 2018
- 4. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
- 5. MountainRoad Hybrid Cyclo-cross Cross-country So I want to buy a bike…
- 6. Web Web Code Browser Hybrid Native Container Web Code Native Native App So I want to build an app…
- 7. React-Native • HTML/CSS/JS • Native container • WebView Classic Hybrid • No HTML/CSS • Native view defined by JS • No WebView
- 8. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
- 9. How React-Native works View Text Android react-native react android.view android.text iOS UIView UILabel <View style={styles.container}> <Text> Welcome to React Native! </Text> </View>
- 10. Native Code Bridge JS runtime environment How React-Native works
- 11. Native event Serialize payload Process event Call native methods Serialize response Process commands Native Code Bridge JS runtime environment
- 12. <View> <TouchableOpacity onPress={this.increment} > <Text {this.state.count} </Text> </TouchableOpacity> </View> increment = () => this.setState({count: this.state.count + 1});
- 13. Native Code Bridge JS runtime environment Define animation Serialize Animation definition Execute animation
- 14. Add header scroll animation <ScrollView onScroll={Animated.event( [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] )} > <Animated.Image style={ { opacity: imageOpacity, transform: [{translateY: imageTranslate}] }, } /> ScrollView Animated.Image Animation executes only in native thread
- 15. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
- 16. Advantages • Cross-platform native development • Great development experience • Prototyping and distribution without XCode or Android Studio
- 17. Cross-platform native development • React-Native • Single project – two native platforms • React-Native-Web • Single project – three native platforms
- 19. Limitations • Leaky abstractions • You still need to write native code
- 21. You still need to write native code • It still takes around 5-10% to write Swift/Java code • Percentage may vary
- 22. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
- 23. Bootstrapping your application react-native init MyApplication Pros: • Can use custom native code create-react-native-app MyApplication Pros: • No need to install Android Studio and Xcode • Can publish your apps to Expo repo • You can always eject Cons: • Need to install Xcode and Android studio Cons: • Can’t use custom native code
- 24. Expo step-by-step guide • Install Expo on the mobile device • Install Expo XDE on the dev machine • Create Expo project • Scan QR code from the mobile device • mobile device and dev machine should be in the same network area • Open project with any IDE or Editor and start coding
- 25. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
- 26. When to use
- 27. Summary • React-Native in an example of the new ”native” mobile solution • React-Native converts element hierarchy written in JavaScript into native views. No HTML/CSS involved • You can use Expo to create and distribute native solution without Android Studio or Xcode Kyiv 2018
- 28. Absolute Mobile Fest Kyiv 2018 Thanks Questions?
- 29. Absolute Mobile Fest Kyiv 2018 • https://expo.io/tools • https://facebook.github.io/react-native/showcase.html • https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e Resources