rive-app / rive-app/rive-react

Bug: Nested artboard return no inputs for both parent and child with nested input

Open
#330 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.2k
Forks
58
Avg merge
3h 23m
Merged PRs (30d)
6

Description

I have an .riv file created with the latest Rive editor, and it has parent and chid artboards as nested artboard.

binh_nested_artboard.zip

The @rive-react library version is the latest one up to now: "@rive-app/react-canvas": "^4.17.10",

Rive file is initialized as below

const { RiveComponent, rive } = useRive({
		src,
		parentStateMachines, // declared as props
		artboard: 'Website',  // the 2nd item in artboard array
		autoplay: true,
		useDevicePixelRatio: true,
		layout: new Layout({
            fit: Fit.Cover, // Adjust this to Fit.Contain or Fit.Fill as needed
            alignment: Alignment.Center, // Center alignment
        }),
		onLoadError: () => {console.log('Error while loading')}
	});

ISSUE 1: Active artboard must be hard-coded
With nested artboard, when the rive file is loaded in React application, rive's contents returns an array of arboards like below and it orders alphabetically.
artboards: (2) [{…}, {…}][[Prototype]]: Object

It means, correct me if I'm wrong, when adding Rive file to initilize, we need to 'hard code' the parent artboard, otherwise, react-rive library will load the 1st element in the artboard array.

ISSUE 2: Nested state machine has zero Inputs in return
Using useStateMachineInput hook seems not work anymore. I tried with both parent and child input but it return null.

const parentInput = useStateMachineInput(rive, parentStateMachines, 'Zoom_in');
const childInput = useStateMachineInput(rive, childStateMachines, '"isHeadlineZoomed"');

=> all of them return null

So, to check the loaded rive file, I use useEffect as below

	useEffect(() => {
		if (rive) {
			console.log("Rive contents:", rive.contents);
	
			// Log artboards and state machines
			const artboards = rive.contents.artboards;
			artboards.forEach((artboard, index) => {
				console.log(`Artboard ${index}:`, artboard);
			});
	
			console.log(`Active Artboard: ${rive.activeArtboard}`);
			console.log("State Machines:", rive.stateMachineNames);
	
			// Check if the state machine exists
			if (rive.stateMachineNames.includes("Website State Machine")) {
				const inputs = rive.stateMachineInputs("Website State Machine");
				console.log("Inputs:", inputs);
			} else {
				console.error("State machine 'Website State Machine' not found.");
			}
		}
	}, [rive]);

and the outputs are:

Image

As you can see, rive file is loaded and initialize successfully but doesn't have any input in stateMachineInputs. I am aware and already did the "Expose to parent artboard" with child artboard's inputs.

I also checked the latest document with this link Nested Inputs however the functions (or hook) are very limited:

setNumberStateAtPath(inputName: string, value: number, path: string)
setBooleanStateAtPath(inputName: string, value: boolean, path: string)
fireStateAtPath(inputName: string, path: string)

This is also mean that, there's no GET hook or function to get and update the artboard input from rive, which can be done by using useStateMachineInput when we have single artboard rive file.

note: I already updated the latest rive-react in my project

  "dependencies": {
    "@rive-app/react-canvas": "^4.17.10",
  }

Any feedback or suggestions are welcomed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the report with the attached .riv archive, starting from the useRive initialization and the useStateMachineInput and stateMachineInputs calls shown in the issue. Compare parent and child artboard behavior, including active-artboard selection and exposed nested inputs; done means the expected inputs can be identified and accessed, or the limitations are clearly documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.