Web / Mobile
VR/AR/MR
IoT
mail: vnovick@gmail.com
twitter: @VladimirNovick
github: vnovick
facebook: vnovickdev
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
Bridge
With native code
Only JS and expo SDK
With native code
Only JS and expo SDK
Built on top of React Native
Desktop XDE
Additional native APIs
Mobile Client
Expo Snack playground
Can be viewed in Expo XDE
Can be ejected to vanilla React Native
Can be ejected to React Native + ExpoKit
CRNA
CRNA ejected
react-native-cli
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry
.registerComponent('testproject',
() => App
);
React native retrieves files based on environment extensions
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>
Open App.js to start working on your app!</Text>
<Text>
Changes you make will automatically reload.</Text>
<Text>
Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
npm install -g react-devtools
react-devtools
const styles = {
message: {
width: '70%',
margin: 10,
padding: 10,
backgroundColor: 'white',
borderColor: '#979797',
borderStyle: 'solid',
borderWidth: 1,
borderRadius: 10
},
incomingMessage: {
alignSelf: 'flex-end',
backgroundColor: '#E1FFC7'
}
}
const Message = ({ item }) => (
<View style={[
styles.message, item.incoming &&
styles.incomingMessage
]}>
<Text>{item.message}</Text>
</View>
)
import { Stylesheet } from 'react-native';
const styles = Stylesheet.create({
message: {
width: '70%',
//...
})
Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
import React from 'react';
import { StackNavigator } from 'react-navigation';
const AppNavigator = StackNavigator({
home: { screen: Home },
chat: { screen: ChatScreen }
});
export default class extends React.Component {
render(){
return (
<AppNavigator />
)
}
}
//...
export default class Home extends React.Component {
static navigationOptions = {
title: "Home Screen"
}
}
// ...
render(){
return (
<View style={styles.container}>
<Button title="Navigate to ChatScreen"
onPress={() => this.props.navigation.navigate('chat', { name: 'John' })}/>
</View>
)
}
Welcome
Main
Screen 1
Screen 2
Settings
Settings2
TabNavigator without actual tabs
TabNavigator
StackNavigator
Pros:
Cons:
Less configurable
Animates everything on next render
setState during animation won't affect current animation
Pros:
Cons:
If setState takes time animations can stutter
AccessibilityInfo, ActionSheetIOS, AdSupportIOS, Alert, AlertIOS, Animated, AppRegistry, AppState, AsyncStorage, BackAndroid, BackHandler, CameraRoll, Clipboard, DatePickerAndroid, Dimensions, Easing, Geolocation, ImageEditor, ImagePickerIOS, ImageStore, InteractionManager, Keyboard, LayoutAnimation, Linking, NativeMethodsMixin, NetInfo, PanResponder, PermissionsAndroid, PixelRatio, PushNotificationIOS, Settings, Share, StatusBarIOS, StyleSheet, Systrace, TimePickerAndroid, ToastAndroid, Vibration, VibrationIOS, Layout Props, Shadow Props
Accelerometer, Amplitude, AppLoading, Art, Asset, Audio, AV, BarCodeScanner, BlurView, Branch, Constants, Contacts, DocumentPicker, ErrorRecovery, Facebook, FacebookAds, Font, GLView, Google, Gyroscope, ImagePicker, KeepAwake, LinearGradient, Location, MapView, Notifications, Pedometer, Permissions, Segment, SQLite, Svg, takeSnapshotAsync, Util, Video, WebBrowser
// MyNativeModule.h
#import <React/RCTBridgeModule.h>
@interface MyNativeModule : NSObject <RCTBridgeModule>
@end
// MyNativeModule.m
#import "MyNativeModule.h"
#import <React/RCTLog.h>
@implementation MyNativeModule
// To export a module named ExsportedModuleName
RCT_EXPORT_MODULE(ExsportedModuleName);
RCT_EXPORT_METHOD(logInfo:(NSString *)text)
{
RCTLogInfo(@"Logging from my native module %@", text);
}
@end
import { NativeModules } from 'react-native';
const logger = NativeModules.ExsportedModuleName;
logger.logInfo('Test message');
Step 1: Create the module
create class that extends ReactContextBaseJavaModule
Override createNativeModules method
Expose methods to JS using @ReactMethod
Step 2: create a package for module and register it
create class that implements ReactPackage