feat: expose Rive RendererType to choose renderer

RNRiveRendererType.swift

@@ -0,0 +1,35 @@
+//
+//  RNRiveRendererType.swift
+//  rive-react-native
+//
+//  Created by Peter G Hayes on 31/05/2024.
+//
+
+import Foundation
+import RiveRuntime
+
+enum RNRiveRendererType: String {
+    case Rive = "riveRenderer"
+    case Skia = "skiaRenderer"
+    case CoreGraphics = "cgRenderer"
+
+    static func mapToRNRiveRendererType(value: String) -> RNRiveRendererType {
+        if let rnEnum = RNRiveRendererType(rawValue: value) {
+            return rnEnum
+        } else {
+            fatalError("Unsupported renderer type: \(value)")
+        }
+    }
+
+    static func mapToRendererType(rnRendererType: RNRiveRendererType) -> RendererType {
+        switch rnRendererType {
+        case .Rive:
+            return RendererType.riveRenderer
+        case .Skia:
+            return RendererType.skiaRenderer
+        case .CoreGraphics:
+            return RendererType.cgRenderer
+        }
+    }
+}
+

RiveReactNativeRendererModule.swift

@@ -0,0 +1,24 @@
+//
+//  RiveReactNativeRendererModule.swift
+//  rive-react-native
+//
+//  Created by Peter G Hayes on 31/05/2024.
+//
+
+import Foundation
+import RiveRuntime
+
+@objc(RiveReactNativeRendererModule)
+class RiveReactNativeRendererModule: NSObject {
+
+    @objc(defaultRenderer:androidRenderer:)
+    func defaultRenderer(_ iosRenderer: String, androidRenderer: String) -> Void {
+        let rnRendererType = RNRiveRendererType.mapToRNRiveRendererType(value: iosRenderer)
+        RenderContextManager.shared().defaultRenderer = RNRiveRendererType.mapToRendererType(rnRendererType: rnRendererType)
+    }
+    // Required to register the module with React Native
+    @objc static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+
+}

RiveReactNativeRendererModuleBridge.m

@@ -0,0 +1,14 @@
+//
+//  RiveReactNativeRendererModuleBridge.m
+//  rive-react-native
+//
+//  Created by Peter G Hayes on 31/05/2024.
+//
+
+#import <React/RCTBridgeModule.h>
+
+@interface RCT_EXTERN_MODULE(RiveReactNativeRendererModule, NSObject)
+
+RCT_EXTERN_METHOD(defaultRenderer:(NSString *)iosRenderer androidRenderer:(NSString *)androidRenderer)
+
+@end

android/src/main/java/com/rivereactnative/RNRiveRendererType.kt

@@ -0,0 +1,28 @@
+package com.rivereactnative
+
+import app.rive.runtime.kotlin.core.RendererType
+
+enum class RNRiveRendererType(private val rendererTypeName: String) {
+  Rive("riveRenderer"),
+  Skia("skiaRenderer"),
+  Canvas("canvasRenderer");
+
+  override fun toString(): String {
+    return rendererTypeName
+  }
+
+  companion object {
+    fun mapToRNRiveRendererType(rendererType: String): RNRiveRendererType {
+      return values().first { it.rendererTypeName == rendererType }
+    }
+
+    fun mapToRiveRendererType(rnRendererType: RNRiveRendererType): RendererType {
+      return when (rnRendererType) {
+        Rive -> RendererType.Rive
+        Skia -> RendererType.Skia
+        Canvas -> RendererType.Canvas
+      }
+    }
+  }
+}
+

android/src/main/java/com/rivereactnative/RiveReactNativePackage.kt

@@ -7,9 +7,9 @@ import com.facebook.react.uimanager.ViewManager
 
 
 class RiveReactNativePackage : ReactPackage {
-    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-        return emptyList()
-    }
+  override fun createNativeModules(
+    reactContext: ReactApplicationContext
+  ): MutableList<NativeModule> = listOf(RiveReactNativeRendererModule(reactContext)).toMutableList()
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
         return listOf(RiveReactNativeViewManager())

