react / react/react-native

Animated.FlatList doesn't bounce back during refreshing if calling Alert.alert in `onRefresh`

Đang mở
#49,052 3 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

API: Alert API: Animated Component: FlatList Issue: Author Provided Repro
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

Description

I attempt to add a alert popup box when user refreshes the FlatList, but it seems that Alert.alert will interfere with Animated.FlatList's animation and will cause it doesn't bounce back

Steps to reproduce

Minimal code to reproduce:

import { Animated, StyleSheet, Alert, Dimensions } from 'react-native';

import { View, Text } from 'react-native';

function App() {
  return (
    <Animated.FlatList
        data={["item1", "item2", "item3"]}
        renderItem={({ item }) => <Text style={{fontSize: 20, margin: 10, padding: 10}}>{item}</Text>}
        style={{ position: "relative", borderColor: "black", margin: 10, padding: 10, borderWidth: 1, borderRadius: 10 }}
        refreshing={false}
        onRefresh={() => {
          Alert.alert(
            "Alert",
            "Sure?",
            [
              {text: "cancel", style: "cancel", onPress: () => {}},
              {
                text: "ok",
                onPress: () => {
                  console.log("ok");
                },
              },
            ],
          );
        }}
      />
  );
}

const { width, height } = Dimensions.get('window');


export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <View style={[styles.box, {
        position: 'absolute',
        top: height*0.25,
        left: width*0.25,
      }]}>
        <App />
      </View>
  </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  box: {
    // backgroundColor: 'blue',
    opacity: 0.5,
  },
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});

React Native Version

0.76.6

Affected Platforms

Runtime - iOS

Output of npx react-native info
(base) ➜  my-app git:(main) ✗ npx react-native info

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }
Stacktrace or Logs
There's no crash so I don't think log will be useful
Reproducer

https://snack.expo.dev/r96AruoARFS859F2IPwRx

Screenshots and Videos

It's easy to see it using the reproducer link and select iOS runtime. Just swipe down and refresh the list and you'll see it

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với trình tái hiện Snack và chạy nó trên iOS runtime, tập trung vào hành vi onRefresh của Animated.FlatList khi nó gọi Alert.alert. Xác nhận rằng danh sách không thể bật trở lại sau khi alert xuất hiện, và coi issue là hoàn tất khi thao tác làm mới cùng với alert khôi phục lại animation bật trở lại như mong đợi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.