Quick Start

Add Rive to your app or web page in a couple of minutes

web
React
Vue
Flutter
iOS
Android
React Native
web

1. Add the Rive library

Add a script tag to a web page:

<script src="https://unpkg.com/rive-js"></script>

2. Create a canvas

Create a canvas where you want the Rive file to display:

<canvas id="canvas" width="500" height="500"></canvas>

3. Create a Rive object

Create a new instance of a Rive object, providing the url of the Rive file you wish to show, the canvas on which you want it to render, and whether you want the default animation to play.

<script>
new rive.Rive({
src: 'https://cdn.rive.app/animations/vehicles.riv',
canvas: document.getElementById('canvas'),
autoplay: true
});
</script>

Complete example

<html>
<head>
<title>Rive Hello World</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://unpkg.com/rive-js"></script>
<script>
new rive.Rive({
src: 'https://cdn.rive.app/animations/vehicles.riv',
canvas: document.getElementById('canvas'),
autoplay: true
});
</script>
</body>
</html>
React

1. Add Rive React package to package.json

package.json
{
"dependencies": {
"rive-react": "latest"
}
}

2. Import the Rive library

import Rive from 'rive-react';

3. Use the Rive component

export const Simple = () => <Rive
src="https://cdn.rive.app/animations/vehicles.riv"
/>;
Vue

The following snippet demonstrates how to create a simple Rive component in Vue 2.

<template>
<div>
<canvas ref="canvas" width="400" height="400"></canvas>
</div>
</template>
<script>
import { Rive, Layout } from 'rive-js'
export default {
name: 'Rive',
props: {
src: String,
fit: String,
alignment: String
},
mounted() {
new Rive({
canvas: this.$refs.canvas,
src: this.$props.src,
layout: new Layout({
fit: this.$props.fit,
alignment: this.$props.alignment,
}),
autoplay: true
})
}
}
</script>
Flutter

1. Add the Rive package dependency

pubspec.yaml
dependencies:
rive:

2. Import the Rive package

import 'package:rive/rive.dart';

3. Add a RiveAnimation widget

RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
)

Complete example

main.dart
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() => runApp(MaterialApp(
home: MyRiveAnimation(),
));
class MyRiveAnimation extends StatelessWidget {
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
fit: BoxFit.cover,
),
),
);
}
}
iOS

1. Add the CocoaPods dependency

Podfile
pod 'RiveRuntime', :git => '[email protected]:rive-app/test-ios.git'

2. Create a UIViewController and import runtime

import UIKit
import RiveRuntime
class RiveViewController: UIViewController {
override public func loadView() {
super.loadView()
}
}

3. Add a RiveView and a RiveFile

import UIKit
import RiveRuntime
class RiveViewController: UIViewController {
let url = "https://cdn.rive.app/animations/vehicles.riv"
override public func loadView() {
super.loadView()
let view = RiveView()
guard let riveFile = RiveFile(httpUrl: url, with: view) else {
fatalError("Unable to load RiveFile")
}
view.configure(riveFile)
self.view = view
}
}

4. Tidy up once the view is dismissed

override public func viewDidDisappear(_ animated: Bool) {
(view as! RiveView).stop()
super.viewDidDisappear(animated)
}
Android

1. Add the Rive dependency

dependencies {
implementation 'app.rive:rive-android:0.1.1'
}

2. Add RiveAnimation to your layout

<app.rive.runtime.kotlin.RiveAnimationView
android:id="@+id/my_rive_animation"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:riveUrl="https://cdn.rive.app/animations/vehicles.riv"
app:riveFit="COVER" />

3. Clean up when done

MyRiveActivity.kt
class MyRiveActivity : AppCompatActivity() {
private val animationView by lazy(LazyThreadSafetyMode.NONE) {
findViewById<RiveAnimationView>(R.id.my_rive_animation)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.my_rive)
}
override fun onDestroy() {
super.onDestroy()
animationView.destroy()
}
}

Internet permissions

This example requires your app to have permission to access the internet:

AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

This is needed only if you're retrieving Rive files over a network. If you include the files in your Android project, this isn't necessary.

React Native

1. Add the Rive dependency

npm install --save rive-react-native

2. Create iOS bridging header

  • open the iOS project file in XCode open ios/<name>.xcodeproj

  • create a new empty swift file.

  • confirm "Create Bridging Header"

3. Add your rive component

App.js
import Rive from 'rive-react-native';
function App() {
return <Rive
url="https://cdn.rive.app/animations/vehicles.riv"
style={{width: 400, height: 400}}
/>;
}