React Native Navigation - Draw Options - Adding a switch

Question

I'm using https://reactnavigation.org/docs/intro/

I would like to add a switch, or toggle, into the draw - rather than a link to another page.

What I'd like to see, is the draw open - and then a toggle switch is displayed in replace of an option. The User should then be able to toggle that on and off without the draw closing.

Anyone know if this is possible?

Answer 1

U can use the contentComponent in DrawerNavigator to use a custom React component for the drawer.

{
  drawerWidth: 200,
  drawerPosition: 'right',
  contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>
}

contentComponent can be a custom React class that u can write which consists of anything u want.

Providing a custom contentComponent
You can easily override the default component used by react-navigation:

import { DrawerItems } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <View style={style.container}>
    <DrawerItems {...props} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Refer: https://reactnavigation.org/docs/navigators/drawer
custom drawer example : https://developerlife.com/2017/04/15/navigation-and-styling-with-react-native/