Documentation Index
Fetch the complete documentation index at: https://rive-accessibility.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
Rive makes use of various different renderers depending on platform and runtime. We’re working towards unifying the default renderer used across all platforms/runtimes with the Rive Renderer.
Renderer Options and Defaults
To use a specific renderer, see Specifying a Renderer.
The table below outlines the available, and default, renderers for Rive’s runtimes:
| Runtime | Default Renderer | Options |
|---|
| Android | Rive | Rive / Canvas / Skia (removed as of v10.0.0) |
| Apple | Rive | Rive |
| React Native | Rive | See Apple and Android |
| Web (Canvas) | Canvas2D | Canvas2D |
| Web (WebGL2) | Rive | Rive |
| Flutter | No default | Rive / Flutter (Skia / Impeller) |
Rive Renderer
The Rive Renderer is a new rendering engine designed to provide better performance and visual fidelity across all platforms. It leverages modern graphics APIs and techniques to deliver high-quality rendering for Rive graphics.
It also allows Rive to innovate with new features, such as Vector Feathering, which are only supported through the Rive Renderer. See our Feature Support page for more information.
Apple
Android
Web(JS)
React Native
Flutter
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.The Rive Renderer will shine best on Apple runtimes in memory usage as an animation plays out, in comparison to previous default renderers.The Rive renderer is the sole renderer for the Apple runtime.The renderer is multi-threaded per Worker object. This means that for each Worker object, a new thread will be created to process and render the Rive graphics.
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 package:However, we recommend installing the latest version of the dependency to get the latest updates.This package does not bundle heavy renderer dependencies such as Skia, which helps keep package size smaller.Enabling the Draft Extension
On web, enabling WebGL draft extensions in Chrome improves rendering performance with @rive-app/webgl2.Without the extension (or on browsers without support), @rive-app/webgl2 falls back to an MSAA-based WebGL2 path. We are actively working with browser vendors to make this enabled by default.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.The Rive Renderer is not yet supported on Linux through Flutter.
Starting Version
The Rive Renderer was added in version 0.14.0 of the Flutter runtime. However, we recommend installing the latest version of the dependency to get the latest updates. It’s exposed through the rive_native package, which is a dependency of the main rive package. Read up more about Rive Native here.
Specifying a Renderer
See below for runtime instructions to enable a specific renderer.
Apple
Android
Web(JS)
React Native
Flutter
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 package only uses the Rive renderer, so there is no additional 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 />;
}
When creating a Rive File or FileLoader, you need to specify a factory to use:
Factory.rive for the Rive renderer
Factory.flutter for the Flutter renderer (Skia or Impeller)
// Rive renderer
File.asset("assets/vehicles.riv", riveFactory: Factory.rive)
// Flutter renderer
File.asset("assets/vehicles.riv", riveFactory: Factory.flutter)
You can use different renderers for different graphics in your app.Some considerations when choosing a renderer:
- If you plan on showing many Rive graphics that are all drawing to different Rive widgets consider using a RivePanel with
Factory.rive to draw multiple graphics to the same texture to reduce the overhead of allocating native render targets and textures. Or make use of Factory.flutter.
- If you are showing a complex graphic, consider using
Factory.rive to take advantage of the Rive renderer’s optimizations.
- Vector Feathering is only available with
Factory.rive, so if you need that feature, use the Rive renderer.
Note on Flutter Rendering
Impeller is replacing Skia to become the default renderer for all platforms. As such, there is a possibility of rendering and performance discrepancies when using the Rive Flutter runtime with platforms that use the Impeller renderer that may not have surfaced before. If you encounter any visual or performance errors at runtime compared to expected behavior in the Rive editor, we recommend trying the following steps to triage:
- Try running the Flutter app with the
--no-enable-impeller flag to use the Skia renderer. If the visual discrepancy does not show when using Skia, it may be a rendering bug on Impeller. However, before raising a bug with the Flutter team, try the second point below👇
flutter run --no-enable-impeller
- Try running the Flutter app on the latest
master channel. It is possible that visual bugs may be resolved on the latest Flutter commits, but not yet released in the beta or stable channel.
- If you are still seeing visual discrepancies with just the Impeller renderer on the latest master branch, we recommend raising a detailed issue to the Flutter Github repo with a reproducible example, and other relevant details that can help the team debug any possible issues that may be present.