Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native focus not changed in tvOS

Currently, I'm developing React Native app for TV platform and I'm able to play video on TV.

I added react-native-drawer in Video Player component and able to open/close drawer but not able to change focus inside the drawer.

Here is the drawer code:

render() {
        return (
            <Container hasTVPreferredFocus={true}>
                <Content                    
                    bounces={false}
                    style={{ flex: 1, backgroundColor: '#fff', top: -1 }}
                >
                    <View style={styles.container}>
                        <TouchableHighlight onPress={() => {this.setState({ selected: 'play' });}}>
                    <View style={{ backgroundColor: this.state.selected === 'play'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
                        <Image style={styles.image} source={require('./images/play.png')} />
                    </View>
                    </TouchableHighlight>                        

                    <TouchableOpacity onPress={() => {this.setState({ selected: 'time' });}}>
                    <View style={{ backgroundColor: this.state.selected === 'time'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
                        <Image style={styles.image} source={require('./images/clock.png')} />
                    </View>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => {this.setState({ selected: 'user' });}}>
                        <View style={{ backgroundColor: this.state.selected === 'user'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
                            <Image style={styles.image} source={require('./images/user.png')} />
                        </View>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => {this.setState({ selected: 'resolution' });}}>
                    <View style={{ backgroundColor: this.state.selected === 'resolution' ? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
                        <Image style={styles.image} source={require('./images/computer.png')} />
                    </View>
                    </TouchableOpacity>
                </View>
                { this.renderUI() }
            </Content>
        </Container>
    );
}

Thanks.

like image 239
Sanjay Kakadiya Avatar asked Aug 30 '18 09:08

Sanjay Kakadiya


1 Answers

To solve that i would suggest you to force the focus and see if it works like that. If it works the problem is in how you use your TouchableHighlight. I would think of forcing the focus change like so:

hasTVPreferredFocus={true}
        onPress={() => {}}

(You have to insert this in the element tag TouchableHighlight )

like image 113
Devolux Avatar answered Nov 13 '22 04:11

Devolux