Choose a Renderer Overview

​

Starting Version

The Rive Renderer was made the default renderer in Apple runtimes starting at v6.0.0, however, we recommend installing the latest version of the dependency to get the latest updates. See the CHANGELOG for details on the latest versions.

​

Performance

The Rive Renderer will shine best on Apple runtimes in memory usage as an animation plays out, in comparison to previous default renderers.

With UIKit, you’ll be able to see the best performance differences by drawing multiple times on a single RiveView, rather than creating multiple instances of RiveViews, or multiple RiveViewModels.

Example: See this stress test example to see how you can override the drawing function on RiveView to draw multiple times on the same view, with each graphic at an offset. You can switch out the renderer with the above config and test out the performance for yourself!

​

Starting Version

The Rive Renderer was made the default in the Android runtime starting with v10.0.0. However, we recommend installing the latest version of the dependency to get the latest updates. See the CHANGELOG for details on the latest versions.

​

Starting Version

The Rive Renderer was introduced in the Web (JS)/WASM runtime starting at v2.11.1 with the following new packages:

• @rive-app/webgl2
• @rive-app/webgl2-advanced

However, we recommend installing the latest version of the dependency to get the latest updates.

These packages do not bundle any heavy rendering dependencies such as Skia, which makes the package size much smaller than that of the existing @rive-app/webgl package.

​

Enabling the Draft Extension

Currently, the Rive Renderer on web relies on a WebGL2 extension that is currently in progress being implemented across all major browsers. To try out the Rive Renderer today, you can do so on Google Chrome. Simply enable WebGL draft extensions on Chrome and restart the browser.

Once the extension is enabled, you must use the @rive-app/webgl2 package (introduced with v2.11.1) to use the Rive Renderer by default. If you do not have the draft extensions enabled or you are using a different browser, the package will fallback to an MSAA solution still using a WebGL2 context to back the <canvas> element.

The API usage does not change in comparison to using any of the other Web (JS)/WASM runtimes.

​

Starting Version

The option to easily configure a default renderer was introduced in v7.1.0. For React Native, the default renderer needs to be set for both iOS and Android.

Options:

• Apple: Rive (default), and CoreGraphics
• Android: Rive (default), Canvas

See the Apple and Android sections for additional information on renderers and fallbacks.

​

Getting Started

Options: Rive (default) / Core Graphics / Skia (deprecated in v6.0.0)

Below are some notes on configuring the renderer in UIKit and SwiftUI.

​

UIKit

Set the global renderer type during your application launch:

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true
    }

    ...
}

​

SwiftUI

New SwiftUI applications launch with the App protocol, but you can still add UIApplicationDelegate functionality.

​

iOS

Create a new file and class called AppDelegate as such, including a line to set the defaultRenderer to RendererType.riveRenderer:

import UIKit
import Foundation
import RiveRuntime

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true
    }
}

Next, at the entry point of your application, use UIApplicationDelegateAdaptor to set the AppDelegate created above for the application delegate.

@main
struct MyRiveRendererApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

​

macOS

Create a new file and class called AppDelegate as such, including a line to set the defaultRenderer to RendererType.riveRenderer:

import Foundation
import RiveRuntime

class AppDelegate: NSObject, NSApplicationDelegate {
    func application(_ application: NSApplication, applicationDidFinishLaunching notification: Notification) -> Bool {
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true

Next, at the entry point of your application, use UIApplicationDelegateAdaptor to set the AppDelegate created above for the application delegate.

@main
struct MyRiveRendererApp: App {
    @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

​

Getting Started

Options: Rive (default) / Canvas / Skia (removed in v10.0.0)

Specify the renderer target in XML:

<app.rive.runtime.kotlin.RiveAnimationView
app:riveRenderer="Rive"
… />

Alternatively, when initializing Rive:

Rive.init(applicationContext, defaultRenderer = RendererType.Rive)

The @rive-app/webgl2 and @rive-app/webgl2-advanced packages only use the Rive renderer, so there is no configuration needed to use it by default.

To get started, see the section above about enabling draft extensions.

For React Native, the default renderer needs to be set for both iOS and Android, using RiveRenderer.defaultRenderer and passing in an Enum for RiveRendererIOS and RiveRendererAndroid.

• iOS options: Rive (default) / CoreGraphics
• Android options: Rive (default) / Canvas

export default function Main() {
useEffect(() => {
    RiveRenderer.defaultRenderer(
    RiveRendererIOS.Rive,
    RiveRendererAndroid.Rive
    );
}, []);

return <App />;
}