react native for android - developermarch€¦ · integration with existing apps • add...
Post on 21-May-2020
14 Views
Preview:
TRANSCRIPT
React Native for Android
Anirudh SEngineer, Hasura
HASURA
WHAT IS REACT NATIVE?
Timeline
React JS deployed on Facebook’s newsfeed
2011
React deployed on instagram.com
2012
Open sourced at JS Conf US May 2013
React Native announced at React.js Conf
Feb 2015
React Native open sourced
Feb 2015
React Native released for Android Sep 2015
Target Audience for React Native
Web developer
Android developer
iOS developer
Knows Javascript - ES6Written & shipped Android
appsWritten & shipped iOS apps
Familiar with a modern framework
Familiar with Android best practices
Familiar with iOS best practices
Want to write mobile appsWant to write cross-platform
appsWant to write cross-platform
apps
WHY REACT NATIVE?
Advantages over Android workflow
• Reusable code
• Faster build times (Live Reloading!)
• Faster deployment times
• React patterns
Blueprint to become a React Native dev
Native (Android Java)
Javascript ES6React
patterns
React Native basics
Backend Redux
Source: Spencer Carli (@spencer_carli)
REACT PATTERNS
Features
• One-way data flow
• Virtual DOM
• JSX
• Architecture beyond HTML
JSX
var HelloMessage = React.createClass({ render: function () { return <h1>Hello {this.props.message}!</h1>; } });
ReactDOM.render(<HelloMessage message="World" />, document.getElementById('root'));
Components
• Building block of any UI
• Modular, composable
• 2 types: Container & Presentation
• props & states
Component API
• this.props
• this.state
• this.setState(object newState)
Component Lifecycle API
• Mounting cycle
• Updating cycle
Mounting cycle
• constructor(object props)
• componentWillMount()
• render() -> React element
• componentDidMount()
Updating cycle
• componentWillReceiveProps(object nextProps)
• shouldComponentUpdate(object nextProps, object nextState) -> boolean
• componentWillUpdate(object nextProps, object nextState)
• render() -> React element
• componentDidUpdate(object prevProps, object prevState)
Styles
• Inline
<Text style={{color: ‘green’}}>Hello MODS</Text>
• Stylesheet
<Text style={styles.mods}>just red</Text>
const styles = StyleSheet.create({
mods: {
color: ‘green’
}
});
Flex box
• Specify the layout of children
• Combination of • flexDirection - orientation of primary axis
• justifyContent - distribution along primary axis
• alignItems - alignment along secondary axis
REACT NATIVE
Setup
npm install -g react-native-cli
Hello World
import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); }
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
First party components
ActivityIndicator DrawerLayoutAndroid Image ListView
MapView Navigator Modal Picker ProgressBarAndroid
RefreshControl ScrollView Slider StatusBar Switch
Text TextInput ToolBarAndroid TouchableHighlight
TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback
View ViewPagerAndroid WebView
Networking
• Fetch & Promise
• Third-party libs that work with XMLHttpRequest
• WebSockets
Navigators
• Scenes
• Navigators
• React Native Router (react-native-router-flux)
Platform specific code
• Platform modules Platform.select({
ios: {
backgroundColor: 'blue',
},
android: {
backgroundColor: 'green',
}}
• Platform-specific extensions NewComponent.ios.js
NewComponent.android.js
Integration with existing apps
• Add com.facebook.react:react-native:+ to your app’s build.gradle
• Add an entry for the local RN maven directory in your project’s build.gradle
• Add Internet permission in your AndroidManifest.xml
• Create an Activity that • creates a ReactRootView
• starts a React application inside it
• sets it as the main content view
• Pass some activity lifecycle callbacks to the ReactInstanceManager
• Also pass back button events to React Native
• Hook up the dev menu
• Run your app
Native modules
• A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript
• getName method
• getConstants method
• Java methods annotated by @ReactMethod & return void
• Use corresponding Argument types
• Register the module in the createNativeModules method of your apps package
• The package needs to be provided in the getPackages method of the MainApplication.java
Native UI components
• Create the ViewManager subclass
• Implement the createViewInstance method
• Expose view property setters using @ReactProp (or @ReactPropGroup) annotation
• Register the manager in createViewManagers of the applications package
• Implement the JavaScript module
Debugging
• In-App Developer Menu
• Reload JS
• In-app Errors & Warnings
• Console logs
• Chrome Dev Tools
• Debugging Native code
• Performance Monitor
Testing
• Jest Tests - npm test
• Unit Tests - ./scripts/run-android-local-unit-tests.sh
• Integration Tests - ./scripts/run-android-local-integration-
tests.sh
TOOLS
Tools
• Nuclide
• Deco
• Exponent
• CodePush
• Ignite
• Reactroton
RESOURCES
Resources
• Awesome React Native
• JS.coach
• React Native playground
• F8 App
• makeitopen.com
GROWING PAINS
Concerns
• Android is newer
• Open bugs
• Fix core RN bugs if your app is affected
• Getting used to the patterns
CONTRIBUTING TO REACT NATIVE FOR ANDROID
Submitting a Pull Request1. Fork the repo and create your branch from master.
2. Describe your test plan in your commit. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. If you've updated the docs, verify the website locally and submit screenshots if applicable.
$ cd website
$ npm install && npm start
go to: http://localhost:8079/react-native/index.html 5. Add the copyright notice to the top of any new files you've added.
6. Ensure tests pass on Travis and Circle CI.
7. Make sure your code lints (node linter.js <files touched>).
8. If you haven't already, sign the CLA.
9. Squash your commits (git rebase -i). one intent alongs with one commit makes it clearer for people to review and easier to understand your intention
anirudh24seven
Where can you find me?
top related