TouchableHighlight Does Not Focus AndroidTV Inside Modal #24448

jdmueller · 2019-04-14T19:44:11Z

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

The text was updated successfully, but these errors were encountered:

asgvard · 2019-06-13T21:11:42Z

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 · 2019-07-09T08:25:49Z

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 · 2019-07-12T20:21:19Z

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 · 2019-08-29T09:01:58Z

i have the same issue, Any solution for this?

jdmueller · 2019-09-01T22:39:26Z

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 · 2019-12-01T01:43:45Z

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 · 2019-12-02T07:42:13Z

@jdmueller any update on your check?

jdmueller · 2019-12-03T18:26:30Z

I had some issues updating to the very latest version when I worked with it last. I was able to get mostly current however, I still had the issues the same as before with the TouchableHighlight. They still work perfectly for me on Apple TV devices.

brooklyn097 · 2020-02-07T08:09:21Z

I'm currently facing the same problem. Any workaround this?

numericgraphics · 2020-03-28T17:40:02Z

Same problem here ! Did you find a workaround, or a fix, thx !

adri1336 · 2020-04-21T00:30:21Z

same problem, any fix?

NickAVolpe · 2020-04-22T20:42:24Z

I have a similar problem. My workaround is to hide all views that are underneath the modal.

BertaFly · 2020-04-30T15:26:05Z

I have a similar issue with TouchableOpacity on Android TV, inside modal: items don't change their opacity and onFocus method doesn't trigger. Looking forward to some solution.

artemsh5432 · 2020-05-25T05:23:54Z

Have you got a solution?
Does anyone know how to disable the focus on TouchableHighlight?

s349856186 · 2020-05-25T08:53:40Z

@artemsh5432
disable? can you enable onFocus method on Android TV?
How to do？

artemsh5432 · 2020-05-25T08:58:13Z

