[Android TV] Adjacent Scrollviews strange D-Pad behaviour at start/end of view

[Weetbix]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Unable to test this on 0.56 as it's currently broken on windows.

Environment

Environment:
  OS: Windows 10
  Node: 8.5.0
  Yarn: 1.1.0
  npm: 5.3.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Description

When we have 2 or more horizontal ScrollViews, the D-Pad navigation behaviour is strange when navigating past the beginning or end of the ScrollView.

When at the beginning or end of the scrollview, if there are any off screen elements in an adjacent scroll view, navigating with the D-Pad in their direction will navigate to an item in that horizontal scrollview.

For example:

• There are 2 horizontal scroll views, with 10 items each, of which only 5 are displayed on screen
• Navigate to the last item in the first scroll view
• Navigate right once again
• Notice the focus moves to the right-most visible item in the second scroll view.

Alternatively:

• There are 2 horizontal scroll views, with 10 items each, of which only 5 are displayed on screen
• On the top list, navigate all the way to the last item
• Switch to the second list, and make sure the first item is highlighted
• Navigate left (the end of the list)
• Notice focus shifts up to the item in the horizontal scroll view above.

In these situations I would not expect any navigation to occur at all.

Here is a gif illustrating the issue, where only D-Pad left or right are used:

This combined with #20099, #19917 make it impossible to make a well behaving, standard style android TV app with nested scrollviews (a la youtube etc). :

Reproducible Demo

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>
    );
  }

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.