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 (

<Text style={{color : 'white' , alignSelf : 'center'}}>Heading
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => 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="Home" component={HomeScreen} />
<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 #34718 (comment)?

[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]

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.