How to Set background image of DrawerNavigator in React-Native?

Question

I integrate DrawerNavigator in my project. its working fine, but there are no any property to set background image. How can I will add background image in DrawerNavigator.

DrawerNavigator

Code of DrawerNavigation

import { AppRegistry  , Dimensions} from 'react-native';

import Library from './ViewControllers/Library';
import Language from './ViewControllers/Language';
import AboutUS from './ViewControllers/AboutUS';
import Support from './ViewControllers/Support';
import { DrawerNavigator } from 'react-navigation';

const MyApp = DrawerNavigator({
  Library: {
    screen: Library,
  },
  Language: {
    screen: Language,
  },
  AboutUS: {
    screen: AboutUS,
  },
  Support: {
    screen: Support,
  },

},{
      initialRouteName:'Library',
      drawerWidth: Dimensions.get('window').width / 2.0,
      drawerPosition: 'left',
      useNativeAnimations : false,
      drawerBackgroundColor : 'white',
      contentOptions: {
        activeTintColor: 'black',
        activeBackgroundColor : 'transparent',
        inactiveTintColor : 'black',
        itemsContainerStyle: {
          marginVertical: 0,
        },
        iconContainerStyle: {
          opacity: 1
        },
        itemStyle :{
          height : 50,
        }

      },

  }
);



AppRegistry.registerComponent('Basair', () => MyApp);

Answer 1

we can provide the custom contentComponent for DrawerNavigator. See the below code.

Code :

import { AppRegistry  , Dimensions , ScrollView , Image} from 'react-native';

import React, { Component } from 'react';

import Library from './ViewControllers/Library';
import Language from './ViewControllers/Language';
import AboutUS from './ViewControllers/AboutUS';
import Support from './ViewControllers/Support';

import { DrawerNavigator , DrawerItems, SafeAreaView  } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <Image style={{flex: 1 , position : 'absolute' , top : 0 , height :Dimensions.get('window').height  , width : Dimensions.get('window').width}}source={require('./menuOverlay.png')}/>
    <SafeAreaView style={{flex: 1 , backgroundColor : 'transparent'}} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

const MyApp = DrawerNavigator({
  Library: {
    screen: Library,
  },
  Language: {
    screen: Language,
  },
  AboutUS: {
    screen: AboutUS,
  },
  Support: {
    screen: Support,
  },

},{
      initialRouteName:'Library',
      drawerWidth: Dimensions.get('window').width,
      drawerPosition: 'left',
      useNativeAnimations : false,
      drawerBackgroundColor : 'transparent',
      contentComponent: CustomDrawerContentComponent,
      contentOptions: {
        activeTintColor: 'black',
        activeBackgroundColor : 'transparent',
        inactiveTintColor : 'black',
        itemsContainerStyle: {
          marginVertical: 0,
        },
        iconContainerStyle: {
          opacity: 1,
        },
        itemStyle :{
          height : 50,
        }

      },

  }
);



AppRegistry.registerComponent('Basair', () => MyApp);

Set background of Drawer:

Answer 2

Found solution to the background image to the drawer navigation here's my code

    import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator,
  createSwitchNavigator,
  createBottomTabNavigator,
  DrawerItems
} from "react-navigation"; //React navigation imports
//Creating the custom Drawer menu Component
const CustomDrawerComponent = props => (
  <SafeAreaView style={{ flex: 1 }}>
    <ImageBackground source={drawerBg}  style={styles.Backgroundcontainer}>
    <Image
      source={require("./assets/images/logo.png")}
      style={{ height: 120, width: 120, borderRadius: 0 , marginTop:20 }}
    />
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
    </ImageBackground>
  </SafeAreaView>
);
const AppDrawerNavigator = createDrawerNavigator( //Creating the drawer navigator
  {
    Accueil: {
      screen: Accueil,
      navigationOptions: {
        title: "Accueil",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-home" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    RendezVous: {
      screen: StackNavigator,   //Returns the StackNavigator that has a tabnavigaotr nested in it
      navigationOptions: {
        title: "Rendez-vous",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-calendar" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    ParcoursDeSoin: {
      screen: ParcoursDeSoin,
      navigationOptions: {
        title: "Examen medicale",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-document" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    Analyses: {
      screen: Analyses,
      navigationOptions: {
        title: "Analyses",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-medical" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    Ordonnance: {
      screen: Ordonnance,
      navigationOptions: {
        title: "Ordonnance",
        drawerIcon: ({ tintColor }) => (
          <Icon name="md-medkit" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    Profil: {
      screen: Profil,
      navigationOptions: {
        title: "Profile",
        drawerIcon: ({ tintColor }) => (
          <Icon name="ios-man" style={{ fontSize: 24, color: tintColor }} />
        )
      }
    },
    APropos: {
      screen: APropos,
      navigationOptions: {
        title: "A propos",
        drawerIcon: ({ tintColor }) => (
          <Icon
            name="md-analytics"
            style={{ fontSize: 24, color: tintColor }}
          />
        )
      }
    }
  },
  {
    contentComponent: CustomDrawerComponent, //calling back to the customdrawerComponent
    drawerWidth: width/2,
    contentOptions: {
      activeTintColor: "orange"
    }
  }
);

the end result