Showing refresh icon while unmounting a screen in Android.

[rifad4u]

Description

If a component have refresh control or flatlist with refreshing and onrefresh props , then showing white circle on the top of the screen while navigating back. if i disable refresh control or remove the onrefresh and refreshing prop from flatlist then this white circle won’t come while navigating back.

Version

0.70.0

Output of npx react-native info

System: OS: macOS 12.6 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Memory: 25.20 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.19.0 - /usr/local/opt/node@14/bin/node Yarn: Not Found npm: 6.14.16 - /usr/local/opt/node@14/bin/npm Watchman: 2022.02.07.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8815526 Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.0 => 0.70.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

I have attached the sample code here , run the same in any android device . while navigating back from the profile screen it showing a white circle on the top just below the header bar.

Please give me a solution for the same. Thanks

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

import * as React from 'react'; import { Button, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, backgroundColor : "black" ,alignItems: 'center', justifyContent: 'center' }}> <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} /> ); }

import { SafeAreaView, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [ { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', title: 'First Item', }, { id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', title: 'Second Item', }, { id: '58694a0f-3da1-471f-bd96-145571e29d72', title: 'Third Item', }, ];

const Item = ({ title }) => (

{title}

);

const ProfileScreen = () => { const renderItem = ({ item }) => (

);

return (

Heading item.id} onRefresh={()=>{}} refreshing={false} />

); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor : 'black' }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, });

const Stack = createNativeStackNavigator();

function MyStack() { return ( <Stack.Navigator screenOptions={{ animation : "slide_from_right", }}>

  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

); }

export default function App() { return (

); }

[gabrieldonadel]

I've also been experiencing this on version 0.68.2

[rifad4u]

I've also been experiencing this on version 0.68.2

Have u got any solution for the same?

[PedroBern]

Same issue in 0.69.6

Quick workaround if you are using react navigation

note: this is just a workaround. Not a fix. This issue should be fixed upstream.

The workaround below works for my use case.

const selectHook = <T>({ useIos, useAndroid }: { useIos: T; useAndroid: T }) => {
  return Platform.select({
    default: useIos,
    android: useAndroid,
  })
}

/**
 * Quick workaround for refreshing issue on Android:
 * The refresh control is showing up above the header when unmounting the screen.
 * Note: It's happening when using a custom header component, but I haven't tried using
 * the native header from the native stack.
 */
const useProgressViewOffset = selectHook({
  useAndroid: () => {
    const navigation = useNavigation()
    const [progressViewOffset, setProgressViewOffset] = useState<undefined | number>(undefined)
    const goBackEventWasHandled = useRef(false)

    // prevent the navigation event and hide the refresh indicator
    useEffect(() => {
      const unsubscribe = navigation.addListener('beforeRemove', (event) => {
        // Handle GO_BACK event only, because it fits my use case, please tweak it to fit yours
        if (event.data.action.type === 'GO_BACK' && !goBackEventWasHandled.current) {
          event.preventDefault()
          goBackEventWasHandled.current = true
          setProgressViewOffset(-1000) // set to a ridiculous value to hide the refresh control
        }
      })

      return unsubscribe
    }, [navigation])

    // perform the navigation with the hidden refresh indicator
    useEffect(() => {
      if (progressViewOffset !== undefined) {
        navigation.goBack()
      }
    }, [navigation, progressViewOffset])

    return progressViewOffset
  },
  useIos: () => undefined,
})

Usage

// ...
const progressViewOffset = useProgressViewOffset()
// ...
<RefreshControl
  {...refreshProps}
  progressViewOffset={progressViewOffset}
/>

[pierroo]

It's been a while, is there any news about this issue?

Although, might sound silly but is there any sort of performance impact when adding these refreshProps?

[hakanpinar]

Same problem here.. (version 0.70.5)

[mickdewald]

Can confirm the same issue in v0.71.7

[novirusallowed]

Can confirm the same issue in v0.71.7

Same for me. But noticed that it doesn't happen anymore after you interact with it once.

[PedroBern]

That's true. But still, it's ugly that it appears if you don't interact. For instance, I had to use a helper in my FlatList to prevent it

@micktg is there any difference compared to https://github.com/facebook/react-native/issues/34718#issuecomment-1295919690?

[mickdewald]

That's true. But still, it's ugly that it appears if you don't interact. For instance, I had to use a helper in my FlatList to prevent it

@micktg is there any difference compared to #34718 (comment)?

Oh excuse me. My fault. I didn't scroll up for the last answer. This is of course exactly the same. I even got the link as a reference to this ticket here in the comments.

[Haseebshah936]

Facing the same issue @PedroBern for my use case the solution did not worked. The main point is that this issue needs to be fixed by the core team. As FlatlList is a core component so it should not be behaving in such a manner.

[github-actions[bot]]

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.

[lucasbasquerotto]

not stale

[react-native-bot]

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.

[rifad4u]

Not stale

[CanePro612]

put progressViewOffset={-1} and it will fix the issue. It has done it for me.