Drawer navigation "caches" my screens

[TomaIvanovTomov]

I have this index.js file with drawer navigator:

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { Image } from "react-native";
import QuizIndex from "./screens/QuizIndex";
import Quiz from "./screens/Quiz";
import Login from "./screens/Login";
import Result from "./screens/Result";
import Register from "./screens/Register";
import QuizSub from "./screens/QuizSub";
import { createDrawerNavigator } from "react-navigation-drawer";
import CustomDrawer from "./components/CustomDrawer";

const MainStack = createDrawerNavigator(
  {
    Login: Login,
    QuizIndex: QuizIndex,
    QuizSub: QuizSub,
    Register: Register,
    Result: Result,
    Quiz: {
      screen: Quiz,
      navigationOptions: ({ navigation }) => ({
        headerTitle: navigation.getParam("title"),
        headerTintColor: "white",
        headerStyle: {
          backgroundColor: "#1a78c6",
          borderBottomColor: navigation.getParam("color")
        },
        headerLeft: () => {
          return null;
        },
        gestureEnabled: false
      })
    }
  },
  {
    contentComponent: CustomDrawer
  }
);

export default createAppContainer(MainStack);

The CustomDrawer is this one:

import React, { Component } from "react";
import { SafeAreaView, ScrollView, View, Image } from "react-native";
import { DrawerItems } from "react-navigation-drawer";

class CustomDrawer extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            height: 150,
            backgroudColor: "white",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <Image
            source={require("../assets/logo.png")}
            style={{ width: 120, height: 120, borderRadius: 60 }}
          />
        </View>
        <ScrollView>
          <DrawerItems {...this.props} />
        </ScrollView>
      </SafeAreaView>
    );
  }
}

export default CustomDrawer;

Now when I login it I am redirected to QuizIndex there I am rendering 3 categories:

import React, { Component } from "react";
import { Text, View, ScrollView, StatusBar } from "react-native";

import spaceQuestions from "../data/space";
import westernsQuestions from "../data/westerns";
import computerQuestions from "../data/computers";
import firebase from "firebase";
import "firebase/firestore";
import { RowItem } from "../components/RowItem";
import { ThemeColors } from "react-navigation";

const styles = {
  container: {
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 20
  }
};

class QuizIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      docs: []
    };
  }

  async componentDidMount() {
    await this.quizes();
  }

  quizes = async () => {
    let result = await firebase
      .firestore()
      .collection("quiz")
      .where("parentId", "==", "")
      .get();

    const docs = result.docs.map(doc => {
      return { uid: doc.id, ...doc.data() };
    });

    return this.setState({ docs });
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="dark-content" />
        {this.state.docs.map(doc => (
          <RowItem
            key={doc.uid}
            parentId={doc.parentId}
            name={doc.title}
            color={doc.color}
            icon={doc.icon}
            onPress={() =>
              this.props.navigation.navigate("QuizSub", {
                title: doc.title,
                questions: spaceQuestions,
                color: doc.color,
                parentId: doc.uid
              })
            }
          />
        ))}
      </View>
    );
  }
}

export default QuizIndex;

And the RowItem is this one:

import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";

const styles = StyleSheet.create({
  row: {
    paddingHorizontal: 15,
    paddingVertical: 20,
    backgroundColor: "#36B1F0",
    marginBottom: 20,
    marginLeft: 20,
    width: 150,
    height: 150,
    borderRadius: 3
  },
  text: {
    fontSize: 18,
    color: "#fff",
    fontWeight: "600",
    textAlign: "center"
  }
});

export const RowItem = ({ onPress = () => {}, name, color, icon }) => (
  <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
    <View style={[styles.row, { backgroundColor: color }]}>
      <Text style={styles.text}>{name}</Text>
      <FontAwesome5
        style={{
          color: "white",
          fontSize: 50,
          textAlign: "center",
          marginTop: 20
        }}
        name={icon}
        brand
      />
    </View>
  </TouchableOpacity>
);

When I click on the 3th category there are 2 sub categories. But if I go back no matter device button or through navigation and click on some of the other categories the same 2 sub categories are shown. It seems like cache for me. But I am pretty new in react-native so I will be thankful for every advice.
P.S.
If use createStackNavigator everything works fine. E.g. this "cache" behavior doesn't occur.

[satya164]

This is expected behaviour

[sidpauhal]

@satya164 how to fix this
I want to refresh information on drawer screen
Using react navigation v4

[sidpauhal]

@TomaIvanovTomov I fixed it by adding this to DrawerNavigatorConfig

unmountInactiveRoutes:true,

Now drawer screens refreshes everytime

[linkanp]

@TomaIvanovTomov I fixed it by adding this to DrawerNavigatorConfig

unmountInactiveRoutes:true,

Now drawer screens refreshes everytime

How and where did you add the config?

[sidpauhal]

@TomaIvanovTomov I fixed it by adding this to DrawerNavigatorConfig
unmountInactiveRoutes:true,
Now drawer screens refreshes everytime

How and where did you add the config?

add this line to drawernavigatorconfig

unmountInactiveRoutes:true

[anandchakru]

unmountOnBlur: true worked for me.

import { createDrawerNavigator } from '@react-navigation/drawer'
const Drawer = createDrawerNavigator()
...
const App2DrawerNav = (props) => {
<Drawer.Navigator
    initialRouteName={routes.ROUTE_HOME}
    drawerPosition="left"
    drawerType="front"
    drawerStyle={{
      backgroundColor: '#fff',
      opacity: 0.8
    }}
    drawerContent={(props) => <AppDrawerContent {...props} />}
    screenOptions={({ navigation, route }) => ({ headerShown: false, unmountOnBlur: true })}>
      <Drawer.Screen name={routes.ROUTE_HOME} component={Home}></Drawer.Screen>
</Drawer.Navigator>

If you want it on only specific screens, you can remove it from screenOptions and add it into Drawer.Screen like so:

    <Drawer.Screen name={routes.ROUTE_HOME} component={Home} options={{ unmountOnBlur: true }}></Drawer.Screen>

My Versions:

"@react-navigation/drawer": "^5.11.2",
"@react-navigation/native": "^5.8.9",
"@react-navigation/stack": "^5.12.6",

Ref: https://reactnavigation.org/docs/drawer-navigator/

[GuilhermeTrivilin]

Solution.

https://stackoverflow.com/questions/49858356/component-re-renders-when-using-react-navigation-for-react-native/61459768#61459768

[VWaisberg]

Following the approach set by anandchakru,
In his example, the unmountOnBlur property is specified for Drawer.Navigator.
In my case, the unmountOnBlur property also works for Drawer.Screen:

<Drawer.Screen name="Details" component={DetailsScreen} options={{ unmountOnBlur: true, }} />

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.