Lars Melchior

Expanding The Boundaries Of React-Native With C++

Going from a cross-platform graphical C++ app to a full-scale mobile application Maphi

Maphi Platform Rapid Fast Native UI Long-Term agnostic development

Cocoa Touch X O Swift / Obj C ✓ ✓ ✓ Android SDK X O Java / Kotlin ✓ ✓ ✓ Ionic X O X JavaScript ✓ ✓

React Native X O X JavaScript ✓ ✓ Flutter O X X Dart ✓ ✓ Bare Metal X X C++ / OpenGL ✓ ✓ ✓ Platform Rapid Fast Native UI Long-Term agnostic development

Cocoa Touch X O Swift / Obj C ✓ ✓ ✓ Android SDK X O Java / Kotlin ✓ ✓ ✓ Ionic X O X JavaScript ✓ ✓

React Native X O X JavaScript ✓ ✓ Flutter O X X Dart ✓ ✓ Bare Metal X X C++ / OpenGL ✓ ✓ ✓ Project Structure

JavaScript SDL React Native Mobile UI C Desktop UI

Lua via TypeScript Interactive Mathematics

Gesture recogniser Renderer Algebra System C++ OpenGL Linear algebra Fonts Pattern matching Parser C++ Dependency Management

Install (apt-get, dnf, brew, …) Package managers (Conan, vcpkg, Hunter, etc) Not reproducible Dependencies must be not cross-platform packaged / registered Add source code explicitly Version freezing adds extra Difficult to update and maintain complexity Git submodules CMake Breaks transitive dependencies Verbose Dependency Management package.json JavaScript npm / yarn Dependency Management

CMakeLists.txt JavaScript cmake_minimum_required(VERSION 2.6) npm / yarn project(Foo) # Library sources C++

# find package Foo CMake find_package(Foo REQUIRED) find_package # add binary FindFoo.cmake? add_executable(bar bar.cpp)

# add library conan / vcpkg? target_link_libraries(bar Foo) Version? # install install( TARGETS bar Cross-compiling? RUNTIME DESTINATION bin COMPONENT "${INSTALL_BIN_DIR}" ) Dependency Management

CMakeLists.txt JavaScript cmake_minimum_required(VERSION 2.6) npm / yarn project(Foo) # Library sources C++ include(cmake/CPM.cmake) CPMAddPackage( NAME Foo CMake GITHUB_REPOSITORY TheLartians/Foo VERSION 1.1 CPM ) # add binary add_executable(bar bar.cpp)

# add library target_link_libraries(bar Foo)

# install install( TARGETS bar RUNTIME DESTINATION bin COMPONENT "${INSTALL_BIN_DIR}" https://github.com/TheLartians/CPM.cmake ) Platform-specific considerations

iOS Resource path determined by OS [[NSBundle mainBundle] resourcePath] Certain C++17 features won’t compile for old iOS versions

main.cpp:27:5: Call to unavailable function 'visit': introduced in iOS 12

main.cpp:27:5: Call to unavailable function ‘get': introduced in iOS 12 Platform-specific considerations

iOS Resource path determined by OS [[NSBundle mainBundle] resourcePath] Certain C++17 features won’t compile for old iOS versions

Android OpenGL can loose context anytime Java garbage collection runs on dedicated thread No file handle to resources Handling resources

Let build system handle resources Write a platform-dependent resource manager

class Resource { public: virtual std::unique_ptr stream() const = 0; virtual ~Resource() {} };

std::shared_ptr loadResource(std::string name); DEMO DEMO

CPM Glue TypeScript Widgets React Native

JavaScript Layout engine Platform UI (Java) (C++) (Objective C)

JSON Hooking up C++ with iOS

Objective C++ C++ Cocoa Touch

auto getCLIArguments() { std::vector arguments; for (NSString *string in [[NSProcessInfo processInfo] arguments]) { arguments.emplace_back([string UTF8String]); } return arguments; } Hooking up C++ with Android

JavaCPP C++ Java Android SDK

@Namespace("maphi") @Name(“Any") public static class GlueAny extends Pointer { ... @Name(“get>") public native @ByVal GlueMap asGlueMap(); ... } Hooking up with React Native Hooking up with React Native Create new views

iOS

- (UIView *) view { return [MaphiView new]; }

Android

override fun createViewInstance(reactContext: ThemedReactContext): MaphiView { return MaphiView() } Hooking up with React Native Passing properties iOS

RCT_EXPORT_VIEW_PROPERTY(expression, NSString *) –––––––––––––––––––––––––––––––––––– - (void) setInitialExpression: (NSString *)expression { updateProperty("expression", std::string([expression UTF8String])); } Android

@ReactProp(name = "expression") fun setExpression(view: MaphiView, expression: String) { view.setProperty("expression", expression) } Hooking up with React Native Passing callbacks iOS

@property (nonatomic, copy) RCTBubblingEventBlock onExpressionChanged; –––––––––––––––––––––––––––––––––––– RCT_EXPORT_VIEW_PROPERTY(onPresentQuiz, RCTBubblingEventBlock) Android

override fun getExportedCustomBubblingEventTypeConstants(): MutableMap? { return MapBuilder.builder() .put( "onExpressionChanged", MapBuilder.of( "phasedRegistrationNames", MapBuilder.of("bubbled", “onExpressionChanged”))) ... DEMO Summary and Outlook

Platform App Core React Native Support

Objective C C++ JavaScript Java Summary and Outlook

Platform App Core React Native React Native Support Core

C++ Objective C C++ JavaScript Objective C Java Java Summary and Outlook

App Core React Native React Native Core

C++ C++ JavaScript Objective C Java Outlook

App Core React Native React Native Core

C++ C++ Objective C JavaScript Java JavaScript Interface (JSI)

auto SampleCxxModule::getMethods() -> std::vector { return { Method( “addIfPositiveAsPromise", [](dynamic args, Callback cb, Callback cbError) { auto a = jsArgAsDouble(args, 0); auto b = jsArgAsDouble(args, 1); if (a < 0 || b < 0) { cbError({"Negative number!"}); TurboModules } else { cb({a + b}); Coming Soon ! } } ) }; } Q&A github.com/TheLartians linkedin.com/in/lars-melchior @LarsMelchior_ www.maphi.app