React Native — Drawer and Permissions

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

DrawerLayoutAndroid

We can add a drawer layout to our Android app with the DrawerLayoutAndroid component.

For instance, we can write:

import React, { useState } from 'react';
import { Button, DrawerLayoutAndroid, Text, StyleSheet, View } from "react-native";

export default function App() {
  const [drawerPosition, setDrawerPosition] = useState("left");
  const changeDrawerPosition = () => {
    if (drawerPosition === "left") {
      setDrawerPosition("right");
    } else {
      setDrawerPosition("left");
    }
  };

  const navigationView = (
    <View style={styles.navigationContainer}>
      <Text style={{ margin: 10, fontSize: 15 }}>I'm in the Drawer!</Text>
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition={drawerPosition}
      renderNavigationView={() => navigationView}
    >
      <View style={styles.container}>
        <Text style={{ margin: 10, fontSize: 15 }}>
          DrawerLayoutAndroid example
        </Text>
        <Button
          title="Change Drawer Position"
          onPress={() => changeDrawerPosition()}
        />
        <Text style={{ margin: 10, fontSize: 15 }}>
          Drawer on the {drawerPosition}! Swipe from the side to see!
        </Text>
      </View>
    </DrawerLayoutAndroid>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 50,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  navigationContainer: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: "#fff",
    padding: 8
  }
});

We have the drawerPosition state to change the drawer’s position.

The Button takes the onPress prop that takes a function that calls the changeDrawerPosition to toggle the position of the drawer.

The DrawerLayoutAndroid component has the drawer.

drawerWidth has the drawer’s width.

drawerPosition sets the drawer’s position.

renderNavigationView is a function that renders the drawer’s content.

Then when we drag left or right, we’ll see the drawer.

PermissionsAndroid

We can add the PermissionsAndroid object to let us request permissions in our app.

For example, we can write:

import React from 'react';
import { StyleSheet, Text, View, PermissionsAndroid, Button } from "react-native";
import Constants from "expo-constants";

const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Camera Permission",
        message:
          "Can I use the Camera?",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera");
    } else {
      console.log("Camera permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
};
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.item}>Try permissions</Text>
      <Button title="request permissions" onPress={requestCameraPermission} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  item: {
    margin: 24,
    fontSize: 28,
    fontWeight: "bold",
    textAlign: "center"
  }
});

We add the requestCameraPermission function that calls the PermissionAndroid.request method to request permission.

The PermissionsAndroid.PERMISSIONS.CAMERA argument means we want to get permissions for the camera.

The 2nd argument has an object with some properties.

title is the title for the permission request dialog.

message is the message for the permission request dialog.

buttonNeutral is the text that’s shown for the neutral choice.

buttonNegative is the text for the button for denying permission.

buttonPosition is the text for the button for accepting permission.

It returns a promise with the permission choice.

We can check if it’s granted by checking against PermissionsAndroid.RESULTS.GRANTED .

Conclusion

We can add a drawer and request permissions with the React Native library.