react-pixi is giving a error with useTick - reactjs

Question

Im having some trouble with the use of useTick in react with react-pixi
getting a error:
No Context found with PIXI.Application. Make sure to wrap component
with AppProvider
So i tried to wrap the AppProvider, but that did´nt do it.
So here is my code for the specific component that´s import react-pixi:
import React, {useState,useEffect} from 'react';
import { render } from 'react-dom'
import { ParticleContainer, useApp, useTick, Stage, Sprite, Container } from '#inlet/react-pixi'
import { Application } from 'pixi.js'
let scale = { x: 0.5, y: 0.5 };
const TryPixi = () => {
const app = useApp();
const [itemRotation, setItemRotation] = useState(0);
useTick(delta => {
setItemRotation(itemRotation + 1)
})
return (
<Stage width={139} height={140} options={{ transparent: true }}>
<Container
x={70}
y={70}
>
<Sprite
image="../../assets/ninja.png"
anchor={[0.5, 0.5]}
scale={scale}
rotation={0.5}
/>
</Container>
</Stage>
);
};
export default TryPixi;
And call the component like this from another component:
<AppProvider><TryPixi /></AppProvider>
I have tried with and without the AppProvider, and yes the AppProvideris imported :-) Hope anyone can help.

Answer 1

You can only use useTick on component that returns only the animated object.
const Ninja = () => {
const [itemRotation, setItemRotation] = useState(0);
useTick(delta => {
setItemRotation(itemRotation + 1)
})
return (
<Sprite
image="../../assets/ninja.png"
anchor={[0.5, 0.5]}
scale={scale}
rotation={0.5}
/>
);
};
const TryPixi = () => {
return (
<Stage width={139} height={140} options={{ transparent: true }}>
<Container
x={70}
y={70}
>
<Ninja />
</Container>
</Stage>
);
};

Answer 2

As far as I could understand from Stage component source code, it creates its own application in componentDidMount here [lines 115 - 121]:
this.app = new Application({
width,
height,
view: this._canvas,
...options,
autoDensity: options?.autoDensity !== false,
})
It then provides this app to its children via wrapping the children in AppProvider component [lines 216 - 217]:
const { children } = this.props
return <AppProvider value={this.app}>{children}</AppProvider>
This means you can use the hooks that depend on this context only inside the children components of Stage, not in the Stage component itself; because useApp hook uses this context, and useTick hook uses the useApp hook.
So, your wrapper component that renders TryPixi should be like this:
<Stage><TryPixi /></Stage>
And then you call the hooks from inside TryPixi component.