Expo/React Native module with the developer menu.
Expo Dev Menu is an essential npm package for developers working with Expo and React Native frameworks, enhancing the workflow and efficiency of mobile app development. This node module serves as a powerful tool by providing a customizable developer menu that can be accessed directly within your app during development. The primary purpose of the Expo Dev Menu is to offer developers quick access to tools and features such as reloading the application, viewing recent logs, and toggling element inspector or remote debugging. This immediate access not only speeds up the development process but also significantly improves debugging and testing phases, ensuring any issues can be addressed promptly and efficiently.
To incorporate Expo Dev Menu into your project, developers can use the command npm install expo-dev-menu. This simple installation process integrates the developer menu into your Expo or React Native application, thus setting up a robust environment for handling development challenges more effectively. Once installed, the menu can be easily invoked through a shake gesture or by pressing a hardware menu button on Android devices, which brings up an overlay with various development options. This seamless integration helps maintain the focus on development without the hassle of navigating through multiple tools and platforms.
The benefits of using Expo Dev Menu extend beyond simple menu access; it fundamentally transforms the development experience by fostering a more interactive and responsive development environment. Developers can customize the menu to include additional options that cater specifically to their workflow needs, making it a versatile tool in any developer’s arsenal. Moreover, the ability to quickly switch between different tools and settings directly from the app interface reduces downtime and boosts productivity, making Expo Dev Menu an invaluable asset for any React Native developer aiming to streamline their development process and enhance app performance.
Core dependencies of this npm package and its dev dependencies.
eslint, jsc-android, node-gyp, prettier, yarn-deduplicate
A README file for the expo-dev-menu code repository. View Code
Expo/React Native module to add developer menu to Debug builds of your application. This package is intended to be included in your project through expo-dev-client.
You can find more information in the Expo documentation.
The expo-dev-menu repository consists of two different parts, the exported package, which includes the native functions, located in the android, ios and src folders and the Dev Menu interface, located under the app folder.
Local development is usually done through bare-expo.
First, make sure to yarn and yarn start in expo-dev-menu which will add the port for the dev menu packager to dev-menu-packager-host. This is bundled into the native code in bare-expo so need to be done first.
To use dev-client when running bare-expo on Android, open MainApplication.java and set the USE_DEV_CLIENT value to true.
- static final boolean USE_DEV_CLIENT = false;
+ static final boolean USE_DEV_CLIENT = true;
To use dev-client when running bare-expo on iOS, open AppDelegate.mm and set the USE_DEV_CLIENT value to YES.
- BOOL useDevClient = NO;
+ BOOL useDevClient = YES;
Then build the native apps with npx pod-install && yarn ios or yarn android.
app folderTo update the JavaScript code inside the app folder, you need to run the dev-menu bundler locally.
dev-menu package: cd packages/expo-dev-menuyarn startuseDeveloperSupport to true.- val useDeveloperSupport = false
+ val useDeveloperSupport = true
bare-expoyarn bundle:prod:ios && yarn bundle:prod:android to update the embedded bundle