How can i make DrawerLayout reusable?

Question

I am new to ReactNavite. I am playing around with Android DrawerLayout. I am using StackNavigator for screen redirection.

Do I have to put DrawerLayoutAndroid in each screen, because it does not seem logical? Can't I create a custom class and use it in every screen and some property like selected or unselected?

Screen1.js

export default class Screen1 extends Component<{}> {
  static navigationOptions = {
    header: null
  };

  onScreen1Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen1");
  }

  onScreen2Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen2");
  }

    render() {
        return (
    <DrawerLayoutAndroid
            drawerWidth={300}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => {
              return (
                <ScrollView vertical={true}>                     
                    <View style={styles.drawerMenuSelectedView}>
                      <Text
                        style={styles.menuItemSelected}
                        onPress={() => this.onScreen1Click()}
                      >
                        Screen 1
                      </Text>
                    </View>
                    <View style={styles.drawerMenuUnselectedView}>
                      <Text
                        style={styles.menuItemUnselected}
                        onPress={() => this.onScreen2Click()}
                      >
                       Screen 2
                      </Text>
                    </View>
                </ScrollView>
              );
            }}
            ref={"NAVDRAWER"}
          >
            <View>
      <Text> Screen 1 </Text>
                </View>
    </DrawerLayoutAndroid>
    );  }
}

Screen2.js

export default class Screen2 extends Component<{}> {
  static navigationOptions = {
    header: null
  };

  onScreen1Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen1");
  }

  onScreen2Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen2");
  }

    render() {
        return (
    <DrawerLayoutAndroid
            drawerWidth={300}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => {
              return (
                <ScrollView vertical={true}>                     
                    <View style={styles.drawerMenuSelectedView}>
                      <Text
                        style={styles.menuItemUnselected}
                        onPress={() => this.onScreen1Click()}
                      >
                        Screen 1
                      </Text>
                    </View>
                    <View style={styles.drawerMenuUnselectedView}>
                      <Text
                        style={styles.menuItemSelected  }
                        onPress={() => this.onScreen2Click()}
                      >
                       Screen 2
                      </Text>
                    </View>
                </ScrollView>
              );
            }}
            ref={"NAVDRAWER"}
          >
            <View>
      <Text> Screen 2 </Text>
                </View>
    </DrawerLayoutAndroid>
    );  }
}

App.js

import React, { Component } from 'react';
import { StackNavigator } from "react-navigation";
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";

export default class App extends Component<Props> {
  render() {
    return (
      <MyApp />
    );
  }
}

const MyApp = StackNavigator({

  screen1: { screen: Screen1 },
  screen2: { screen: Screen2 },
});

Answer 1

After long time researching , I landed on this library for drawer navigation with reusable Drawer,

https://github.com/react-navigation/react-navigation

This lib provides DrawerNavigator , Which also helps us to make custom Drawer Design and you can add screens of Drawer in DrawerNavigator...

Also, I have used this blog for reference

https://codeburst.io/custom-drawer-using-react-navigation-80abbab489f7

I hope this helps you ...