Is React Native supported?

[yaronlevi]

[daybrush]

@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]

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();
    }
  }