react / react/react-native

ScrollView doesn't scroll to focused element

Abierto
#28,509 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: ScrollView Help Wanted :octocat: Needs: Attention Newer Patch Available Platform: Android
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con ReactScrollView.java, especialmente con los métodos arrowScroll y requestChildFocus descritos en el informe. Reproduce el problema utilizando el ejemplo App.ts proporcionado en un emulador de AndroidTV o en una Xiaomi MI BOX, navegando entre las últimas filas. Se considera terminado cuando el ScrollView sigue de forma consistente al elemento enfocado al moverse hacia arriba y hacia abajo cerca de la parte inferior.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
android, react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.