react native flatlist androidTV focus issue

Question

Environment

• react: 16.3.1
• react-native: 0.55.3

Description

I've implemented a multi dimension list view on React Native with a few horizontal FlatLists . Everything displays correctly. However, when I move my focus all the way to the end of a row, the focus will automatically go to the row below when I try to go right (already at the end of the row).

Is there a solution to prevent this and make sure that focus will stop when it reaches the ends of a flatlist ?

Steps to Reproduce

Render a FlatList vertically with each row being another horizontal FlatList. Scroll to end of a row, try to move RIGHT and focus would go down to the next row.

Expected Behaviour

Expected Behaviour should be none since we're at the ends of the current row.

Actual Behaviour

Focus goes to the next row if at the backend of a row

Note

I've searched the docs and this is a specific issue to firetv/androidtv.

Same issue as issue #20100 but the bug is "closed".

Sample code

import React, {Component} from 'react';
import {View, Text, TouchableOpacity, ScrollView} from 'react-native';

export default class App extends Component {
  render() {
    const data = [];
    for (let i = 0; i < 10; i++)
      data.push(i);

    return (
      <View>
        {[1, 2].map(() => (
          <ScrollView horizontal style={{height: 210}}>
            {data.map(i => (
              <TouchableOpacity key={i}>
                <View
                  style={{
                    backgroundColor: 'grey',
                    width: 200,
                    height: 200,
                  }}
                >
                  <Text style={{fontSize: 60}}>{i}</Text>
                </View>
              </TouchableOpacity>
            ))}
          </ScrollView>
        ))}
      </View>
    );
  }

Answer 1

This is not really a (proper) solution, but more of a hack, but it does the job.. I found this out by pure coincidence; if you add a border to the ScrollView, you won't have this problem.. So you can maybe play around with this a bit (e.g. an invisible border).

Answer 2

Currently I have discovered this is not possible for tvOS or android or firetv. Unless I'm mistaken I am assuming there is a low number of people attempting to create connectedTv apps or if they are they have a very very simple interface