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

you should be able to handle this by setting the last item's nextFocusRight property to null or undefined.

Answer 3

My guess is that you can use callback to the same function, so instead of creating parse_chapter, you just repeat the code under parse. Instead of running a scrapy.Request you can run scrapy.follow to follow the links under parse.

Something:

def parse(self, response):        
        chapters = response.xpath('/html/body/div[1]/div/div[1]/div/div[4]/div/ul/li[1]/h5/a/@href')

        for chapter in chapters:
            yield scrapy.follow(chapter.get(), callback=self.parse)
    
        image_urls = response.xpath('/html/body/div[1]/div[3]/div/div[2]/div[2]/a/img/@src').get()
        yield {
            'image_urls' : image_urls
        }
        self.create_pdf()
        # once the pdf is created => delete all the pictures

def create_pdf(self):
        files = os.listdir(os.getcwd() + '/tmp/')
        if len(files) > 0:
            ...