How to modify DrawerNavigatorItems items

Question

In the docs from DrawerNavigatorItems it have the following property:

items - the array of routes, can be modified or overridden

It says you can modify the array.

How can I do that?

It doesn't explain what is an "array of routes". It's just strings? An object?

An example of what I want to do is get the full array and add an extra one at the end, something like

items: [...items, someNewItem]

score 0 · Answer 1 · answered Oct 17 '19 at 05:39

One solution is to define our customized Component. Furthermore, we could utilize Redux to manage the state.

Excerpt from an APP which I created:

//The navigation part
const MainDrawer=createDrawerNavigator({
  MainNavigation,
  K:KChartViewScreen
},{
contentComponent:CoinDrawer,
edgeWidth:-1 //to disable gesture from bound open the drawer in unexpected screen. but you could do some work to enable it and without problem, I just handle in an easy way.
});

The following is the CoinDrawer:

class CoinDrawer extends React.Component{
renderMarkets(){
   ...
}
render(){
        return (
            <View>


            <ScrollView>
                <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>

                {this.renderMarkets()}
                </SafeAreaView>

            </ScrollView>
            </View>
        )
    }

function mapStateToProps(state){
    return {
        config:state.config,
        crypto:state.crypto,
        trade:state.trade
    }
}

export default connect(mapStateToProps,{SetCurrentMarket})(CoinDrawer);

Hope this can help you.

I don't use it. I tried but hard to make it work for my case, abandoned. — James Liu, Oct 17 '19 at 14:39
This is an old version, please update with @react-navigation/drawer and @react-navigation/native — Abhinav Saxena, Jun 05 '21 at 14:29

score 0 · Answer 2 · answered Mar 25 '20 at 16:41

You can pass your drawer navigation items in your navigation file. You can create one like below

import { createDrawerNavigator } from 'react-navigation-drawer'
const MainNavigator = createDrawerNavigator(
  {
    Main,
    Landing,
  },
  {
    contentComponent: Drawer,
  },
)

I hope you understand we can make different types of navigators like switch, stack, drawer, etc. After this, you can call your drawer-navigator inside AppNavigator like below

const AppNavigator = createStackNavigator(
  {
    MainNavigator,
    Account,
    Success,
  },
  {
    initialRouteName: 'MainNavigator',
    headerMode: 'none',
  },
)

Now whatever route you will insert in MainNavigator object, it would be shown into the drawer. There may be several ways of using navigation service, I used this one. Hope this helps.

This is an old version, please update with @react-navigation/drawer and @react-navigation/native — Abhinav Saxena, Jun 05 '21 at 14:28

How to modify DrawerNavigatorItems items

2 Answers2