Designing and maintaining an open-source React Native library React & React Native Bordeaux 

Mathieu Acthernoene Lead front-end developer @ Swan Podcast host @ Putain de Code ! 

Maintainer of: react-native-bootsplash, react-native-localize, react-native-permissions 

React Native isn't magical 🧙 

React Native isn't magical 🧙 …The cost of cross-platform in react-native-localize 

No content

What's the bridge for? Reading sync data using constants, Calling async methods using promises or callbacks, Receiving events using event listeners 

What's the bridge for? Reading sync data using constants, Calling async methods using promises or callbacks, Receiving events using event listeners 

- (NSDictionary *)constantsToExport { return @{ @"initialTimeZone": [[NSTimeZone localTimeZone] name], }; } Objective-C TypeScript import { NativeModules } from "react-native"; const NativeModule: Readonly<{ initialTimeZone: string; }> = NativeModules.RNModuleTemplate; export const initialTimeZone = NativeModule.initialTimeZone; 

@Override public @Nullable Map getConstants() { HashMap constants = new HashMap<>(); constants.put("initialTimeZone", TimeZone.getDefault().getID()); return constants; } Java TypeScript import { NativeModules } from "react-native"; const NativeModule: Readonly<{ initialTimeZone: string; }> = NativeModules.RNModuleTemplate; export const initialTimeZone = NativeModule.initialTimeZone; 

What's the bridge for? Reading sync data using constants, Calling async methods using promises or callbacks, Receiving events using event listeners 

RCT_EXPORT_METHOD( getTimeZone:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject ) { @try { resolve([[NSTimeZone localTimeZone] name]); } @catch (NSException *exception) { reject(@"error_code", exception.reason, nil); } } import { NativeModules } from "react-native"; const NativeModule: Readonly<{ getTimeZone: () = > Promise; }> = NativeModules.RNModuleTemplate; export function getTimeZone(): Promise { return NativeModule.getTimeZone(); } Objective-C TypeScript 

No content

@ReactMethod public void getTimeZone(Promise promise) { try { promise.resolve(TimeZone.getDefault().getID()); } catch (Exception exception) { promise.reject("error_code", exception.getMessage()); } } Java import { NativeModules } from "react-native"; const NativeModule: Readonly<{ getTimeZone: () = > Promise; }> = NativeModules.RNModuleTemplate; export function getTimeZone(): Promise { return NativeModule.getTimeZone(); } TypeScript 

No content

What's the bridge for? Reading sync data using constants, Calling async methods using promises or callbacks, Receiving events using event listeners 

- (void)startObserving { [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onTimeZoneChange) name:NSSystemTimeZoneDidChangeNotification object:nil]; } - (void)stopObserving { [[NSNotificationCenter defaultCenter] removeObserver:self name:NSSystemTimeZoneDidChangeNotification object:nil]; } - (NSArray *)supportedEvents { return @[@"timeZoneChange"]; } - (void)onTimeZoneChange { [self sendEventWithName:@"timeZoneChange" body:@{ @"date": [[NSISO8601DateFormatter new] stringFromDate:[NSDate date]], @"value": [[NSTimeZone localTimeZone] name], }]; } Objective-C import { NativeEventEmitter, NativeModules } from "react-native"; const emitter = new NativeEventEmitter(NativeModules.RNModuleTemplate); type Listeners = { timeZoneChange: (body: { date: string; value: string }) = > void; }; export function addListener( type: Type, listener: Listeners[Type], ): () = > void { const subscription = emitter.addListener(type, listener); return subscription.remove; } TypeScript 

WritableMap body = Arguments.createMap(); DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ssZ", Locale.getDefault()); dateFormat.setTimeZone(TimeZone.getTimeZone("UTC")); body.putString("date", dateFormat.format(new Date())); body.putString("value", TimeZone.getDefault().getID()); getReactApplicationContext() .getJSModule(RCTDeviceEventEmitter.class) .emit("timeZoneChange", body); import { NativeEventEmitter, NativeModules } from "react-native"; const emitter = new NativeEventEmitter(NativeModules.RNModuleTemplate); type Listeners = { timeZoneChange: (body: { date: string; value: string }) = > void; }; export function addListener( type: Type, listener: Listeners[Type], ): () = > void { const subscription = emitter.addListener(type, listener); return subscription.remove; } Java TypeScript 

How to organize your module repository 

Sources github.com/zoontek/react-native-module-template - or - github.com/callstack/react-native-builder-bob 

PUBLISH 

That was the first 20% of the work 

No content

No content

No content

( This one is a joke) ( It still triggered me) 

Huge projects depend on single-maintainer dependencies 

No content

No content

Preserve yourself 

No content

My tricks to avoid open-source burnout 😌 

No content

No content

No content

No content

How it was done before github issue forms 

Don't feel bad for not dealing with everything 

No content

No content

No content

A friend 👉 Also a friend 👉 Also a friend 👉 

Don't do it for money 💸 

Know what you want to maintain Why not a PHILOSOPHY ( .md)? You think it belongs to module core You think it doesn't Consider the PR Feel free to refuse (and explain nicely why) 

Know what you want to maintain Especially in the React Native environment 

Think about: React Native updates and breaking changes iOS updates and breaking changes Android updates and breaking changes macOS updates and breaking changes Windows updates and breaking changes RNW updates and breaking changes React updates and breaking changes … 

No content

No content

Focus on one thing Let people create their own abstractions in user-land 

Embrace help 🤝 Even if they don't know the tech, people can help you (triage, linking to similar issues, asking for more details, etc.) 

🙇 Thank you! Questions? Mathieu Acthernoene Lead front-end developer @ Swan Podcast host @ Putain de Code ! 

Sources: - https://formidable.com/blog/2019/react-codegen-part-1 - https://mikemcquaid.com/2018/03/19/open-source-maintainers-owe-you-nothing/ - https://github.com/facebook/react-native/issues/23313 - https://github.com/doczjs/docz/issues/1634