React-native: tvOS How to force a Button to be focused?

[ghost]

How to force a Button to be focused?
I have been trying to do this since several weeks

For example if I have a ListView and if I want to have a specific cell focused, how I can do that ?

There are posts on Stackoverflow but nobody knows the answer

[dobrienlzd]

Have you tried using touchable highlight? see https://facebook.github.io/react-native/docs/touchablehighlight.html

[ghost]

Yes I have tried:
https://facebook.github.io/react-native/docs/touchablehighlight.html

But nothing to set the focus on an element for Apple Tv

I use this in my app

[dobrienlzd]

I would forget about Apple TV for a moment and just see if it is possible outside Apple TV. Perhaps you should also consider using newer list like FlatList for example as well. Put function on Highlight methods like onTouch etc and see if they fire for items in a list. If they do than this can be shown. I did notice that one method for touchable focus highlight seems to be iOS only. Are you on Android?

[ghost]

Thanks for you answer 👍

I'm on tvOS,
I use Touchablehighlight and I know when an item is focus because OnShow is called,
But I have no idea to force a Touchablehighlight to be focused

[dobrienlzd]

I think I understand it better now. Ok, you want to almost simulate a user touch of the component. Something like that ...

[ghost]

Yes ! Not really a user touch

A user selection, when the user on tvOS move to up it select a cell, and I want to select it programatically

[ghost]

Do you have an idea to do that ?

[dobrienlzd]

https://facebook.github.io/react-native/docs/flatlist.html
scrollToIndex(pos) even though it might be on same page it might give it the highlight.
scrollToItem(params: object)

[ghost]

Thanks, I will try with that and update you as soon as possible

[dobrienlzd]

Also take a look at the example above in https://facebook.github.io/react-native/docs/flatlist.html in the section on pure components. class MyList extends React.PureComponent {
state = {selected: (new Map(): Map<string, boolean>)};

Interesting are:

_onPressItem = (id: string) => {
// updater functions are preferred for transactional updates
this.setState((state) => {
// copy the map rather than modifying state.
const selected = new Map(state.selected);
selected.set(id, !state.get(id)); // toggle
return {selected};
});
};

_renderItem = ({item}) => (

// On Press Item will toggle the selected state.
// This deals with some of the issues surrounding FlatList. I would stick with newer list components like FlatList. ListView may be deprecated and won't get improvements.
I think you will be able to create a solution out of custom PureComponent and FlatList.
Might have to do both a scrollTo(pos) and also have method on the Component to set the selected status.

[JulienKode]

Yes it is possible, with tvOS and react native if you want to force a focusable component to be focus you just need to set hasTVPreferredFocus to true

For example:

    <TouchableHighlight
        hasTVPreferredFocus={true}
    	onPress={() => {}}
    >
    	<Text>Hello</Text>
    </TouchableHighlight>

You can see this post on Stackoverflow:
https://stackoverflow.com/questions/43862802/react-native-tvos-how-to-force-a-button-to-be-focused/44700590#44700590

[douglowder]

RN Apple TV author here.... @JulienKode is correct, hasTVPreferredFocus is the right way to do this.

[douglowder]

I've submitted a PR to add hasTVPreferredFocus to TouchableOpacity (see #15561).

[JulienKode]

@dlowder-salesforce That's a nice a idea 👍

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.