I am using React-Navigation where I am using functionality of custom drawer by using contentComponent of React-Navigation.

const DrawerNavigation = DrawerNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
  contentComponent: DrawerComponent,
  drawerWidth: 300
})

Here DrawerComponent is my custom navigation drawer where I have used custom navigation items like username, profile picture, email address and other menus.

Now whenever user updates their profile I want to refresh my DrawerComponent, I am not able to find any way to do it. Can anybody suggest me a good way to implement this?

I am using React-Navigation where I am using functionality of custom drawer by using contentComponent of React-Navigation.

const DrawerNavigation = DrawerNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
  contentComponent: DrawerComponent,
  drawerWidth: 300
})

Here DrawerComponent is my custom navigation drawer where I have used custom navigation items like username, profile picture, email address and other menus.

Now whenever user updates their profile I want to refresh my DrawerComponent, I am not able to find any way to do it. Can anybody suggest me a good way to implement this?

• javascript
• android
• ios
• react-native
• react-navigation

Share Improve this question Follow edited Dec 11, 2018 at 11:52 Preview 35.8k1010 gold badges9595 silver badges113113 bronze badges asked Oct 3, 2017 at 5:26 RaviRavi 35.6k2222 gold badges125125 silver badges187187 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +25

Couple of options here, and all are tight to how you want to achieve your state management.

First, one solution would be to have the your user state in the ponent creating the DrawerNavigator, and pass it down to your custom drawer ponent. This presents the disadvantage of having to recreate your navigator on state change and create a blink. I do not advice to use this solution but it's worth mentioning as a possibility.

You could also use a React Context, have your user state in a top level ponent, create a provider passing it the user as the value and make your drawer a consumer of this context. This way, every time the user changes your drawer ponent would re-render.

---

What I use personally is Redux to connect my Drawer directly to my global state. It involves a bit of setup but it's worth it in the end. A root ponent could look like this:

import React from 'react'
import { Provider } from 'react-redux'

export default () => (
  <Provider store={store}>
    <App />
  </Provider>
) 

Where store is the result of:

import { createStore, bineReducers } from 'redux'
import reducers from './reducers'

const store = createStore(bineReducers(reducers))

Your reducers are going to be the state of your app, and one would be dedicated to your user data.

Then your Drawer ponent could be:

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { connect } from 'react-redux'

@connect(({ user }) => ({ user }))
class Drawer extends Component {
  render () {
    const { user } = this.props
    return (
      <View>
        <Text>My name is {user.name}</Text>
      </View>
    )
  }
}

export default Drawer

Now, every time you change your user reducer, this Drawer ponent will re-render.

There is a few things your should know about Redux, so you should probably read up a bit the Getting Started docs.

I know it is a old question now but you can do this by importing the code like

import DrawerView from '../Drawer/Drawer'

contentComponent: DrawerView

then in the DrawerView file

class DrawerView extends Component {
    render(){
        return(
            //Do your stuff here
        )
    }
}

export default DrawerView;

for more info please visit this link and thank to Kakul Gupta for this https://codeburst.io/custom-drawer-using-react-navigation-80abbab489f7

The easiest way to change menus without using redux is, using createSwitchNavigator.

https://reactnavigation/docs/en/auth-flow.html