📊 expo-atlas-without-expo

Supercharge your vanilla React Native apps with Expo Atlas metrics

Installation • Usage • Documentation • Contributing

---

Overview

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.

✨ Features

• 🔄 Seamless integration with existing Metro config
• 📊 Full Expo Atlas metrics support
• 🛠 Custom serializer preservation
• ⚡️ Zero performance overhead
• 🎯 Simple one-line setup

🚀 Installation

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

📖 Usage

1. 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'
});

2. 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

3. Run Expo Atlas - it will automatically detect and analyze the statistics gathered during bundling:

npx expo-atlas

⚙️ Configuration Options

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

🔍 How It Works

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:

1. Maintaining your existing Metro configuration
2. Adding the necessary Expo Atlas instrumentation
3. Preserving any custom serializers you may have configured

💡 Example

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'
});

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.