Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
PRESIDENT810 opened this issue Jan 29, 2025 · 0 comments

Comments

@PRESIDENT810
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants