Props not working on web

[phillipcmittmann]

When trying to change the state of the app, both onReady and play aren't being called/updated. I don't know if not configuring my webpackConfig has to do with this, since react-native-web-webview states that shouldn't make a difference. The project is being worked with ReNative and using react-spatial-navigation for Smart TVs and Web.

import React, { useEffect, useState, useCallback } from 'react';

import { Dimensions, Button, View, Alert } from 'react-native';

import { withFocusable } from '@noriginmedia/react-spatial-navigation';
import YoutubePlayer from "react-native-youtube-iframe";

import { hasWebFocusableUI } from '../config';

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

const Player = (props) => {
    if (hasWebFocusableUI) {
        useEffect(() => {
            props.setFocus();
        }, []);
    }

    const [playing, setPlaying] = useState(false);

    const onStateChange = useCallback((state) => {
        if (state === "ended") {
            setPlaying(false);
            Alert.alert("video has finished playing!");
        }
    }, []);

    const togglePlaying = useCallback(() => {
        setPlaying((prev) => !prev);
    }, []);

    return (
        <View>
            <YoutubePlayer
                height={SCREEN_HEIGHT}
                play={playing}
                videoId={"iee2TATGMyI"}
                onChangeState={onStateChange}
            />
            <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
        </View>
    )
}

export default (hasWebFocusableUI ? withFocusable()(Player) : Player);

[LonelyCpp]

Yes this is the current state of web. The underlying libraries itself don't support injecting js, so the support is very primitive.

You can follow #70 for updates and discussions on this.