RefreshControl refresh indicator is not shown on iOS

[danielmorlock]

Description

The refresh indicator for <RefreshControl /> is not shown in<ScrollView> and related components like <VirtualizedList /> and <FlatList /> etc.. when refreshing is initially set as true (i.e. refreshing={true}).

This happens in both, when using Expo Go and when using the build iOS app.

Version

0.69.7, 0.70.6

Output of npx react-native info

System:
OS: Linux 5.15 Gentoo Linux
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 16.15 GB / 62.44 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.17.0 - ~/.config/nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.19 - ~/workspace/fgs/mobile/node_modules/.bin/yarn
npm: 2.15.12 - ~/workspace/fgs/mobile/node_modules/.bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.15 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.6 => 0.69.6
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

<ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={true}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>
        This refresh indicator is not shown on iOS
        </Text>
      </ScrollView>

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@danielmorlock/refresh-indicator-bug

[ngima]

I'm also having this issue. To resolve I'm setting refreshing boolean after 10 mills

const fetchData = ()=>{
    this.setRefreshing(true)
    //... data fetching logic
}


React.useEffect(() => {
    setTimeout(() => {
        state.fetchData()
    }, 10)
}, [])

[built-by-as]

I am also having this issue, the RefreshControl will not show when initially set to true. It will only show on pull to refresh

[Alecattie]

I am also having this issue, any update?

[madox2]

I was able to work around with setTimeout as @ngima mentioned above:

import { useEffect, useState } from 'react';
import {
  RefreshControlProps,
  RefreshControl as RefreshControlRN,
} from 'react-native';

export function RefreshControl({ refreshing, ...other }: RefreshControlProps) {
  const [isRefreshing, setRefreshing] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setRefreshing(refreshing);
    }, 10);
  }, [refreshing]);
  return <RefreshControlRN refreshing={isRefreshing} {...other} />;
}

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[zackify]

It’s still a problem…