MENU


<DrawerLayoutAndroid>

The Drawer, typically used for navigation, is rendered with renderNavigationView and its direct children are the main view. The navigation view is initially not visible on the screen but can be pulled in from the side of the window specified by the drawerPosition prop and its width can be set by the drawerWidth prop.

Props(inherits View Props)drawerBackgroundColordrawerLockModedrawerPositiondrawerWidthkeyboardDismissModerenderNavigationViewstatusBarBackgroundColor Event PropsonDrawerCloseonDrawerOpenonDrawerSlideonDrawerStateChangedMethodscloseDrawer()openDrawer()

RESETRUNFULL
import React, { useRef, useState } from "react";import { Button, DrawerLayoutAndroid, Text, StyleSheet, View } from "react-native";const App = () => {
  const drawer = useRef(null);
  const [drawerPosition, setDrawerPosition] = useState("left");
  const changeDrawerPosition = () => {
    if (drawerPosition === "left") setDrawerPosition("right");
    else setDrawerPosition("left");
  };
  const navigationView = () => (
    <View style={[styles.container, styles.navigationContainer]}>
      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
      <Button title="Close drawer" onPress={() => drawer.current.closeDrawer()} />
    </View>
  );
  return (
    <DrawerLayoutAndroid ref={drawer} drawerWidth={300}
                       drawerPosition={drawerPosition}
                  renderNavigationView={navigationView} >
      <View style={styles.container}>
        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
        <Button title="Change Drawer Position" onPress={() => changeDrawerPosition()} />
        <Text style={styles.paragraph}>
          Swipe from the side or press button below to see it!
        </Text>
        <Button title="Open drawer" onPress={() => drawer.current.openDrawer()} />
      </View>
    </DrawerLayoutAndroid>
  );};const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center", padding: 16},
  navigationContainer: {backgroundColor: "#ecf0f1"},
  paragraph: { padding: 16, fontSize: 15, textAlign: "center" }});export default App;