I'm using react-navigation (2.18.2), and have specified a contentComponent, to have a custom drawer component.

Within this custom drawer, I need to remove a single drawerItem if it matches a certain condition (In my example I remove one of the drawerItems regardless). The drawerItem is being removed correctly (visually), but when I tap a drawerItem it is navigating to the index I tapped + 1, as if the menu item is not being removed somewhere else.

const mainDrawerItems = {
  drawerItemA: {
    screen: ItemA,
    navigationOptions: {
      drawerLabel: 'Item A',
    },
  },
  drawerItemB: {
    screen: ItemB,
    navigationOptions: {
      drawerLabel: 'Item B',
    },
  },
  drawerItemC: {
    screen: ItemC,
    navigationOptions: {
      drawerLabel: 'Item C',
    },
  },
  drawerItemD: {
    screen: ItemD,
    navigationOptions: {
      drawerLabel: 'Item D',
    },
  },
}

const MainDrawer = createDrawerNavigator(mainDrawerItems, {
  drawerLockMode: 'locked-closed',
  initialRouteName: 'drawerItemA',
  contentComponent: Drawer,
})

Then the Drawer component looks like this.

import { DrawerItems } from 'react-navigation'

class Drawer extends React.Component<Props> {
  render(): React.Node {
    return (
      <ScrollView>
        <SafeArea forceInset={{ top: 'always', horizontal: 'never' }}>
          {this.drawerItems}
        </SafeArea>
      </ScrollView>
    )
  }

  get drawerItems () {
    const { items } = this.props
    const index = items.findIndex(
      item => item.key === 'drawerItemB'
    )
    if (-1 !== index) {
      items.splice(index, 1)
    }
    return <DrawerItems items={items} {...rest}>
  }
}

Since I have now removed drawerItemB, only three display (A, C and D). However - when I now tap on drawerItemC, it opens drawerItemD. I can tap on drawerItemA, which works fine, but for the rest, it will always open the screen which is next on the menu, instead of the one I'm trying to access.

Any ideas on how to get this working will be much appreciated.

1 Answers

0
jsdeveloper On

I believe you might want to use Array.filter to filter your items array:

  get drawerItems () {
    const { items } = this.props
    const filteredItems = items.filter(
      item => item.key !== 'drawerItemB'
    )
    return <DrawerItems items={filteredItems} {...rest}>
  }