Showing refresh icon while unmounting a screen in Android.

This issue has been tracked since 2022-09-18.

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/[email protected]/bin/node
Yarn: Not Found
npm: 6.14.16 - /usr/local/opt/[email protected]/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 (



);
}

Screenshot 2022-09-18 at 7 54 30 PM

gabrieldonadel wrote this answer on 2022-09-22

I've also been experiencing this on version 0.68.2

More Details About Repo
Owner Name facebook
Repo Name react-native
Full Name facebook/react-native
Language JavaScript
Created Date 2015-01-09
Updated Date 2022-10-03
Star Count 105144
Watcher Count 3666
Fork Count 22469
Issue Count 2232

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date