new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Expo · Router · all subjects

drawer

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Drawer navigator bundled in Expo Router

In SDK 56 and later, the drawer navigator is bundled in expo-router and uses react-native-drawer-layout under the hood.

Drawer dependencies for SDK 56 and later

For SDK 56 and later, install react-native-reanimated, react-native-worklets, and react-native-gesture-handler. On Android and iOS, these are required to drive the drawer's animations. On web, animation is handled by CSS.

Drawer dependencies for SDK 53 and earlier

For SDK 53 and earlier, install @react-navigation/drawer, react-native-reanimated, and react-native-gesture-handler.

Basic Drawer layout usage

Import Drawer from expo-router/drawer and render it in a layout file to create a drawer navigator.

Drawer.Screen configuration options

Use Drawer.Screen components to configure individual screens within the drawer. The name prop must match the page file path from the root, and the options prop accepts drawerLabel to set the menu item text and title to set the screen title.

Drawer layout example with named screens

Example code showing Drawer usage with two screens: a home screen named 'index' with drawerLabel 'Home' and title 'overview', and a user screen named 'user/[id]' with drawerLabel 'User' and title 'overview'.

Navigation drawer pattern description

A navigation drawer is a common mobile app pattern that allows users to swipe open a menu from the side of their screen to expose navigation options. This menu is typically also toggleable through a button in the app's header.

Drawer.Protected for protected routes in drawer navigator

Protected routes are available for Drawer navigator using Drawer.Protected with the guard prop, similar to Stack.Protected.

Gesture Handler must be added manually if using Drawer layout

Expo Router does not add react-native-gesture-handler as of v3. You must add this package yourself if you are using Gesture Handler or the <Drawer /> layout. Avoid using this package on web since it adds a lot of unused JavaScript.

Give your agent this brain