android/src/main/java/com/rivereactnative/RiveReactNativeRendererModule.kt

@@ -0,0 +1,16 @@
+package com.rivereactnative
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import app.rive.runtime.kotlin.core.Rive
+
+class RiveReactNativeRendererModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+  override fun getName() = "RiveReactNativeRendererModule"
+
+  @ReactMethod fun defaultRenderer(iosRenderer: String, androidRenderer: String) {
+    val rnRendererType = RNRiveRendererType.mapToRNRiveRendererType(androidRenderer);
+    val rendererType = RNRiveRendererType.mapToRiveRendererType(rnRendererType);
+    Rive.init(reactApplicationContext, defaultRenderer = rendererType)
+  }
+}

example/index.tsx

@@ -1,5 +1,5 @@
 import { AppRegistry } from 'react-native';
-import App from './src/App';
 import { name as appName } from './app.json';
+import Main from './src/App';
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => Main);

example/src/App.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { NavigationContainer } from '@react-navigation/native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -17,9 +17,34 @@ import DynamicText from './DynamicText';
 import NestedInputs from './NestedInputs';
 import Events from './Events';
 
+import {
+  RiveRenderer,
+  RiveRendererAndroid,
+  RiveRendererIOS,
+} from 'rive-react-native';
+
 const Stack = createStackNavigator();
 
-export default function App() {
+export default function Main() {
+  // Configure the defualt renderer to use for both iOS and Android.
+  // For more information: https://rive.app/community/doc/overview/docD20dU9Rod
+  //
+  // This is optional. The current defaults are:
+  // - iOS: Skia
+  // - Android: Skia
+  // In the future the default will be the Rive Renderer (RiveRendererIOS.Rive and RiveRendererAndroid.Rive)
+  //
+  useEffect(() => {
+    RiveRenderer.defaultRenderer(
+      RiveRendererIOS.Rive,
+      RiveRendererAndroid.Skia
+    );
+  }, []);
+
+  return <App />;
+}
+
+function App() {
   return (
     <SafeAreaProvider>
       <NavigationContainer>

src/Rive.tsx

@@ -10,6 +10,7 @@ import {
   TouchableWithoutFeedback,
   GestureResponderEvent,
   StyleProp,
+  NativeModules,
 } from 'react-native';
 import {
   RiveRef,
@@ -19,11 +20,17 @@ import {
   ViewManagerMethod,
   RiveGeneralEvent,
   RiveOpenUrlEvent,
+  RiveRendererInterface,
 } from './types';
 import { convertErrorFromNativeToRN, XOR } from './helpers';
 
 import { Alignment, Fit } from './types';
 
+const { RiveReactNativeRendererModule } = NativeModules;
+
+export const RiveRenderer =
+  RiveReactNativeRendererModule as RiveRendererInterface;
+
 type RiveProps = {
   onPlay?: (
     event: NativeSyntheticEvent<{

src/index.tsx

@@ -1,4 +1,6 @@
 export * from './types';
-import Rive from './Rive';
+import Rive, { RiveRenderer } from './Rive';
+
+export { RiveRenderer };
 
 export default Rive;

src/types.ts

@@ -67,6 +67,18 @@ export enum Direction {
   Forwards = 'forwards',
 }
 
+export enum RiveRendererIOS {
+  Rive = 'riveRenderer',
+  Skia = 'skiaRenderer',
+  CoreGraphics = 'cgRenderer',
+}
+
+export enum RiveRendererAndroid {
+  Rive = 'riveRenderer',
+  Skia = 'skiaRenderer',
+  Canvas = 'canvasRenderer',
+}
+
 export enum RNRiveErrorType {
   FileNotFound = 'FileNotFound',
   UnsupportedRuntimeVersion = 'UnsupportedRuntimeVersion',
@@ -101,3 +113,10 @@ export interface RiveOpenUrlEvent extends RiveEvent {
   url?: string;
   target?: string;
 }
+
+export interface RiveRendererInterface {
+  defaultRenderer(
+    iosRenderer: RiveRendererIOS,
+    androidRenderer: RiveRendererAndroid
+  ): void;
+}