Expo Dynamic App Icons for Multi-Tenant Cross Platform Apps

In modern enterprise software development, multi-tenant applications frequently require sophisticated branding customization capabilities, including dynamic app icons. This requirement extends beyond mere aesthetic preferences—it represents a strategic advantage in delivering tailored experiences to enterprise clients while maintaining a single, efficient codebase.

During a recent enterprise client engagement, we encountered the technical challenge of implementing dynamic app icons within the Expo framework. This article details our journey in developing a robust, production-ready solution that’s now available as an open-source package.

The Business Case for Dynamic App Icons

In the context of multi-tenant applications, dynamic app icons serve as a crucial touchpoint for brand identity and user engagement. Consider an enterprise software solution deployed across multiple organizations, each requiring its unique brand presence. The ability to dynamically update app icons provides several strategic advantages:

Brand Consistency and Recognition

• Seamless integration of client branding across all user touchpoints
• Enhanced brand recognition from the moment users interact with the app
• Consistent visual identity maintenance across platform updates

Enterprise Value Proposition

• Differentiated offering in the enterprise software market
• Increased perceived value through customization capabilities
• Improved client satisfaction through brand ownership

Technical Flexibility

• Single codebase maintenance while supporting multiple brand identities
• Reduced deployment complexity compared to maintaining separate apps
• Streamlined update processes across all tenant implementations

Technical Architecture and Implementation

The Challenge with Expo’s Managed Workflow

The implementation of dynamic app icons in Expo presented several technical hurdles:

1. Native Platform Limitations

• Expo’s managed workflow abstracts native code access

• Platform-specific icon management requirements

• Runtime modification constraints

2. Development Considerations
• Maintaining build-time optimization
• Ensuring consistent behavior across platforms
• Managing asset preparation and delivery

Our Solution: @variant-systems/expo-dynamic-app-icon

We developed a comprehensive native modules package that elegantly bridges Expo’s managed workflow with native platform capabilities. The solution is now available as @variant-systems/expo-dynamic-app-icon.

Core Features and Capabilities

• Cross-Platform Compatibility
• iOS support with native alternate icon implementation
• Android support via activity-alias management
• Web platform support for progressive web apps
• Developer Experience
• TypeScript integration with full type safety
• Automated asset generation and configuration
• Comprehensive error handling and debugging support
• Performance Optimization
• Efficient icon caching mechanisms
• Optimized asset loading strategies
• Minimal runtime overhead

Implementation Guide

Installation and Setup

Begin by installing the package using Expo’s installation command:

npx expo install @variant-systems/expo-dynamic-app-icon

Configuration

The package requires configuration in your app.json to manage icon assets and generate necessary platform-specific resources:

"plugins": [
  [
    "@variant-systems/expo-dynamic-app-icon",
    {
      "rabbit": {
        "image": "./assets/rabbit.png",
        "prerendered": true
      },
      "goose": {
        "image": "./assets/goose.png"
      }
    }
  ]
]

Usage

import ExpoDynamicAppIcon from "@variant-systems/expo-dynamic-app-icon";

<Pressable
  style={styles.button}
  onPress={() => {
    ExpoDynamicAppIcon.setAppIcon("rabbit");
  }}
>
  <Text style={styles.text}>Set Rabbit Icon</Text>
</Pressable>;

Platform-Specific Considerations

iOS Implementation

The package automatically manages:

• Info.plist configurations for alternate icons
• Asset catalog integration
• Runtime icon switching with proper permissions

Android Implementation

Handles complexities including:

• Activity-alias management in Manifest.xml
• Adaptive icon support
• Runtime component enabling/disabling

Web Support

Supports no-op (no operation) fallback on web.

Asset Management

1. Icon Preparation
• Maintain consistent aspect ratios
• Optimize image assets for size
• Follow platform-specific guidelines
2. Runtime Considerations
• Implement proper error boundaries
• Handle permission requests gracefully
• Cache frequently used icons

Contributing

We welcome community contributions to enhance the package. Visit our GitHub repository to:

• Submit feature requests
• Report issues
• Contribute code
• Improve documentation

Conclusion

Dynamic app icons represent a significant advancement in multi-tenant application development, offering both technical elegance and business value. Our open-source solution makes this capability accessible to the Expo community, enabling developers to create more sophisticated and branded mobile experiences.

For technical support, feature requests, or to contribute to the project, please visit our GitHub repository or reach out to our team.