[Android TV] Multiple Scrollviews of Touchable strange D-Pad navigation pattern

[aamalric]

• 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

Environment

React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
CPU: x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
Memory: 609.16 MB / 15.32 GB
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/bin/node
npm: 5.6.0 - /usr/bin/npm
SDKs:
Android SDK:
Build Tools: 23.0.1, 26.0.1, 26.0.3, 27.0.3
API Levels: 23, 26, 27
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

See original closed ticket from @Weetbix here: #20100
Reproduced the issue on latest react version.

When having more than one scrollList of touchables, D-Pad navigation pattern is wrong using left-right keys to scroll horizontally. When reaching the end of the first list, the next touchable receiving focus is one from the second list. Same goes when reaching the start of the second list, next focused touchable is one from the above list.

Expected behavior : only reach touchables into the same horizontal scroll list when using left-right and goes to next list touchables only when using up/down keys.

Reproducible Demo

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

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

  return (
    <View>
      {[1, 2].map((index) => (
        <ScrollView key={index} 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>
  );
  }
}

[gregaou]

I reproduce the same issue on RN 0.57. I'm also interessted for a fix or for any informations on how that can be investigated.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[aamalric]

It does still require community's attention. Please don't close it.