What have i fucked up

[BlueBazze]

So im trying to use the navigation from Spatial Navigation.

It seems no matter what i try, i cant get the key press on WebOS with 5-way input. Havent tried pointer input. It works perfectly in a fresh hello-world template, but when i try to implement it myself it just stops working. Ive looked over the differences between the blank & hello-world templates. Couldnt find any difference that should affect this. Ive also looked over the documentation for the @noriginmedia/react-spatial-navigation package documentation.

Im testing on real device WebOS TV-version: 5.3.0-11 WebOS softwareversion: 04.30.11 Model: 55UN71006LB

Example https://github.com/Syncronet-APS/TVNav

I couldnt get the Button from renative to work. So i tried making one in Menu.tsx called Btn. Didnt work either. Anyone have any pointers to what i could be doing wrong?

It is working if i open localhost:8088

[ali-sao]

@BlueBazze , your button has to be focusable as well, i.e wrapped by withFocusable too. Try this row button component and let me know :

import Reactfrom 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Link } from 'react-router-dom';
import { withFocusable } from '@noriginmedia/react-spatial-navigation';


const Button = ({
        focused,
        to,
        text,
        style,
        textStyle,
        testID,
        activeStyle,
        iconProps,
    }) => {
 
    
    const Btn = () => (
        <View
            style={[styles.button,style,focused ? activeStyle:null]}
            testID={testID}
        >
            {text ? (
                <Text>
                    {text}
                </Text>
            ) : null}
        </View>
    );
    if (to) {
        return (
            <Link
                to={`../${to}`}
            >
                <Btn />
            </Link>
        );
    }
    return <Btn />;
});

const styles = StyleSheet.create({
    button: {
        flexDirection: 'row',
        opacity: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

export default withFocusable()(Button);

[BlueBazze]

@ali-sao I have done this. Just updated the repo with a version that actually gives me feedback that an item has been selected. Below the Btn component i have a const called Button wrapping Btn withFocusable. Now, i have it working if i open localhost:8088 while running the WebOS app. But still cant navigate with the remote. Ive tried in index.tsx to print a response to screen on document.addEventListener This dosnt get executed.

[BlueBazze]

According to LG's documentation, the buttons should be the same as the default keymap set in the spatial-navigation package https://webostv.developer.lge.com/design/webos-tv-system-ui/remote-control/

Running the example given on LG's docs. Gives me the same keycodes as the default keymap set in the spatial-navigation package. https://webostv.developer.lge.com/develop/code-samples/remote-control/

[BlueBazze]

Still no update on this, still not able to get input on webos

[RosaryDarling]

Hello @BlueBazze, sorry for a late reply, but could you try updating to newest version and let us know if the issue persist? Thank you so much!

[RosaryDarling]

Closing this issue as stale until more details would be provided