Refresh contentComponent in react-navigation

Question

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?

Answer 1

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 component creating the DrawerNavigator, and pass it down to your custom drawer component. 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 component, 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 component 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 component 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, combineReducers } from 'redux'
import reducers from './reducers'

const store = createStore(combineReducers(reducers))

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

Then your Drawer component 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 component 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.

Answer 2

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