Horizontal ScrollView nested in a Vertical ScrollView screen has buggy TalkBack behavior

[RyanCommits]

Description

When nesting a horizontal ScrollView inside of vertical ScrollView, using Android Talkback to focus out of the horizontal ScrollView will cause the screen to scroll to the end of the vertical ScrollView, causing Talkback to skip multiple elements. Nesting a FlatList inside a ScrollView screen has the same behavior.

React Native version:

RN 0.64.2 and Android 11 with enabled TalkBack

Steps To Reproduce

1. Turn Talkback on
2. Swipe through elements from top to bottom.
3. When swiping out of the horizontal ScrollView, observe the vertical scrollview scrolling to the bottom.

Expected Results

Elements should be focused top down without skipping any elements.

Snack, code example, screenshot, or link to a repository:

Replace App.js in a new React Native project with this:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';

const Section = ({children, title}): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <ScrollView style={backgroundStyle}>
      <ScrollView horizontal pagingEnabled>
        <View style={styles.card}>
            <Text>
              Hello
            </Text>
          </View>
          <View style={styles.card}>
            <Text>
              Hello
            </Text>
          </View>
          <View style={styles.card}>
            <Text>
              Hello
            </Text>
          </View>
      </ScrollView>

        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
            <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="Step Two">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="Step Three">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="Step Four">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
        </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
    height: 300,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
  card: {
    backgroundColor: 'red',
    width: 200,
    height: 200,
    marginRight: 50,
  },
});

export default App;

[lindboe]

Also encountered this on RN 0.66.4 with Android 11.

[usamaSaddiq]

+1 encountered the same issue.

[anpdko]

+1 столкнулся с той же проблемой.

[yaldaafshar]

Hi everyone, in our application, we have a horizontal scroll view nested inside a vertical scroll view, when turning on talkback on Android, the focus doesn't move appropriately inside the horizontal scroll view. I wanted to follow up on the bug you have reported here. Is there any fix for it? Thank you

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.