Is React Native supported?
yaronlevi opened this issue · comments
Yaron Levi commented
Daybrush (Younkue Choi) commented
@yaronlevi
Hi. Thank you for writing the issue first.
I've used react-native
for the first time, so I don't know if it will be the correct answer.
I knew that react-native
wasn't DOM for now. So maybe you can't use react-scenejs
.
However, I wonder if the answer was given to you as the next example using scenejs
.
It is a method using setState and animate
event.
https://daybrush.com/scenejs/release/latest/doc/SceneItem.html#event:animate
import React from 'react';
import { SceneItem } from "scenejs";
import { Text } from 'react-native';
export default class Example1 extends React.Component {
state = {
styles: { opacity: 0 },
}
render() {
return (
<Text style={this.state.styles}>
Example1
</Text>
);
}
componentDidMount() {
new SceneItem({
0: {
opacity: 0,
fontSize: 0,
},
3: {
opacity: 1,
fontSize: 20,
},
}).on("animate", e => {
// animate event in SceneItem uses frame property.
this.setState({
styles: e.frame.get(),
});
}).play();
}
}
Daybrush (Younkue Choi) commented
animate
event in Scene uses frames
property.
https://daybrush.com/scenejs/release/latest/doc/Scene.html#event:animate
import React from 'react';
import Scene from "scenejs";
import { View, Text } from 'react-native';
export default class Example2 extends React.Component {
state = {
styles: {
text1: { opacity: 0 },
text2: { opacity: 0 },
},
};
render() {
const styles = this.state.styles;
return (
<View>
<Text style={styles.text1}>
Example2
</Text>
<Text style={styles.text2}>
Width text
</Text>
</View>
);
}
componentDidMount() {
new Scene({
text1: {
0: {
opacity: 0,
fontSize: 0,
},
3: {
opacity: 1,
fontSize: 20,
},
},
text2: {
0: {
width: 50, height: 50, backgroundColor: 'powderblue'
},
3: {
width: 300, height: 100,
}
}
}).on("animate", e => {
// animate event in Scene uses frames property.
const frames = e.frames;
this.setState({
styles: {
text1: frames.text1.get(),
text2: frames.text2.get(),
},
});
}).play();
}
}