CODEWITHSUNDEEP
reactjsreact-native
Dave Wicomo
Dave Wicomo

Reputation: 163

Event handle on focus Touchable elements in Android TV

I'm building an AndroidTV application with React-Native.

I've been referring to the official docs (in Android tab).

I'm trying to use the touchableHandleActivePressIn method on element: TouchableHighlight / TouchableOpacity

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableOpacity touchableHandleActivePressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Unfortunately, this doesn't work. While I get focus on this element from another element (I'm sure they get focus while I see by changing styles).

In this example, I don't add any placeholder buttons to change focus, but the element isn't working.

I can't find any implementation of this methods in documentation or from a Google search.
Anyone know a solution?

Upvotes: 3

Views: 2140

Answers (3)

J. Alves
J. Alves

Reputation: 51

I am having an issue too on android tv. I can confirm that d-pad navigation is working because I can randomly click on the button and see the different screen; However, I do not see either UI change when I focus in/out and the events as described on the comment above.

  1. onPressIn for touchableHandleActivePressIn
  2. onPressOut for touchableHandleActivePressOut,
  3. standard onPress for touchableHandlePress.

https://www.facebook.com/groups/reactnativetv/

Upvotes: 0

Dave Wicomo
Dave Wicomo

Reputation: 163

I found a solution in react-native source code.
If you want use TouchableHighlight or TouchableOpacity components building Android TV application, you shoulde use this methods touchableHandleActivePressIn, touchableHandleActivePressOut, touchableHandlePress like this: 

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableOpacity touchableHandleActivePressIn onPressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

AndroidTV component method handler must be declared as a prop and method to invoke must be declared in respectively:
onPressIn for touchableHandleActivePressIn,
onPressOut for touchableHandleActivePressOut,
and standard onPress for touchableHandlePress.

Hope this help anyone, it took me 2 days to figure it out, because of lack in official documentation.

Upvotes: 3

Davia DeNisco
Davia DeNisco

Reputation: 184

There seems to be a couple bugs in your code. First, you are creating a TouchableHightlight tag. That is a typo -- it should actually be TouchableHighlight. You are also closing that tag with </TouchableOpacity>. You need that closing tag to match, like this:

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableHighlight touchableHandleActivePressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableHighlight >
      </View>
    )
  }
}

If you'd prefer this element to be a TouchableOpacity element (which is different from TouchableHighlight) you'd want it to look like this:

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableOpacity touchableHandleActivePressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Upvotes: 0

Related Questions