Closed hilmia closed 3 months ago
@hilmia I was having the same issue in making my animation work. It is not clear in the docs that you should install @pixi/react-animated
separately and which components are exported from there. If you check the source code you can see there is no Stage exported now but you have:
BitmapText
Container
Graphics
NineSlicePlane
ParticleContainer
Sprite
AnimatedSprite
Text
TilingSprite
SimpleMesh
SimpleRope
What worked for me was installing @pixi/react-animated
manually and use the Sprite from there but the Stage from @pixi/react
.
import React from 'react';
import { Spring } from 'react-spring';
import { Texture } from 'pixi.js';
import { Stage, Sprite } from '@pixi/react-animated';
const App = () => (
<Stage>
<Spring native from={{ x: 0, y: 0 }} to={{ x: 200, y: 200 }}>
{(props) => <Sprite texture={Texture.WHITE} tint={0xff0000} {...props} />}
</Spring>
</Stage>
);
pixi.js
and @pixi/react
as stated in the docs -> npm install pixi.js @pixi/react
@pixi/react-animated
too -> npm install @pixi/react-animated
@pixi/react-animated
:import React from "react";
import { Spring } from "react-spring";
import { Texture } from "pixi.js";
import { Stage } from "@pixi/react"; --------> HERE
import { Sprite } from "@pixi/react-animated";
const App = () => (
<Stage>
<Spring native from={{ x: 0, y: 0 }} to={{ x: 200, y: 200 }}>
{(props) => <Sprite texture={Texture.WHITE} tint={0xff0000} {...props} />}
</Spring>
</Stage>
);
The above looks correct to me I will get something added to the docs about this
Current Behavior
Stage from "@pixi/react-animated" is not working.
Getting the following error:
Following the React Spring doc page
Expected Behavior
To be able to use Stage from '@pixi/react-animated' like explained in the documentation.
Steps to Reproduce
I used the exact same simple usage code provided in the documentation:
Environment
@pixi/react
version: 7.0.3@pixi/react-animated
version: 7.0.3pixi.js
version: 7.2.0React
version: 18.2.0ReactDOM
version: 18.2.0next
version: 13.2.3Possible Solution
No response
Additional Information
No response