Skip to content

Conversation

batuhanoztrk
Copy link
Contributor

Summary

This PR adds comprehensive theming support for Android menus by introducing two new props: themeVariant and uiKit. This enhancement allows developers to control both the theme (light/dark/system) and UI framework (Material 3/AppCompat) of popup menus on Android, providing better visual consistency with the app's design system.

✨ Features Added

  • themeVariant prop: Control menu theme with 'light', 'dark', or 'system' options
  • uiKit prop: Choose between 'auto', 'material3', or 'appcompat' UI frameworks
  • Automatic theme detection: System theme detection based on device settings
  • Graceful fallbacks: Automatically falls back to AppCompat when Material 3 is unavailable

🔧 Technical Implementation

New Components

  • ThemeHelper.kt: Utility class for theme detection and style resolution using reflection
  • Enhanced MenuView.kt: Added theme and UI kit state management with dynamic PopupMenu recreation
  • Updated MenuViewManagerBase.kt: Added React props for themeVariant and uiKit

Key Implementation Details

  • Reflection-based approach: Safely detects Material 3 availability without hard dependencies
  • Dynamic theme switching: PopupMenu is recreated with new ContextThemeWrapper when theme changes
  • System theme detection: Uses Configuration.UI_MODE_NIGHT_MASK for automatic dark/light detection
  • Type safety: Added proper TypeScript types (MenuThemeVariant, MenuUiKit) with exports

📱 Platform Support

  • Android: ✅ Full support for both props
  • iOS: ✅ themeVariant already supported, uiKit is Android-only

🔄 Breaking Changes

None - This is a fully backward-compatible addition. All new props are optional with sensible defaults.

📚 Documentation Updates

  • Updated README.md with comprehensive documentation for both new props
  • Added prop descriptions, type information, and platform compatibility notes
  • Included examples and usage guidelines

🧪 Testing Instructions

Basic Usage

<MenuView
  themeVariant="dark"
  uiKit="material3"
  actions={[
    { id: 'test', title: 'Test Action' }
  ]}
>
  <Text>Open Menu</Text>
</MenuView>

Test Scenarios

  1. Theme Variants:

    • Test themeVariant="light" - should show light themed menu
    • Test themeVariant="dark" - should show dark themed menu
    • Test themeVariant="system" - should follow system theme
    • Test without prop - should default to system theme
  2. UI Kits:

    • Test uiKit="material3" - should use Material 3 styling if available
    • Test uiKit="appcompat" - should use AppCompat styling
    • Test uiKit="auto" - should prefer Material 3, fallback to AppCompat
    • Test without prop - should default to auto behavior
  3. Edge Cases:

    • Test on devices without Material 3 support
    • Test theme switching during runtime
    • Test with various Android API levels

Expected Behavior

  • Menus should visually match the specified theme and UI framework
  • No crashes should occur on any Android version
  • Graceful fallbacks should work when Material 3 is unavailable
  • System theme should automatically adapt to device settings

🔍 Code Quality

  • ✅ Added proper TypeScript types and exports
  • ✅ Maintained backward compatibility
  • ✅ Added comprehensive documentation
  • ✅ Used safe reflection patterns with error handling
  • ✅ Followed existing code style and patterns

📋 Checklist

  • Added new themeVariant prop support for Android
  • Added new uiKit prop for Android UI framework selection
  • Created ThemeHelper.kt utility class
  • Updated MenuView.kt with theme management
  • Added React props in MenuViewManagerBase.kt
  • Added TypeScript types and exports
  • Updated README.md documentation
  • Updated example app to demonstrate new features
  • Maintained backward compatibility
  • Added proper error handling and fallbacks

🎯 Related Issues

This PR addresses the need for better Android theming support and provides developers with fine-grained control over menu appearance to match their app's design system.


Ready for review! 🚀 This enhancement significantly improves the Android user experience by providing native theming capabilities while maintaining full backward compatibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant