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

Beginne mit dem Snack-Reproducer und führe ihn auf der iOS-Laufzeitumgebung aus, wobei du dich auf das Verhalten von Animated.FlatList's onRefresh konzentrierst, wenn es Alert.alert aufruft. Bestätige, dass die Liste nach dem Anzeigen des Alerts nicht zurückfedert, und betrachte das Problem als erledigt, wenn das Aktualisieren mit dem Alert die erwartete Zurückfederungsanimation wiederherstellt.