React Native Drawer Navigation – without any errors

While trying to setup @react-navigation/drawer, you may end up into an error hell where one error keeps coming after another. The errors espcially appear when you add createDrawerNavigator() to code.

Here is the basic layout for setting it up on a fresh react-native project.

When running, make sure you run this using:

npx react-native start --reset-cache

import React from 'react';
import 'react-native-gesture-handler';
import {View, Text, Button} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications " component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin'
  ],
};

{
  "name": "your-app-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "react": "18.2.0",
    "react-native": "0.72.0",
    "react-native-gesture-handler": "^2.12.0",
    "react-native-reanimated": "^3.3.0",
    "react-native-safe-area-context": "^4.6.2",
    "react-native-screens": "^3.21.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.6",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

Please let me know if you are still having any error or issue.

This should fix issues including:

Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated’s babel plugin?
Error: Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js?

Leave a Reply Cancel reply