Animated.FlatList doesn't bounce back during refreshing if calling Alert.alert in `onRefresh`
Chưa có ai nhận issue này.
- 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
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- 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