react / react/react-native

Starting from 0.64.0 `RefreshControl` causes an unwanted visual jump in the list content when the `refreshing` prop goes from `true` to `false`

Aperta
#31,461 39 commenti 33 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Accessibility Accessibility Team - Evaluated Component: RefreshControl Help Wanted :octocat: Impact: Regression Platform: iOS
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

Description

Starting from 0.64.0 in iOS on a physical device: When using <RefreshControl> inside <ScrollView> or <FlatList>, the content in the list has an unwanted visual jump down when the refreshing prop goes from true to false - this is not the case in 0.63.4.

https://user-images.githubusercontent.com/1485576/116700722-626f9d00-a9c7-11eb-8ce9-107bf3dca592.mov

React Native version:

System:
    OS: macOS 11.2
    CPU: (8) x64 Apple M1
    Memory: 667.83 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.0 => 0.64.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Install a clean version of 0.64.0 and run the code from the RefreshControl docs https://reactnative.dev/docs/refreshcontrol on a physical device. In the provided videos I have only changed the fake timeout from 2000ms -> 500ms to show the jumping quicker and printed the refreshing state.

Expected Results

This is how it looks in 0.63.4, where no jumping is happening:

https://user-images.githubusercontent.com/1485576/116701050-c1351680-a9c7-11eb-8507-cbc0e8eab36b.mov

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

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(500).then(() => setRefreshing(false));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>{refreshing ? 'Refreshing' : 'Done'}</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con l'esempio della documentazione di RefreshControl e riproduci la transizione da refreshing=true a false su un dispositivo iOS fisico usando React Native 0.64.0, quindi confrontala con 0.63.4. Traccia il comportamento di RefreshControl utilizzato da ScrollView e FlatList e considera l'issue completata quando il contenuto non salta più al termine dell'aggiornamento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native
Ambito
mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
50/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.