Repository navigation
React-native: tvOS How to force a Button to be focused? #13855
Description
Activity
Have you tried using touchable highlight? see https://facebook.github.io/react-native/docs/touchablehighlight.html
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?
I think I understand it better now. Ok, you want to almost simulate a user touch of the component. Something like that ...
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)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.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#44700590Reacted by Douglas LowderRN Apple TV author here.... @JulienKode is correct,
hasTVPreferredFocusis the right way to do this.Reacted by Julien KarstI've submitted a PR to add
hasTVPreferredFocustoTouchableOpacity(see #15561).@dlowder-salesforce That's a nice a idea 👍
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.
- locked and limited conversation to collaborators
on May 15, 2018
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