Rive

@nativescript/rive #

Rive for NativeScript

npm install @nativescript/rive

Usage #

You can configure both iOS and Android for Rive usage.

iOS #

For iOS, configure your nativescript.config.ts to use the Swift Package:

ios: {
    SPMPackages: [
        {
            name: 'RiveRuntime',
            libs: ['RiveRuntime'],
            repositoryURL: 'https://github.com/rive-app/rive-ios.git',
            version: '5.7.0',
        },
    ],
},

Swift Package version note #

If you encounter a build error related to a specified version as follows:

xcodebuild: error: Could not resolve package dependencies:
  Dependencies could not be resolved because no versions of 'rive-ios' match the requirement 5.1.12..<6.0.0 and root depends on 'rive-ios' 5.1.12..<6.0.0.

You can use the base major version, 5.0.0, instead of the precise version. It will still resolve the latest in the major version series.

Android #

For Android, add this provider to your AndroidManifest.xml inside the application tag:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="__PACKAGE__"
    xmlns:tools="http://schemas.android.com/tools"> <!-- You may need to add this xmlns:tools attr/value -->
    ...

    <application
        android:name="com.tns.NativeScriptApplication"
        ...>

        <!-- Add this for Rive -->
        <provider
                android:name="androidx.startup.InitializationProvider"
                android:authorities="${applicationId}.androidx-startup"
                android:exported="false"
                tools:node="merge">
            <meta-data android:name="app.rive.runtime.kotlin.RiveInitializer"
                        android:value="androidx.startup" />
        </provider>

Gradle settings #

You will need to target Android 34 or later. Add this to your app.gradle inside the android section:

android {
compileSdkVersion 34
buildToolsVersion "34.0.0"
defaultConfig {
minSdkVersion 24
targetSdkVersion 34
// ...
}

Ensure your gradle settings are setup to use Kotlin by adding a gradle.properties file (right next to your app.gradle) with the following:

useKotlin=true

RiveView #

Use RiveView:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:rive="@nativescript/rive">
  <GridLayout>
    <rive:RiveView
      src="~/assets/rive/icons.riv"
      width="300"
      height="300"
      autoPlay="true"
    />
  </GridLayout>
</Page>

When using flavors, you can register the element for usage in your markup:

import { RiveView } from '@nativescript/rive'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('RiveView', () => RiveView)

// Solid
import { registerElement } from 'dominative'
registerElement('riveView', RiveView)

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('riveView', () => RiveView)

// React
import { registerElement } from 'react-nativescript'
registerElement('riveView', () => RiveView)

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('RiveView', () => RiveView)

Use RiveView anywhere.

<RiveView />

Using State Machines #

You can specify the artboard, stateMachine, input along with inputValue (boolean).

<RiveView
  src="~/assets/rive/icons.riv"
  artboard="CHAT"
  stateMachine="CHAT_Interactivity"
  input="active"
  [inputValue]="inputValue"
  width="300"
  height="300"
  autoPlay="true"
/>

Triggering State Changes #

You can also trigger state changes via the RiveView instance, for example:

<RiveView src="~/assets/rive/icons.riv" (loaded)="loadedRive($event)" />

You can now use the instance to trigger state changes anytime:

let rive: RiveView
function loadedRive(args) {
  rive = args.object
  rive.triggerInputValue(name, value)
}

Troubleshooting #

When configuring your Android app for Rive you may run into the following issues. Here's some solutions.

Potential Error 1 #

Execution failed for task ':app:checkDebugDuplicateClasses'.
Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.21 (org.jetbrains.kotlin:kotlin-stdlib:1.8.21) and jetified-kotlin-stdlib-jdk8-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.21)
Duplicate class kotlin.internal.jdk7.JDK7PlatformImplementations found in modules jetified-kotlin-stdlib-1.8.21 (org.jetbrains.kotlin:kotlin-stdlib:1.8.21) and jetified-kotlin-stdlib-jdk7-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.21)

Solution

Add the following dependency constraints to the top of your app.gradle above the android section:

dependencies {
    constraints {
        implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.8.21"
        implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.21"
    }
}

Potential Error 2 #

Execution failed for task ':app:mergeDebugNativeLibs'.
2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs:
 - /Users/you/.gradle/caches/transforms-3/fed290951dd20dba6bd42d7106bb3f26/transformed/jetified-rive-android-8.1.3/jni/arm64-v8a/libc++_shared.so

Solution

Add this section to app.gradle android section:

android {
  …
  packagingOptions {
      pickFirst "lib/x86/libc++_shared.so"
      pickFirst "lib/x86_64/libc++_shared.so"
      pickFirst "lib/armeabi-v7a/libc++_shared.so"
      pickFirst "lib/arm64-v8a/libc++_shared.so"
  }
  …
}

Potential Error 3 #

This version (1.2.0-alpha05) of the Compose Compiler requires Kotlin version 1.6.10 but you appear to be using Kotlin version 1.7.10 which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).

Solution

Add a before-plugins.gradle file next to your app.gradle containing the following:

ext {
    gradlePluginVersion = "7.3.1"
    kotlinVersion = "1.6.10"
}

License #

Apache License Version 2.0