Native Modules & UI Components in React Native

ReactNative Meetup Talk: https://www.meetup.com/de-DE/ReactNative-Hamburg

Transcript

1. Native Modules & UI Components in React Native The native in React Native React Native Meetup HH - 2017 - Enes Kaya 1
2. Why Bother? —Bunch of react-native-* components —5552 as of now (via npmjs.com) —Big Community and monthly update cycle —Steadily growing React Native Meetup HH - 2017 - Enes Kaya 2
3. Why Bother? —Understand how RN works ✔ —New APIs introduced at WWDC/Google I/O ✔ —Contribute to Community ✔ —Bring your own codebase ✔ React Native Meetup HH - 2017 - Enes Kaya 3
4. Objective-C Primer React Native Meetup HH - 2017 - Enes Kaya 4
5. What's Objective-C? —Superset of C —Object/Protocol-Oriented Language inspired by Smalltalk —Extended by Foundation Framework (NS*) React Native Meetup HH - 2017 - Enes Kaya 5
6. (Usually) Two files per class // ------- Class.h ------- // The class definition #import "SomeModule.h" @interface Class : NSObject <Protocol> @property NSString* aProperty; - (void) example:(id)a method:(id)b; @end // ------- Class.m ------- @implementation Class - (void) example:(id)a method:(id)b { //... } @end React Native Meetup HH - 2017 - Enes Kaya 6
7. Strings NSString* myString = @"I'm a string, yo!"; React Native Meetup HH - 2017 - Enes Kaya 7
8. Calling methods NSString* myString = @"I'm a string, yo!"; NSString* myCapitalizedString; myCapitalizedString = [myString capitalizedString]; React Native Meetup HH - 2017 - Enes Kaya 8
9. Native Modules React Native Meetup HH - 2017 - Enes Kaya 9
10. The Bridge Architecture —shadow queue - Layouting1 —main thread - UIKit, view rendering —JavaScript Core - Business logic 1 Not a thread actually, instead a GCD queue (on iOS) React Native Meetup HH - 2017 - Enes Kaya 10
11. // Logger.h @interface Logger : NSObject <RCTBridgeModule> @end // Logger.m @implementation Logger RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(greet:(NSString *)name) { NSLog(@"Hi, %@!", name); [_bridge.eventDispatcher sendAppEventWithName:@"greeted" body:@{ @"name": name }]; } @end React Native Meetup HH - 2017 - Enes Kaya 11
12. // Logger.h @interface Logger : NSObject <RCTBridgeModule> @end // Logger.m @implementation Logger RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(greet:(NSString *)name) { NSLog(@"Hi, %@!", name); [_bridge.eventDispatcher sendAppEventWithName:@"greeted" body:@{ @"name": name }]; } @end React Native Meetup HH - 2017 - Enes Kaya 12
13. // Logger.h @interface Logger : NSObject <RCTBridgeModule> @end // Logger.m @implementation Logger RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(greet:(NSString *)name) { NSLog(@"Hi, %@!", name); [_bridge.eventDispatcher sendAppEventWithName:@"greeted" body:@{ @"name": name }]; } @end React Native Meetup HH - 2017 - Enes Kaya 13
14. // Logger.h @interface Logger : NSObject <RCTBridgeModule> @end // Logger.m @implementation Logger RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(greet:(NSString *)name) { NSLog(@"Hi, %@!", name); [_bridge.eventDispatcher sendAppEventWithName:@"greeted" body:@{ @"name": name }]; } @end React Native Meetup HH - 2017 - Enes Kaya 14
15. // Logger.java class Logger extends ReactContextBaseJavaModule { @Override public String getName() { return "Logger"; } @ReactMethod public void greet(String name) { Log.d("Logger", "Hi, " + name + "!"); } } React Native Meetup HH - 2017 - Enes Kaya 15
16. // Logger.java class Logger extends ReactContextBaseJavaModule { @Override public String getName() { return "Logger"; } @ReactMethod public void greet(String name) { Log.d("Logger", "Hi, " + name + "!"); } } React Native Meetup HH - 2017 - Enes Kaya 16
17. // Logger.java class Logger extends ReactContextBaseJavaModule { @Override public String getName() { return "Logger"; } @ReactMethod public void greet(String name) { Log.d("Logger", "Hi, " + name + "!"); } } React Native Meetup HH - 2017 - Enes Kaya 17
18. Argument Types JS Objective-C Java String NSString String Number NSNumber, Float, Double, ... Integer, Float, Double, ... Bool BOOL boolean Object NSDictionary ReadableMap Array NSArray ReadableArray function RCTResponseSenderBlock Callback React Native Meetup HH - 2017 - Enes Kaya 18
19. import { NativeModules } from 'react-native' const Logger = NativeModules.Logger Logger.greet("ReactNativeHH") // => Hi, ReactNativeHH! React Native Meetup HH - 2017 - Enes Kaya 19
20. Callbacks RCT_EXPORT_METHOD(greet:(NSString*) name callback:(RCTResponseSenderBlock) callback) { NSLog(...); // Do more stuff... callback(@[argument1, argument2, ...]); } React Native Meetup HH - 2017 - Enes Kaya 20
21. Callbacks RCT_EXPORT_METHOD(greet:(NSString*) name callback:(RCTResponseSenderBlock) callback) { NSLog(...); // Do more stuff... callback(@[argument1, argument2, ...]); } React Native Meetup HH - 2017 - Enes Kaya 21
22. Callbacks import { NativeModules } from 'react-native' const Logger = NativeModules.Logger Logger.greet( "ReactNativeHH", (argument1, argument2, ...) => { // Do something... } ) React Native Meetup HH - 2017 - Enes Kaya 22
23. Callbacks import { NativeModules } from 'react-native' const Logger = NativeModules.Logger Logger.greet( "ReactNativeHH", (argument1, argument2, ...) => { // Do something... } ) React Native Meetup HH - 2017 - Enes Kaya 23
24. Keep Your Promises (Experimental) RCT_REMAP_METHOD(findEvents, findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { NSArray *events = ... if (events) { resolve(events); } else { NSError *error = ... reject(@"no_events", @"There were no events", error); } } React Native Meetup HH - 2017 - Enes Kaya 24
25. Keep Your Promises (Experimental) RCT_REMAP_METHOD(findEvents, findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { NSArray *events = ... if (events) { resolve(events); } else { NSError *error = ... reject(@"no_events", @"There were no events", error); } } React Native Meetup HH - 2017 - Enes Kaya 25
26. Keep Your Promises (Experimental) RCT_REMAP_METHOD(findEvents, findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { NSArray *events = ... if (events) { resolve(events); } else { NSError *error = ... reject(@"no_events", @"There were no events", error); } } React Native Meetup HH - 2017 - Enes Kaya 26
27. Events // CalendarManager.h #import <React/RCTBridgeModule.h> #import <React/RCTEventEmitter.h> @interface CalendarManager : RCTEventEmitter <RCTBridgeModule> @end React Native Meetup HH - 2017 - Enes Kaya 27
28. Events // CalendarManager.m #import "CalendarManager.h" @implementation CalendarManager RCT_EXPORT_MODULE(); - (NSArray<NSString *> *)supportedEvents { return @[@"EventReminder"]; } - (void)calendarEventReminderReceived:(NSNotification *)notification { NSString *eventName = notification.userInfo[@"name"]; [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}]; } @end React Native Meetup HH - 2017 - Enes Kaya 28
29. Events // CalendarManager.m #import "CalendarManager.h" @implementation CalendarManager RCT_EXPORT_MODULE(); - (NSArray<NSString *> *)supportedEvents { return @[@"EventReminder"]; } - (void)calendarEventReminderReceived:(NSNotification *)notification { NSString *eventName = notification.userInfo[@"name"]; [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}]; } @end React Native Meetup HH - 2017 - Enes Kaya 29
30. Events // CalendarManager.m #import "CalendarManager.h" @implementation CalendarManager RCT_EXPORT_MODULE(); - (NSArray<NSString *> *)supportedEvents { return @[@"EventReminder"]; } - (void)calendarEventReminderReceived:(NSNotification *)notification { NSString *eventName = notification.userInfo[@"name"]; [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}]; } @end React Native Meetup HH - 2017 - Enes Kaya 30
31. React Native Meetup HH - 2017 - Enes Kaya 31
32. Native UI Components React Native Meetup HH - 2017 - Enes Kaya 32
33. React Native has several of the most critical platform components [...], but not all of them [...] — RN Documentation React Native Meetup HH - 2017 - Enes Kaya 33
34. // RNTMapManager.m #import <MapKit/MapKit.h> #import <React/RCTViewManager.h> @interface RNTMapManager : RCTViewManager @end @implementation RNTMapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } @end React Native Meetup HH - 2017 - Enes Kaya 34
35. // RNTMapManager.m #import <MapKit/MapKit.h> #import <React/RCTViewManager.h> @interface RNTMapManager : RCTViewManager @end @implementation RNTMapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } @end React Native Meetup HH - 2017 - Enes Kaya 35
36. // RNTMapManager.m #import <MapKit/MapKit.h> #import <React/RCTViewManager.h> @interface RNTMapManager : RCTViewManager @end @implementation RNTMapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } @end React Native Meetup HH - 2017 - Enes Kaya 36
37. To be continued this year at codetalks ! React Native Meetup HH - 2017 - Enes Kaya 37
38. Thank you Enes Kaya, @eneskaya React Native Meetup HH - 2017 - Enes Kaya 38