Supercharge your vanilla React Native apps with Expo Atlas metrics
Installation • Usage • Documentation • Contributing
This package allows you to use Expo Atlas in your vanilla React Native applications without requiring a full Expo setup. It provides the same functionality as Expo Atlas in Expo apps but works with custom Metro configurations.
- 🔄 Seamless integration with existing Metro config
- 📊 Full Expo Atlas metrics support
- 🛠 Custom serializer preservation
- ⚡️ Zero performance overhead
- 🎯 Simple one-line setup
npm install --save-dev expo-atlas-without-expo expo-atlas
# or
yarn add -D expo-atlas-without-expo expo-atlas
# or
pnpm add --save-dev expo-atlas-without-expo expo-atlas
- Import the adapter in your Metro configuration file (
metro.config.js
):
const { withExpoAtlasWithoutExpo } = require('expo-atlas-without-expo');
module.exports = withExpoAtlasWithoutExpo({
// Your existing Metro configuration
}, {
// Optional: Specify custom Atlas options
atlasFile: 'path/to/atlas-stats.json'
});
- Bundle your application using the React Native CLI:
npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle
# or for Android
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle
- Run Expo Atlas - it will automatically detect and analyze the statistics gathered during bundling:
npx expo-atlas
The withExpoAtlasWithoutExpo
function accepts two parameters:
-
metroConfig
: Your base Metro configuration object -
options
: (Optional) An object with the following properties:-
atlasFile
: Custom path for the Atlas statistics output file
-
The adapter wraps your Metro configuration with Expo Atlas while preserving your existing serializer settings. It ensures compatibility between Expo Atlas and your custom Metro setup by:
- Maintaining your existing Metro configuration
- Adding the necessary Expo Atlas instrumentation
- Preserving any custom serializers you may have configured
const { withExpoAtlasWithoutExpo } = require('expo-atlas-without-expo');
const config = {
transformer: {
// Your transformer config
},
resolver: {
// Your resolver config
},
// ... other Metro config options
};
module.exports = withExpoAtlasWithoutExpo(config, {
atlasFile: './build/atlas-stats.json'
});
MIT
Contributions are welcome! Please feel free to submit a Pull Request.