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

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

Commencez avec le reproducteur Snack et exécutez-le sur le runtime iOS, en vous concentrant sur le comportement de onRefresh de Animated.FlatList lorsqu'il appelle Alert.alert. Confirmez que la liste ne rebondit pas pour revenir à sa position après l'apparition de l'alerte, et considérez l'issue comme terminée lorsque l'actualisation avec l'alerte rétablit l'animation de rebond attendue.