TouchableHighlight Does Not Focus AndroidTV Inside Modal

🐛 Bug Report

I am using a modal to display a page of information using TouchableHighlights. I have noticed that it says hasTVPreferredFocus={true} is only for tvOS but it does seem to work on AndroidTV anyways, but not inside the modal. It is working on my main home screen the d-pad works correctly and moves between the TouchableHighlights on the page. However, as soon as I open the modal that contains 4 TouchableHighlight buttons they refuse to focus and you cannot navigate to any of the items. The entire app runs correctly on tvOS but on Android TV emulator and physical device it will not work. On emulator you can click the screen and it will work correctly. I have tried hasTVPreferredFocus={true} and it will not work inside the modal. You can use the example modal code from React Native adding a TouchableHighlight and it does not work for AndroidTV.

To Reproduce

Setup basic project using react-native init using the example modal code that launches from a main home screen. Place a TouchableHighlight inside the modal and the focus will not change even with hasTVPreferredFocus={true} on ATV. My modals are imported from separate class components.

Expected Behavior

Using hasTVPreferredFocus={true} the d-pad should work between the touchable highlights just like it does on tvOS. tvOS correctly focuses on the first TouchableHighlight even without hasTVPreferredFocus: True.

Code Example using React Native modal code from docs:

<View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>

Here is my touchable code. I have tried using a ref as well.

<TouchableHighlight ref={(ref) => { this.touchRef = ref; }} hasTVPreferredFocus={true} style={styles.touchableTop} underlayColor={'gray'} onPress={this.handleImage.bind(this)}>
    <View style={styles.touchableView}>
        <Image source={require('../assets/icon-images.png')} style={styles.touchableIcon} />
        <Text style={styles.touchableText}>{i18n.t('Property Slideshow')}</Text>
    </View>
</TouchableHighlight>

Environment

React Native Environment Info: System: OS: macOS 10.14.4 CPU: (8) x64 Intel® Core™ i7-7920HQ CPU @ 3.10GHz Memory: 385.13 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 11.8.0 - /usr/local/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.7.0 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2 Android SDK: API Levels: 24, 26, 27, 28 Build Tools: 24.0.0, 26.0.0, 28.0.3 System Images: android-27 | Android TV Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.3 AI-182.5107.16.33.5314842 Xcode: 10.2/10E125 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.4 => 0.59.4 npmGlobalPackages: react-native-cli: 2.0.1 react-native: 0.59.4

I will attach images to further explain my issue. The main screen is not within a modal and you can see the d-pad works and remote works tvOS and ATV. However, on ATV neither of the modals with TouchableHighlights inside will receive focus making the page unresponsive.

[jdmueller]

i have the same issue, Any solution for this?

I am getting ready to do an update on my TV apps so I am going to give it another try in the next few days.

[asgvard]

Following this issue. I am struggling a bit with how to imperatively set focus on some element in AndroidTV. For example when the page is just loaded or like in your case, when Modal is opened.