React Native for Android TV - Focus In/Out event Issue

Question

I just deployed an Android TV demo app built using react native 0.57. However, I noticed that Focusable elements are not working properly. I was expecting the focus going on/off on either TouchableOpacity and TouchableHighlight elements with event onPressIn / onPressOut, but it's not working. The style remains unchangeable when I using D-pad key (left, right, up, down) to navigate through this element. Also, I am having the same issue on Android Emulator.

I was able to confirm that onPress event it's working because when I hit the D-pad "select" key, and the task attached to the event happens.

I haven't seen any error. I am going to share the code below and my environment settings in hope to get some help or any direction.

React Native Environment Info:

System:
  OS: Windows 10
  CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Memory: 4.01 GB / 15.82 GB
Binaries:
  Yarn: 1.7.0 - C:\Users\Justimiano.Alves\AppData\Roaming\npm\yarn.CMD
  npm: 4.6.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
  Android Studio: Version  3.1.0.0 AI-173.4907809

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import styles from './Button.component.styles';
import { colors } from '../../config/styles.config';

// create a component
class CtaSecundaryButton extends Component {

    constructor(props){
        super(props);  
        this.state = {
            backgroundColor: colors.backgroundRedSecondary
        }      
        this._onPressIn = this._onPressIn.bind(this);
        this._onPressOut = this._onPressOut.bind(this);

    }

    _onPressIn (){
        this.setState({backgroundColor: colors.backgroundBlack});
    }

    _onPressOut ()
    {
        this.setState({backgroundColor: colors.backgroundRed})
    }

    render() {
        return (            
            <TouchableOpacity onPressIn={this._onPressIn} onPressOut ={this._onPressOut} onPress={this.props.onPress} style={{ marginTop: 10, width:'50%', backgroundColor: colors.backgroundRedSecondary, alignItems: 'center',height:40, padding: 5, color:colors.inputColor}} activeOpacity={0.5}>
                <Text style={styles.textScundary}>{this.props.children}</Text>
            </TouchableOpacity>
        );
    }
}
export default CtaSecundaryButton;

Strobile

Hi, @Alves were you able to solve this issue, I have similar issue. – Mesdemoiselles

Answer 1

Did you try the onFocus & onBlur attributes (instead of onPressIn & onPressOut?

Vat

Answer 2

As it's said in the docs here you can use onBlur and onFocus on Touchable mixins such as TouchableWithoutFeedback and etc. .

so you have to change your TouchableOpacity element in render() to :

<TouchableOpacity onFocus={this._onPressIn} onBlur ={this._onPressOut} onPress={this.props.onPress} style={{ marginTop: 10, width:'50%', backgroundColor: colors.backgroundRedSecondary, alignItems: 'center',height:40, padding: 5, color:colors.inputColor}} activeOpacity={0.5}>
    <Text style={styles.textScundary}>{this.props.children}</Text>
</TouchableOpacity>

Surrender