Disable default focus behaviour on Android TV

user_2754774 0
Viewed 1107

we've built the custom focus manager on Android TV, unfortunately, we can not find the way how to disable default focus behaviour. The problem appears when we are putting our elements in the ScrollView. The View is being scrolled to follow the default focus pointer. The problem is that our focusManager works in a different way and it goes out of sync with the default one, resulting in view moving away from our focused item.

We tried the following:

  • Removing all Tocuahbles and replacing them with a custom class.
  • Replacing ScrollView with FlatList
  • Trying to set scrollEnabled={false}
  • Trying to call preventDefault onFocus/onScroll events.

Nothing seems to work.

We are using RN 0.59.10

enter image description here

android-tv react-native android
1 Answers

I have found a way to do it. It's a bit hacky but works well. I realised that the default focus goes to the first ScrollView it can find and never leave it. This gave me the idea to trap the focus in the sizeless component so I created a component called a FocusTrap and placed it on top of my root view.

import React from "react";
import { View, ScrollView, StyleSheet, TouchableOpacity } from "react-native";

const styles = StyleSheet.create({
  container: { flex: 1, width: 0, height: 0, flexShrink: 1, flexGrow: 0 },
});

export const FocusTrap = (props) => {
  return (
    <View style={styles.container}>
      <ScrollView>
        <TouchableOpacity />
      </ScrollView>
    </View>
  );
};

It effectively traps a default focus inside so I'm free to take over the focus behaviour.

user_27547740
Related