EAS build fails due to duplicate AppTheme in style.xml on Android

[BenGroot]

Bug report

Important note

I have reported this issue with react-native-edge-to-edge and was asked to report the issue here.

Please check the comment of @zoontek: zoontek/react-native-edge-to-edge#79 (comment)

Summary

EAS build fails when using datetimepicker with custom Android colors in combination with react-native-edge-to-edge.

It fails because two styles with the same name "AppTheme" are created in the style.xml file on Android.

Steps to reproduce

1. Set a custom color for react-native-datetimepicker this way: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/android-styling.md
2. That creates an AppTheme in the style.xml.
3. Set the parentTheme for edge-to-edge support using: https://github.com/zoontek/react-native-edge-to-edge?tab=readme-ov-file#expo
4. Which also results in an AppTheme being created.
5. Build the combination and see the error

Environment info

System:
  OS: macOS 15.0.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 5.33 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.3.0
    path: ~/.nvm/versions/node/v23.3.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v23.3.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.5
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: latest
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Time zone name (If the problem you have is related to unexpected time / date. See list in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).

datetimepicker version: 8.3.0
edge-to-edge version: 1.6.0

Work around (for others experiencing the same)

Set parentTheme of edge-to-edge in the app config to Material3.

[
  'react-native-edge-to-edge',
  {
    android: {
      parentTheme: 'Material3',
      enforceNavigationBarContrast: false,
    },
  },
],

Apply this patch:

diff --git a/node_modules/@react-native-community/datetimepicker/plugin/build/withDateTimePickerStyles.js b/node_modules/@react-native-community/datetimepicker/plugin/build/withDateTimePickerStyles.js
index 8b3d9f5..8601ae9 100644
--- a/node_modules/@react-native-community/datetimepicker/plugin/build/withDateTimePickerStyles.js
+++ b/node_modules/@react-native-community/datetimepicker/plugin/build/withDateTimePickerStyles.js
@@ -53,7 +53,7 @@ const DATE_PICKER_THEME_ATTRIBUTE = 'android:datePickerDialogTheme';
 const DATE_PICKER_STYLE_NAME = 'DatePickerDialogTheme';
 const TIME_PICKER_THEME_ATTRIBUTE = 'android:timePickerStyle';
 const TIME_PICKER_STYLE_NAME = 'TimePickerTheme';
-const { assignStylesValue, getAppThemeLightNoActionBarGroup } = config_plugins_1.AndroidConfig.Styles;
+const { assignStylesValue, getAppThemeGroup } = config_plugins_1.AndroidConfig.Styles;
 const { assignColorValue } = config_plugins_1.AndroidConfig.Colors;
 const insertColorEntries = (android = {}, config, themedColorExtractor) => {
     for (const { theme, attrPrefix } of [
@@ -134,7 +134,7 @@ const setAndroidPickerStyles = (styles, theme, config) => {
     }, styles);
     styles = assignStylesValue(styles, {
         add: true,
-        parent: getAppThemeLightNoActionBarGroup(),
+        parent: getAppThemeGroup(),
         name: themeAttribute,
         value: `@style/${styleName}`,
     });

[vonovak]

🎉 This issue has been resolved in version 8.4.1 🎉

If this package helps you, consider sponsoring us! 🚀