Caching a Rive File

import React, { useState } from 'react';
import { useRiveFile } from '@rive-app/react-canvas';

// Custom Wrapper component to display the Rive animation
const RiveAnimation = ({ riveFile }) => {
    const { RiveComponent } = useRive({
        riveFile: riveFile,
        autoplay: true
    });

    return <RiveComponent/>;
};

function App() {
const { riveFile, status } = useRiveFile({
    src: 'https://cdn.rive.app/animations/myrivefile.riv',
});

const [instanceCount] = useState(5); // Number of RiveAnimation components to render

if (status === 'idle') {
    return <div>Idle...</div>;
}

if (status === 'loading') {
    return <div>Loading...</div>;
}

if (status === 'failed') {
    return <div>Failed to load Rive file.</div>;
}

// Each RiveAnimation component uses the RiveFile we loaded earlier, so it is only fetched and initialized once
return (
    <div className="App">
        <header className="App-header">Rive Instances</header>
        <div className="rive-list">
        {Array.from({ length: instanceCount }, (_, index) => (
            <RiveAnimation key={`rive-instance-${index}`} riveFile={riveFile} />
        ))}
        </div>
    </div>
    );

}

export default App;

const rive = require("@rive-app/canvas");

let riveInstances = [];

function loadRiveFile(src, onSuccess, onError) {
const file = new rive.RiveFile({
    src: src,
    onLoad: () => onSuccess(file),
    onLoadError: onError,
});
// Remember to call init() to trigger the load;
file.init().catch(onError);
}

function setupRiveInstance(loadedRiveFile, canvasId) {
const canvas = document.getElementById(canvasId);
if (!canvas) return;

const riveInstance = new rive.Rive({
    riveFile: loadedRiveFile,
    // Be sure to specify the correct state machine (or animation) name
    stateMachines: "Motion", // Name of the State Machine to play
    canvas: canvas,
    layout: new rive.Layout({
    fit: rive.Fit.FitWidth,
    alignment: rive.Alignment.Center,
    }),
    autoplay: true,
    onLoad: () => {
    // Prevent a blurry canvas by using the device pixel ratio
    riveInstance.resizeDrawingSurfaceToCanvas();
    },
});

riveInstances.push(riveInstance);
}

// Loads the .riv file and initializes multiple Rive instances using the same loaded RiveFile in memory
loadRiveFile(
"clean_the_car.riv",
(file) => {
    setupRiveInstance(file, "rive-canvas-1");
    setupRiveInstance(file, "rive-canvas-2");
    // You could also store a reference to the loaded RiveFile here so you're able to initialize other Rive instances later.
},
(error) => {
    console.error("Failed to load Rive file:", error);
}
);

// Resize the drawing surface for all instances if the window resizes
window.addEventListener(
"resize",
() => {
    riveInstances.forEach((instance) => {
    if (instance) {
        instance.resizeDrawingSurfaceToCanvas();
    }
    });
},
false
);

// Cache a RiveFile somewhere to cache for reuse
let file = try! RiveFile(resource: "file", loadCdn: false)

// For example purposes, a type that reuses a single RiveFile
// when creating new view models for given state machines or artboards.
class ViewModelGenerator {
    /// The RiveFile to reuse when generating new view models.
    private let file: RiveFile

    init(file: RiveFile) {
        self.file = file
    }

    // Returns a new view model using a cached RiveFile.
    // This means that the RiveFile will not have to be reparsed
    // each time a view model is generated.
    func viewModel(stateMachine: String?, artboard: String?) -> RiveViewModel {
        // While one RiveFile can be cached and reused, each view model
        // should have its own model as to not share state.
        let model = RiveModel(riveFile: file)
        return RiveViewModel(model, stateMachineName: stateMachine, artboardName: artboard)
    }
}

import app.rive.runtime.kotlin.RiveAnimationView
import app.rive.runtime.kotlin.RiveInitializer
import app.rive.runtime.kotlin.core.File

class MainActivity : ComponentActivity() {
    var riveFile: File? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        // Initialize Rive.
        AppInitializer.getInstance(applicationContext)
            .initializeComponent(RiveInitializer::class.java)

        // Load Rive file from assets and cache.
        application.assets.open("rewards_demo.riv").use { inputStream ->
            val fileBytes = inputStream.readBytes()
            riveFile = File(fileBytes)
        }

        setContent {
            Row {
                // First cached file usage.
                AndroidView(
                    modifier = Modifier.weight(1f),
                    factory = { context ->
                        RiveAnimationView(context).also {
                            it.setRiveFile(
                                file = riveFile!!,
                                stateMachineName = "State Machine 1",
                                autoBind = true,
                            )
                        }
                    }
                )

                // Second cached file usage.
                AndroidView(
                    modifier = Modifier.weight(1f),
                    factory = { context ->
                        RiveAnimationView(context).also {
                            it.setRiveFile(
                                file = riveFile!!,
                                stateMachineName = "State Machine 1",
                                autoBind = true,
                            )
                        }
                    }
                )
            }
        }
    }

    override fun onDestroy() {
        riveFile?.release()
        super.onDestroy()
    }
}