React Native
4 likes•1,165 views
React Native allows developers to build mobile apps using JavaScript and React skills instead of Objective-C or Java. It uses native components and JavaScript to render apps that look and feel like native mobile apps. Getting started requires Node.js, React Native CLI, and Xcode or Android Studio depending on the target platform. Apps are run and tested using the React Native CLI. Styling uses JavaScript stylesheets and components accept a style prop. The pros are a unified codebase and faster development, while the cons include less control over styling and performance profiling challenges.
![STYLING YOUR REACT NATIVE APP
STYLES ARE IMPLEMENTED WITH JAVASCRIPT
▸ All React Native core components accept a `style` attribute
▸ Both a single value or an array of values (mimics
`Object.assign` with the right-most values taking priority)
1 <Text style={styles.base} />
2 <View style={styles.background} />
3
4 <View style={[styles.base, styles.background]} />
5
6 <View style={[styles.base, this.state.active && styles.active]} />](https://image.slidesharecdn.com/reactnativeslides-160719141128/85/React-Native-17-320.jpg)
![STYLING YOUR REACT NATIVE APP
STYLES CAN BE PASSED AROUND AS PROPS
1 var List = React.createClass({
2 propTypes: {
3 style: View.propTypes.style,
4 elementStyle: View.propTypes.style,
5 },
6 render: function() {
7 return (
8 <View style={this.props.style}>
9 {elements.map((element) =>
10 <View style={[styles.element, this.props.elementStyle]} />
11 )}
12 </View>
13 );
14 }
15 });
16
17 // ... in another file ...
18 <List style={styles.list} elementStyle={styles.listElement} />](https://image.slidesharecdn.com/reactnativeslides-160719141128/85/React-Native-18-320.jpg)
React Native
- 1. REACT NATIVE MOJOTECH REACT SYMPOSIUM 2016
- 3. WHAT IS REACT NATIVE MAIN FEATURES ▸ Native Components ▸ Asynchronous Execution ▸ Touch Handling ▸ Flexbox & Styling ▸ Polyfills ▸ Extensible
- 6. GETTING STARTED COMMON PREREQUISITES ▸ Node.js 4.0+ ▸ React Native Command Line Tools ▸ $ npm install -g react-native-cli
- 7. GETTING STARTED PREREQUISITES FOR IOS APPLICATIONS ▸ Xcode ▸ which means you will need a Mac
- 8. GETTING STARTED PREREQUISITES FOR ANDROID APPLICATIONS ▸ Android Studio 2.0+ ▸ JDK 1.8+ ▸ Setting the ANDROID_HOME environment variable
- 10. TOOLING AND DEVELOPMENT RUNNING YOUR APPLICATION ▸ IOS ▸ $ react-native run-ios ▸ edit index.ios.js ▸ Android ▸ $ react-native run-android ▸ edit index.android.js
- 11. TOOLING AND DEVELOPMENT PLATFORM SPECIFIC CODE ▸ You can choose your method for keeping platform specific code organized ▸ /common/components /android/components /ios/components ▸ MyCustomButtonIOS.js MyCustomButtonAndroid.js
- 12. TOOLING AND DEVELOPMENT PLATFORM SPECIFIC CODE ▸ React Native provides a nicer way to do this also, with platform specific extensions ▸ MyCustomButton.ios.js MyCustomButton.android.js ▸ import MyCustomButton from ‘./components/MyCustomButton’;
- 13. TOOLING AND DEVELOPMENT PLATFORM DETECTION ▸ React Native provides the Platform module for detecting run time environment, when only small tweaks are needed based on platform, and not a completely unique component. ▸ Platform.OS === “ios” Platform.OS === “android” 1 var { Platform } = React; 2 3 var styles = StyleSheet.create({ 4 height: (Platform.OS === 'ios') ? 200 : 180 5 });
- 14. TOOLING AND DEVELOPMENT PLATFORM DETECTION ▸ React Native provides the Platform module for detecting run time environment, when only small tweaks are needed based on platform, and not a completely unique component. ▸ Platform.Select 1 var Component = Platform.select({ 2 ios: () => require('ComponentIOS'), 3 android: () => require('ComponentAndroid') 4 }); 5 6 <Component /> 1 var { Platform } = React; 2 3 var styles = StyleSheet.create({ 4 container: { 5 flex: 1, 6 ...Platform.select({ 7 ios: { backgroundColor: 'red' }, 8 android: { backgroundColor: 'blue' } 9 }) 10 } 11 });
- 15. STYLING YOUR REACT NATIVE APP
- 16. STYLING YOUR REACT NATIVE APP STYLES ARE IMPLEMENTED WITH JAVASCRIPT ▸ React Native layout 1 var styles = StyleSheet.create({ 2 base: { 3 width: 38, 4 height: 38, 5 }, 6 background: { 7 backgroundColor: '#222222', 8 }, 9 active: { 10 borderWidth: 2, 11 borderColor: '#00ff00', 12 }, 13 });
- 17. STYLING YOUR REACT NATIVE APP STYLES ARE IMPLEMENTED WITH JAVASCRIPT ▸ All React Native core components accept a `style` attribute ▸ Both a single value or an array of values (mimics `Object.assign` with the right-most values taking priority) 1 <Text style={styles.base} /> 2 <View style={styles.background} /> 3 4 <View style={[styles.base, styles.background]} /> 5 6 <View style={[styles.base, this.state.active && styles.active]} />
- 18. STYLING YOUR REACT NATIVE APP STYLES CAN BE PASSED AROUND AS PROPS 1 var List = React.createClass({ 2 propTypes: { 3 style: View.propTypes.style, 4 elementStyle: View.propTypes.style, 5 }, 6 render: function() { 7 return ( 8 <View style={this.props.style}> 9 {elements.map((element) => 10 <View style={[styles.element, this.props.elementStyle]} /> 11 )} 12 </View> 13 ); 14 } 15 }); 16 17 // ... in another file ... 18 <List style={styles.list} elementStyle={styles.listElement} />
- 19. APP DEPLOYMENT
- 20. YEAH, SO HAVE FUN WITH THAT… Craig P Jolicoeur APP DEPLOYMENT
- 21. RECOMMENDATIONS
- 22. RECOMMENDATIONS SINGLE MAIN APP ENTRY POINT ▸ Use a single `app.jsx` file as your main entry point instead of maintaining both `index.ios.js` and `index.android.js` 1 // index.{ios,android}.js 2 import { AppRegistry } from 'react-native'; 3 import App from './app'; 4 5 AppRegistry.registerComponent('MyApp', () => App); 6 7 // app.js 8 import React from 'react-native'; 9 import { Provider } from 'react-redux'; 10 import AppLoader from './components/app_loader'; 11 import ReduxStore from './redux/store'; 12 13 const MyApp = () => ( 14 <Provider store={ReduxStore.store()}> 15 <AppLoader /> 16 </Provider> 17 ); 18 19 export default MyApp;
- 23. RECOMMENDATIONS INTEGRATE FABRIC.IO ▸ Setup on Fabric (Crashlytics) as a custom logger in both iOS and Android ▸ https://get.fabric.io/ ▸ https://github.com/corymsmith/react-native-fabric ▸ https://medium.com/delivery-com-engineering/add-crashlytics- to-your-react-native-ios-app-69a983a9062a#.35n80bfig ▸ (Android blog post to follow)
- 24. RECOMMENDATIONS GENYMOTION ▸ Use the Genymotion Android Emulator for speed improvements. ▸ The newer Android Studio 2.0+ emulator is much better than it’s predecessor for native application dev (code hot-swapping, etc…) but still behind Genymotion for React Native development ▸ https://www.genymotion.com/
- 26. RECOMMENDATIONS REACT-NATIVE-LOCALIZATION ▸ https://github.com/stefalda/ReactNativeLocalization ▸ https://www.npmjs.com/package/react-native-localization 1 import LocalizedStrings from 'react-native-localization'; 2 3 let strings = new LocalizedStrings({ 4 en:{ 5 how:"How do you want your egg today?", 6 boiledEgg:"Boiled egg" 7 }, 8 it: { 9 how:"Come vuoi il tuo uovo oggi?", 10 boiledEgg:"Uovo sodo" 11 } 12 }); 13 14 // In your component 15 <Text style={styles.title}>{strings.how}</Text> 1 import LocalizedStrings from 'react-native-localization'; 2 3 let strings = new LocalizedStrings({ 4 en:{ 5 bread: "bread", 6 butter: "butter", 7 question: "Would you like {0} and {1}, or just {0}?" 8 }, 9 ... 10 }); 11 12 // In your component 13 <Text style={styles.title}> 14 {strings.formatString(strings.question, strings.bread, strings.butter)} 15 </Text>
- 30. PROS / CONS
- 31. PROS / CONS THE GOOD ▸ Single unified codebase (less knowledge required, fewer developers to maintain apps on two platforms) ▸ Single point of incoming errors/failures (only need to debug one codebase) ▸ Faster development time for teams without experienced Swift/Objective-C or Android SDK engineers ▸ Potential portability of components between mobile and web versions of the same React application
- 32. PROS / CONS THE BAD (MAYBE) ▸ Can be harder to add custom components ▸ Not as much control over styling/graphics/animations as on a purely native platform ▸ Harder to profile performance and finely tune ▸ Not necessarily faster dev cycle then purely native applications. ▸ Project is still under heavy, active development and things “break” often between releases ▸ Debugging while developing is “unpleasant”
- 33. EXTRA TOOLS
- 34. EXTRA TOOLS PEPPERONI ▸ Pre-built boilerplate with features for login/authentication, messaging, push notifications, cloud-based backend, CodePush for direct app updates, etc… ▸ http://getpepperoni.com/
- 35. EXTRA TOOLS CODEPUSH ▸ Open Source tool from Microsoft allowing you to push code updates to your app instantly for Cordova and React Native applications. ▸ http://microsoft.github.io/code-push/
- 36. EXTRA TOOLS FASTLANE ▸ Automation done right (no really). Use this tool for native development, not only React Native. Ease of deployment, provisioning, certificate management, beta process, etc… ▸ https://fastlane.tools/
- 37. EXTRA TOOLS RNPM ▸ React Native Package Manager built to ease your daily React Native development. Inspired by CocoaPods, Fastlane and react-native link ▸ https://github.com/rnpm/rnpm
- 38. EXTRA TOOLS NUCLIDE ▸ React Native IDE built on top of Atom (by Facebook) ▸ Built in Chrome debugger, remote server access, Hack language support, etc… ▸ https://nuclide.io/
- 39. EXTRA TOOLS DECO IDE ▸ React Native IDE (OS X only) ▸ Live visual feedback on updates, drag-and-drop component implementation, new file scaffold boilerplate ▸ https://github.com/decosoftware/deco-ide