Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nativescript/rive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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.0.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>

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 just 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);
}

License

Apache License Version 2.0