React Native focus not changed in tvOS

Question

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.

Inga

IMHO hasTVPreferredFocus={true} should be set for 'focusable' element not for container. – Compelling

@Compelling I tried that also with TouchableHighlight and TouchableOpacity. – Inga

See my answer to a similar post; https://mcmap.net/q/902547/-react-native-for-android-tv-focus-in-out-event-issue – Presa

Answer 1

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 )

Thekla