Closed
Description
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
- Set a custom color for react-native-datetimepicker this way: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/android-styling.md
- That creates an AppTheme in the style.xml.
- Set the parentTheme for edge-to-edge support using: https://github.com/zoontek/react-native-edge-to-edge?tab=readme-ov-file#expo
- Which also results in an AppTheme being created.
- 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 foundTime 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}`,
});