ScrollView doesn't scroll to focused element
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 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
- 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:

Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par ReactScrollView.java, en particulier par les méthodes arrowScroll et requestChildFocus décrites dans le rapport. Reproduisez le problème à l’aide de l’exemple App.ts fourni, sur un émulateur AndroidTV ou une Xiaomi MI BOX, en naviguant entre les dernières lignes. C’est terminé lorsque le ScrollView suit systématiquement l’élément ayant le focus lors des déplacements vers le haut et vers le bas près du bas.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- android, react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100