Skip to content

Refresh control indicator is not displayed on iOS #875

Open

Description

Current behavior

Refresh control is not visible when I navigate to ListScreen and refreshing was triggered when screen was mounted in useEffect as below:


const ListScreen = () => {
  const data = [{ x: 1 }, { x: 2 }, { x: 3 }, { x: 4 }];

  const [isRefreshing, setIsRefreshing] = useState(false);

  const refresh = () => {
    setIsRefreshing(true);

    setTimeout(() => {
      setIsRefreshing(false);
    }, 2000);
  };

  const renderItem = ({ item }) => (
    <View style={{ height: 100 }}>
      <Text>{item.x}</Text>
    </View>
  );

  useEffect(() => {
    refresh();
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlashList
        data={data}
        renderItem={renderItem}
        refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={refresh} />}
        estimatedItemSize={100}
      />
    </SafeAreaView>
  );
});

Refresh control works fine when it is triggered by swipe and additionally refresh control is visible when I've added some timeout (like below) but it doesn't solve the issue:

  const refresh = () => {
    setTimeout(() => {
      setIsRefreshing(true);
   }, 500);

    setTimeout(() => {
      setIsRefreshing(false);
    }, 2000);
  };

Expected behavior

Refresh indicator should be displayed even if it was triggered immediately after screen mount

To Reproduce

https://snack.expo.dev/@piotrborowski/graceful-donut

Platform:

  • iOS
  • Android

Environment

1.4.0 but also doesn't work on 1.4.3

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

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions