React native eslint-disable-next-line react/no-unstable-nested-components - reactjs

Question

I am using a custom back button in the headerLeft. I have enabled ESLINT, and it is showing the below warning.
Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “App” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true.eslintreact/no-unstable-nested-components
App.tsx
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
*/
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {StatusBar, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {useNavigation} from '#react-navigation/native';
import {DrawerContent} from './src/navigation/drawer-content';
import {Button} from 'react-native-paper';
import Feed from './src/screens/feed';
import Article from './src/screens/article';
const Drawer = createDrawerNavigator();
const CustomDrawer = (props: any) => {
return <DrawerContent {...props} />;
};
const BackButton = () => {
const navigation = useNavigation();
return (
<Button
icon="arrow-left-thick"
onPress={() => navigation.goBack()}
children={undefined}
/>
);
};
function App(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<NavigationContainer>
{/* <SafeAreaView style={backgroundStyle}> */}
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<Drawer.Navigator drawerContent={CustomDrawer} initialRouteName="Feed">
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen
name="Article"
component={Article}
options={{
title: 'Timeline',
headerLeft: () => <BackButton />,
}}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
export default App;

Answer 1

It could be because of the following eslint rule react/no-unstable-nested-components.
I guess according to react-navigation's guide you have defined the headerLeft prop but the above eslint rule contradicts that.
Contradiction occurred here:
<Drawer.Screen
name="Article"
component={Article}
options={{
title: 'Timeline',
headerLeft: () => <BackButton />, // <--- this line
}}
/>
Possible fix(es):
Disable plugin for the file: // eslint-disable react/no-unstable-nested-components (or for just one line)
Move component definition out of the component.
Edit the .eslintrc to allow component as props in this rule's settings
...
"react/no-unstable-nested-components": [
"off" | "warn" | "error",
{ "allowAsProps": true | false }
]
...