How do i pass the data from screen to drawer on press?

Question

I want to pass the customDrawerData from DividendAndPrize to CustomDrawer. How do i pass the data from DividendAndPrize to CustomDrawer and display the data in the CustomDrawer component?

App.js file

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} screenOptions={{ drawerPosition: 'right', drawerStyle: {width: Dimensions.get('window').width / 1.25} }}>
      <Drawer.Screen name="DividendAndPrize" component={DividendAndPrize} options={{ title: '', headerShown: false, statusBarColor: '#021C55' }}/>
    </Drawer.Navigator>
  );
}

DividendAndPrize.js file

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

const DividendAndPrize = ({ navigation }) => {
  // Data to be passed to CustomDrawer
  const customDrawerData = {
    data: 'Value for Rule 1',
  };

  // Open the drawer and pass data to it
  const openDrawer = () => {
    navigation.openDrawer({ screen: 'CustomDrawer', params: { customDrawerData }});
  };

  return (
    <View>
      <Text>Rule 1</Text>
      <Text>Rule 2</Text>
      <Text>Rule 3</Text>
      <Text>Rule 4</Text>
      <Text>Rule 5</Text>
      <Text>Rule 6</Text>

      {/* Trigger opening the drawer with data */}
      <Text style={{ fontSize: 30, borderWidth: 1, borderColor: 'red'}} onPress={openDrawer}>Open Drawer with Data</Text>
    </View>
  );
};

export default DividendAndPrize;

const styles = StyleSheet.create({});

CustomDrawer.js file

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

const CustomDrawer = ({ route }) => {
  // Ensure route and route.params exist
  const { customDrawerData } = route.params;

  return (
    <View>
      {/* <Text>CustomDrawer</Text> */}
      {/* Render data received from DividendAndPrize */}
      {/* <Text>{customDrawerData.data}</Text> */}
      {/* Add more components to display other data */}
    </View>
  );
};

export default CustomDrawer;

const styles = StyleSheet.create({});

Answer 1

In React Native with React Navigation, you cannot directly pass props to a drawer like you might do with other components because the drawer lives outside the regular component hierarchy. Instead, you should manage state at a higher level—either with React's context, some global state management library like Redux, or by using React Navigation's route params in combination with a useEffect hook or a focused event listener.

To pass data from DividendAndPrize to CustomDrawer, you may need to employ a different strategy. Here's an approach using React context:

1. Create a Context: Define a context that will hold the custom drawer data.

// CustomDrawerContext.js
import React from 'react';

const CustomDrawerContext = React.createContext(null);

export default CustomDrawerContext;

2. Provide the Context: Wrap your NavigationContainer or Drawer.Navigator with the context provider and update its value whenever you want to open the drawer with new data.

// App.js
import CustomDrawerContext from './path-to/CustomDrawerContext';

function MyDrawer() {
  const [drawerData, setDrawerData] = React.useState(null);

  return (
    <CustomDrawerContext.Provider value={{ drawerData, setDrawerData }}>
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawer {...props} />}
        screenOptions={{
          drawerPosition: 'right',
          drawerStyle: { width: Dimensions.get('window').width / 1.25 },
        }}
      >
        <Drawer.Screen
          name="DividendAndPrize"
          component={DividendAndPrize}
          options={{ title: '', headerShown: false, statusBarColor: '#021C55' }}
        />
      </Drawer.Navigator>
    </CustomDrawerContext.Provider>
  );
}

3. Consume the Context in DividendAndPrize: Use the context to set the data when opening the drawer.

// DividendAndPrize.js
import CustomDrawerContext from './path-to/CustomDrawerContext';

const DividendAndPrize = ({ navigation }) => {
  const { setDrawerData } = React.useContext(CustomDrawerContext);
  const customDrawerData = {
    data: 'Value for Rule 1',
  };

  const openDrawer = () => {
    // Update the context with the data before opening the drawer
    setDrawerData(customDrawerData);
    navigation.openDrawer();
  };

  // ... return your UI ...
};

4. Consume the Context in CustomDrawer: Retrieve the data inside your custom drawer component with the context.

// CustomDrawer.js
import CustomDrawerContext from './path-to/CustomDrawerContext';

const CustomDrawer = (props) => {
  const { drawerData } = React.useContext(CustomDrawerContext);

  return (
    <View>
      {/* Check if drawerData is not null */}
      {drawerData && (
        <Text>{drawerData.data}</Text> // Render the passed data
      )}
      {/* Add more components to display other data */}
    </View>
  );
};

This way allows you to pass data dynamically to your CustomDrawer every time you have new data and want to open the drawer. Just make sure to replace './path-to/CustomDrawerContext' with the actual path where the context file is located.