TouchableHighlight Does Not Focus AndroidTV Inside Modal

[jdmueller]

🐛 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(R) Core(TM) 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.

[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.

[mohmdalfaha]

I was just facing a similar issue only on android where I have a modal and a closing TouchableOpacity. The TouchableOpacity doesn't respond to the clicks where on iOS it is working fine. To solve that I got rid of the extra wrappers above the TouchableOpacity. In your code I can see there are some unnecessary view like the below ones.

<View style={{marginTop: 22}}> <View> <Text>Hello World!</Text> <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); }}> <Text>Hide Modal</Text> </TouchableHighlight> </View> </View>

Hope this solve your issue and It seems like a bug that needs to be solved by react-native team.

[jdmueller]

I was just facing a similar issue only on android where I have a modal and a closing TouchableOpacity. The TouchableOpacity doesn't respond to the clicks where on iOS it is working fine. To solve that I got rid of the extra wrappers above the TouchableOpacity. In your code I can see there are some unnecessary view like the below ones.

<View style={{marginTop: 22}}> <View> <Text>Hello World!</Text> <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); }}> <Text>Hide Modal</Text> </TouchableHighlight> </View> </View>

Hope this solve your issue and It seems like a bug that needs to be solved by react-native team.

I think I tried this already before posting the bug report. But next time I spin up the dev environment I will try removing the view containers that you suggested. Thanks!

[catmans1]

i have the same issue, Any solution for this?

[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.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[dblachut-adb]

@jdmueller any update on your check?