The document discusses building native components and modules for React Native applications. It provides guidance on creating native modules and components for both iOS and Android platforms. For native modules, it describes how to expose methods and properties to JavaScript. For native components, it explains how to create custom native views and expose their properties and events to React components.
3. React Native: is a library to generate
native apps for iOS and Android mobile devices capable,
programmed in javascript.
React Native uses the actual native components of each
platform (currently iOS and Android).
Useful Native APIs
React Native Part I
5. NAVIGATION
Navigator component handles the transition between
different scenes in your app, available on both iOS and Android.
React Native Part II
TABS
Several options to provide tabbed navigation. Scrollable-Tab-View is a nice
iOS/Android component that lets you swipe between tabs.
LISTS
Use ListView to render a list of components.
DRAWER
BUTTON
VIDEO
CAMERA
SWIPER
6. NAVIGATION
Navigator component handles the transition between
different scenes in your app, available on both iOS and Android.
React Native Part II
TABS
Several options to provide tabbed navigation. Scrollable-Tab-View is a nice
iOS/Android component that lets you swipe between tabs.
LISTS
Use ListView to render a list of components.
DRAWER
BUTTON
VIDEO
CAMERA
SWIPER
7. The Native Side
We have been playing on the JS side, but how does it work
on the native side?
8. The Native Side
Not really magic, it’s more like this...
Native UI View Native logic
Native Bridge
Javascript Bridge
Javascript
JS Method
Invoke Native Method
Queue callback
Native callback
Invoke callback
Execute callback
12. Basics
Native Modules on iOS
// CalendarManager.m
@implementation CalendarManager
RCT_EXPORT_MODULE();
@end
2 . Include RCT_MODULE_EXPORT() macro (on .m file)
// CalendarManager.h
#import "RCTBridgeModule.h"
@interface CalendarManager : NSObject <RCTBridgeModule>
@end
1. Implement RCTBridgeModule protocol (on .h file)
13. Native Modules on iOS
Expose method
// CalendarManager.m
RCT_EXPORT_METHOD
( addEvent:(NSString *)name location:(NSString *)location )
{
RCTLogInfo(@"Pretending to create an event %@ at %@", name,
location);
}
Implement RCT_EXPORT_METHOD() macro (on .m file)
import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarManager;
CalendarManager.addEvent('Hackathon Party', 'Pier 01, BCN');
Use it on Javascript, same name up to first colon
14. Native Modules on iOS
Expose method with custom name
Several methods starting with same name?
RCT_REMAP_METHOD
( methodName, prop1:(float)prop1 prop2:(NSString *)prop2 ...)
{
// Do some stuff
}
Use RCT_REMAP_METHOD() macro (on .m file)
Only 2
arguments!!!
15. Native Modules on iOS
Supported arguments
string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) of any types from this list
object (NSDictionary) with string keys and values of any type from this list
function (RCTResponseSenderBlock)
¿More formats? - Check RCTConvert
16. Native Modules on iOS
Example with NSDictionary
// CalendarManager.m
RCT_EXPORT_METHOD
( addEvent:(NSString *)name details:(NSDictionary *)details ){
NSString *location = [RCTConvert NSString:details[@"location"]];
NSDate *time = [RCTConvert NSDate:details[@"time"]];
...
}
//JS
CalendarManager.addEvent('Birthday Party',
{
location: '4 Privet Drive, Surrey',
time: date.getTime(),
description: '...'
})
Getting data on iOS
Sending data from JS
17. Native Modules on iOS
Promises
// CalendarManager.m
RCT_REMAP_METHOD
( asyncMethod, resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject )
{
//...some stuff…
resolve(@"some data");
//reject(@"no_events", @"There were no events", error);
}
Use RCT_REMAP_METHOD() macro (on .m file)
CalendarManager.asyncMethod().then( ()=>{console.log(‘success’)}, ... )
It simply returns a promise, use it as usual
18. Native Modules on iOS
Other stuff
Exporting constants
Callbacks
Threading
Sending events to JS
Swift
You’ll find more info at: https://facebook.github.io/react-native/docs/native-modules-ios.html
19. iOS
1. Implement RCTBridgeModule
2. Use RCT_MODULE_EXPORT()
3. Method: Use RCT_EXPORT_METHOD()
4. Promises: Use RCT_REMAP_METHOD() with
RCTPromiseResolveBlock
Native Modules on iOS
CheatSeet
You’ll find more info at: https://facebook.github.io/react-native/docs/native-modules-ios.html
JS
1. Import NativeModules from ‘react-native’
2. Use NativeModules.YourModule
21. Native Modules on Android
Create module
1. Extend ReactContextBaseJavaModule on native Java file
2. Implement String getName() method with module name
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
public class ToastModule extendsReactContextBaseJavaModule {
private static final String DURATION_SHORT_KEY ="SHORT";
private static final String DURATION_LONG_KEY ="LONG";
public ToastModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "ToastAndroid";
}
}
22. Native Modules on Android
Expose constants and methods
1. Override Map<Strings, Object> getConstants() with defined constants
(optional)
2. Annotate available methods with @ReactMethod
...
public class ToastModule extends ReactContextBaseJavaModule {
...
@Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants =new HashMap<>();
constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
return constants;
}
@ReactMethod
public void show(String message, int duration) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
}
23. Native Modules on Android
Supported arguments
string (String)
number (Integer, Float, Double)
boolean (Boolean)
array (ReadableArray) of any types from this list
object (ReadableMap) with string keys and values of any type from this list
function (Callback)
24. Native Modules on Android
Register the Module
1. Add module to createNativeModules in app package
class AnExampleReactPackage implementsReactPackage {
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules =new ArrayList<>();
modules.add(new ToastModule(reactContext));
return modules;
}
25. Native Modules on Android
Register the Module
2. Add application package to MainActivity.java
Calling it from JS:
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new AnExampleReactPackage()); // <-- Add this line with your package name.
}
import ToastAndroid from './ToastAndroid';
ToastAndroid.show('Awesome', ToastAndroid.SHORT);
30. Native Modules on Android
Other stuff
Threading
Sending events to JS
Getting activity results
Listening to LifeCycle events
You’ll find more info at:
https://facebook.github.io/react-native/docs/native-modules-android.html
33. // MyViewManager.h
#import "MyView.h"
#import "RCTViewManager.h"
@interface RCTMapManager :
RCTViewManager
@end
Basics
Native Components on iOS
- (UIView *)view
{
return [[MyView alloc] init];
}
2 . Implement method - (UIView *) view in MyViewManager.m
1. Subclass RCTViewManager and export it with RCT_EXPORT_METHOD()
Consider we already have an iOS custom view, for example, MyView
// MyViewManager.m
#import
"MyViewManager.h"
@implementation RCTMapManager
RCT_EXPORT_MODULE()
@end
34. Native Components on iOS
Use view from JS
// components/myView.js
import { requireNativeComponent } from 'react-native';
// requireNativeComponent automatically resolves this to
"RCTMapManager"
export default requireNativeComponent('MyView', null);
Export component in JS file
// app.js
import MyView from './components/myView';
// ...some stuff…
render(){return (
<MyView />
);}
Use it as any other component
36. Component Input properties
Native Components on iOS
// components/myView.js
import React, { Component, PropTypes } from 'react';
import { requireNativeComponent } from 'react-native';
class MyWrapperView extends Component {
render() {
return <MyView {...this.props} />;
}
}
MyWrapperView.propTypes = {
enabled: PropTypes.bool,
};
var MyView = requireNativeComponent('MyView', MyWrapperView);
export default MyWrapperView;
2 . Document the interface in JS with React PropTypes
37. Component Input properties
Native Components on iOS
Want to do something complex (call method on prop update, …)?
- Use RCT_CUSTOM_VIEW_PROPERTY
Want to relate with IBOutlet element (UILabel.text)?
- Use custom setter on Obj-C View
Types allowed?
- string, number, boolean, object, array of any of those
More info at https://facebook.github.io/react-native/docs/native-components-ios.html
38. Component Events
// MyView.h
@class MyView
@protocol MyViewDelegate <NSObject>
- (void) someMethod:(MyView*)view;
@end
@interface MyView : UIView
@property (weak, nonatomic)id <UserInputDelegate> delegate;
@end
Native Components on iOS
1. Create a delegate of MyView, with the method that launch the event
39. Component Events
Native Components on iOS
// MyViewManager
@interface MyViewManager : UIView<MyViewDelegate>
//...stuff
@implementation MyViewManager
- (void) someMethod:(MyView*)view{
/*...some stuff…*/
//send event to component
view.onSomething( @{ @"someData":@"someValue" } );
}
@end
2. Update ViewManager to implement the view delegate, and
return a dictionary in the event callback
41. // MyView.h
@property(nonatomic, copy) RCTBubblingEventBlock onSomething;
Component Events
Native Components on iOS
5. Declare same RTCBubblingEventBlock property on view
6. Set event function in component wrapper
// components/myView.js
class MyWrapperView extends Component {
constructor(props) {
super(props);
this._onSomething = this._onSomething.bind(this);
}
_onSomething(event){
if (!this.props.onSomething) {return;}
this.props.onSomething(event.nativeEvent.someData);
}
42. Component Events
Native Components on iOS
7. Use event function in component wrapper
// components/myView.js
class MyWrapperView extends Component {
// ...stuff…
_onSomething(event){/* ...stuff…*/}
render() {
return <MyView {...this.props} onSomething={this._onSomething} />;
}
}
8. Add event callback property to PropTypes
// components/myView.js
MyWrapperView.propTypes = {
enabled: PropTypes.bool,
onSomething: PropTypes.func
}
43. Component Events
Native Components on iOS
9. Finally, use the component event as usual
// app.js
import React, { Component } from "react";
import MyView from "./components/myView.js";
class App extends Component {
// ...stuff…
doSomething(data){
console.log(data)
}
render() {
return <MyView enabled=true onSomething={this.doSomething} />;
}
}
44. iOS
1. Subclass RCTViewManager
2. Use RCT_MODULE_EXPORT()
3. Implement -(UIView*) view method
4. Property: Use RCT_EXPORT_VIEW_PROPERTY()
5. Events:
a. Set ViewManager as View delegate
b. Export callback as RCTBubblingEventBlock
Native Components on iOS
CheatSeet
You’ll find more info at: https://facebook.github.io/react-native/docs/native-modules-ios.html
45. Native Components on iOS
CheatSeet
JS
1. Import requireNativeComponent from ‘react-native’
2. Create ViewWrapper with propTypes
3. Implement event callback
4. Get NativeView with requireNativeComponent('MyView',
ViewWrapper);
5. Export ViewWrapper
You’ll find more info at: https://facebook.github.io/react-native/docs/native-modules-ios.html
53. Hands on mode
Idea
Greeting message
First name
Last name
Submit
React Component with user field
- Display a greeting message
- Uses native module to
build
random greeting messages
Native Component
- Get firstName / lastName props
- Send event with updated fields