@s349856186 I can not turn it on, but put the listener.
```
enableTVEventHandler() {
this.evtHandler = new TVEventHandler();
this.evtHandler.enable(this, this.handleTVRemoteEvent);
}

disableTVEventHandler() {
    if (this.evtHandler) {
        this.evtHandler.disable();
        delete this.evtHandler;
    }
}

handleTVRemoteEvent = (cmp, event) => {
    const { eventType, tag } = event;

    if (tag !== this.nodeHandle) {
        return;
    }

    if (eventType === "left") {
        if (this.props.onLeft !== undefined) {
            this.props.onLeft();
        }
    }

    if (eventType === "right" && event.eventKeyAction === 1) {
        if (this.props.onRight !== undefined) {
            this.props.onRight();
        }
    }

    if (eventType === "focus") {
        this.setState({ isFocus: true });

        if (this.props.focus !== undefined) {
            this.props.focus();
        }
    }
    if (eventType === "select") {
        if (this.props.onTouch !== undefined) {
            this.props.onTouch();
        }
    }

    if (eventType === "blur") {
        this.setState({ isFocus: false });
    }
}

componentDidMount() {
    this.nodeHandle = findNodeHandle(this.myRef.current)
    this.enableTVEventHandler();
}

componentWillUnmount() {
    this.disableTVEventHandler();
}

render() {
       const { children, hide, ...props } = this.props;
       var { isFocus } = this.state;
       console.debug('focusing, isFocus', isFocus);
       return (
           <TouchableHighlight 
           touchableHandleActivePressIn 
           hasTVPreferredFocus={true} 
           ref={this.myRef} onPress={() => this.onPress()} style={{ backgroundColor: isFocus ? 'blue' : 'red' }}
               onPressIn={() => this.onFocus(true)}
               onPressOut={() => this.onFocus(false)}>
               <View>
                   {children}
               </View>
           </TouchableHighlight>
       )
   }

fabOnReact · 2020-05-25T15:13:21Z

after briefly recreating this scenario (with a basic modal example) ...

I noticed that none of your code references the usage of nextFocusDown and all the other related focus methods for android tv

I suggest you to research about it https://reactnative.dev/docs/view#nextfocusright and read https://reactnative.dev/docs/building-for-tv.html

I believe this is not a bug, but just your implementation is missing the logic to handle remote control focus and navigation

Pass the Remote: User Input on TV Devices
https://netflixtechblog.com/pass-the-remote-user-input-on-tv-devices-923f6920c9a8

Similar Issue
https://stackoverflow.com/questions/52303706/react-native-derectional-pad-support-android-tv-app

fabOnReact · 2020-05-25T17:02:23Z

This is artemsh5432 solution.. It is not complete. I am trying to figure how to build this and hopefully find a way to contribute to tv in the future..

import React, { Component, useState } from "react";
import {
  Alert,
  Modal,
  StyleSheet,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  View,
  TVEventHandler,
  findNodeHandle,
  Button
} from "react-native";


class App extends Component { 
  constructor(props) {
    super(props);
    this.state = { isFocus: false };
  }

  disableTVEventHandler() {
      if (this.evtHandler) {
          this.evtHandler.disable();
          delete this.evtHandler;
      }
  }
  enableTVEventHandler = () => {
    this.evtHandler = new TVEventHandler();
    this.evtHandler.enable(this, this.handleTVRemoteEvent);
  }

  handleTVRemoteEvent = (cmp, event) => {
    const { eventType, tag } = event;
    if (tag !== this.nodeHandle) {
      return;
    }
    if (eventType === "left") {
      if (this.props.onLeft !== undefined) {
          this.props.onLeft();
      }
    }

    if (eventType === "right" && event.eventKeyAction === 1) {
        if (this.props.onRight !== undefined) {
            this.props.onRight();
        }
    }

    if (eventType === "focus") {
        this.setState({ isFocus: true });

        if (this.props.focus !== undefined) {
            this.props.focus();
        }
    }
    if (eventType === "select") {
        if (this.props.onTouch !== undefined) {
            this.props.onTouch();
        }
    }

    if (eventType === "blur") {
        this.setState({ isFocus: false });
    }
  }

  componentDidMount = () => {
      this.nodeHandle = findNodeHandle(this.myRef)
      this.enableTVEventHandler();
  }

  componentWillUnmount() {
      this.disableTVEventHandler();
  }
  render() {
       const { children, hide, ...props } = this.props;
       var { isFocus } = this.state;
       console.debug('focusing, isFocus', isFocus);
       return (
         <TouchableHighlight 
         touchableHandleActivePressIn 
         hasTVPreferredFocus={true} 
         ref={this.myRef} 
         style={{ backgroundColor: isFocus ? 'blue' : 'red' }}
         onPressIn={() => this.setState({isFocus: true})}
         onPressOut={() => this.setState({isFocus: true})}>
             <View>
               <Text>TEsting</Text>
             </View>
         </TouchableHighlight>
       )
   }
};

const styles = StyleSheet.create({
});

export default App;

fabOnReact · 2020-05-25T17:04:38Z

#16500 and https://github.com/bounmed/react-native-dpad

artemsh5432 · 2020-05-27T05:37:28Z

@fabriziobertoglio1987 I do not understand how this code works

Here the listener on clicking is 'if (eventType === "select")', then why onPressIn and onPressOut? (And these methods do not work :((( )
touchableHandleActivePressIn - a certain parameter needs a listener, because it will be involved in focusing and defocusing
And like everything else is my code

prashantchothani · 2020-05-27T05:40:22Z

I am facing the same issue when we have any Touchable Components in the Modal

fabOnReact · 2020-05-27T07:32:52Z

@artemsh5432 I'm kind of giving up on this issue, I believe here the issue is on the missing/incomplete documentation... we need additional guide at https://github.com/facebook/react-native-website (the docs you see at reactnative.dev/) ... so maybe you should open an issue there and reference it

I don't know the solution to your problem, but here are my points:

this.props.right(), this.props.left() and this.props.focus() should call respective functions that move the focus on the screen

To better understand this concept you may read more about building apps on android tv and for example Netflix. I just want to tell you that I experimented the same bug in Spotify tv app... when I move between songs they do not highlight my cursor because that part of the screen does not support dpad navigation
https://netflixtechblog.com/pass-the-remote-user-input-on-tv-devices-923f6920c9a8

The functions describe on point 1) are nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight. You should read the docs from android sdk

artemsh5432 · 2020-05-27T07:39:26Z

@fabriziobertoglio1987 I have a list of items, I think it will be very bad for him

wanglaohushiwo · 2020-05-29T05:16:59Z

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.