react / react/react-native

ScrollView doesn't scroll to focused element

Open
#28,509 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: ScrollView Help Wanted :octocat: Needs: Attention Newer Patch Available Platform: Android
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Environment

Android API: 28
Device: AndroidTV emulator and Xiaomi MI BOX
React Native: 0.61.5

Description

Sometimes ScrollView doesn't scroll to currently focused element on AndroidTV devices. Looks like issue is triggered because of two scroll events, one from ReactScrollView.java arrowScroll method and one from requestChildFocus. Issue seems to occur only when scrolling on the bottom of ScrollView.

React Native version:

"0.61.5"

Steps To Reproduce

  1. Navigate with keyboard/remote controller up and down on between last rows of ScrollView.

Expected Results

Scroll follows focused element

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

App.ts example:

import React from 'react';
import {View, StyleProp, TextStyle, ViewStyle, TouchableOpacity, ScrollView, Text} from 'react-native';
const styles: {[name: string]: StyleProp<ViewStyle> | StyleProp<TextStyle>} = {
  container: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: '#000',
    justifyContent: 'flex-end',
    alignContent: 'center'
  }
};
const rows = [1,2,3,4,5,6,7,8,9];
const columns = ['a', 'b', 'c', 'd', 'e', 'f'];
type Props = {
  text: string;
  number: number;
}
const MyButton = (props: Props) => {
  return (
    <TouchableOpacity
      style={{width: 200, height: 200, margin: 50, backgroundColor: `rgba(100,255,0,0.3)`}}
      key={props.text + props.number}
      onPress={() => {}}
    >
      <Text>{props.text + props.number}</Text>
    </TouchableOpacity>
  );
};
const App = () => {
  return (
    <View style={styles.container}>
      <ScrollView>
        {rows.map((number) => (
          <ScrollView
            horizontal={true}
            key={'scrollview' + number}
          >
            {columns.map((text) => <MyButton text={text} number={number} key={text + number} />)}
          </ScrollView>
        ))
        }
      </ScrollView>
    </View>
  );
};
export default App;

In gif below i navigated up and down only:
brokenScrolling2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with ReactScrollView.java, especially the arrowScroll and requestChildFocus methods described in the report. Reproduce the issue using the provided App.ts example on an AndroidTV emulator or Xiaomi MI BOX by navigating between the last rows. Done means the ScrollView consistently follows the focused element when moving up and down near the bottom.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.