Animated.FlatList doesn't bounce back during refreshing if calling Alert.alert in onRefresh #49052
Description
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