I'm trying to build an app with light colors, but the phone that i'm testing is in the Dark Theme. So whenever I try to use a light color it gets darker. I'm using react native with expo so I already tried to edit the App.json adding the "userInterfaceStyle": "light", but it continues not to work. The phone that I'm currently using is a Xiaomi.
My expo config --type introspect response:
› npx expo config
{
name: 'helix',
slug: 'helix',
version: '1.0.0',
orientation: 'portrait',
icon: './assets/icon.png',
userInterfaceStyle: 'light',
assetBundlePatterns: [
'**/*'
],
description: undefined,
sdkVersion: '46.0.0',
platforms: [
'ios',
'android'
],
splash: {
image: './assets/splash.png',
resizeMode: 'contain',
backgroundColor: '#ffffff'
},
updates: {
fallbackToCacheTimeout: 0
},
ios: {
supportsTablet: true,
bundleIdentifier: 'com.placeholder.appid',
infoPlist: {
CFBundleDevelopmentRegion: '$(DEVELOPMENT_LANGUAGE)',
CFBundleExecutable: '$(EXECUTABLE_NAME)',
CFBundleIdentifier: '$(PRODUCT_BUNDLE_IDENTIFIER)',
CFBundleName: '$(PRODUCT_NAME)',
CFBundlePackageType: '$(PRODUCT_BUNDLE_PACKAGE_TYPE)',
CFBundleInfoDictionaryVersion: '6.0',
CFBundleSignature: '????',
LSRequiresIPhoneOS: true,
UILaunchStoryboardName: 'SplashScreen',
UIRequiredDeviceCapabilities: [
'armv7'
],
UIViewControllerBasedStatusBarAppearance: false,
UIStatusBarStyle: 'UIStatusBarStyleDefault',
CFBundleShortVersionString: '1.0.0',
CFBundleVersion: '1',
CFBundleURLTypes: [
{
CFBundleURLSchemes: [
'com.placeholder.appid'
]
}
],
'UISupportedInterfaceOrientations~ipad': [
'UIInterfaceOrientationPortrait',
'UIInterfaceOrientationPortraitUpsideDown',
'UIInterfaceOrientationLandscapeLeft',
'UIInterfaceOrientationLandscapeRight'
],
UIRequiresFullScreen: false,
UISupportedInterfaceOrientations: [
'UIInterfaceOrientationPortrait',
'UIInterfaceOrientationPortraitUpsideDown'
],
CFBundleDisplayName: 'helix',
UIUserInterfaceStyle: 'Light',
NSAppTransportSecurity: {
NSAllowsArbitraryLoads: true,
NSExceptionDomains: {
localhost: {
NSExceptionAllowsInsecureHTTPLoads: true
}
}
}
},
entitlements: {
'aps-environment': 'development'
}
},
android: {
permissions: [
'android.permission.READ_EXTERNAL_STORAGE',
'android.permission.WRITE_EXTERNAL_STORAGE',
'android.permission.INTERNET'
],
package: 'com.placeholder.appid',
adaptiveIcon: {
foregroundImage: './assets/adaptive-icon.png',
backgroundColor: '#FFFFFF',
userInterfaceStyle: 'light'
}
},
web: {
favicon: './assets/favicon.png'
},
_internal: {
isDebug: false,
projectRoot: 'D:\\Programming\\Helix\\helix',
dynamicConfigPath: null,
staticConfigPath: 'D:\\Programming\\Helix\\helix\\app.json',
packageJsonPath: 'D:\\Programming\\Helix\\helix\\package.json',
autolinkedModules: [
'expo',
'expo-application',
'expo-constants',
'expo-error-recovery',
'expo-file-system',
'expo-font',
'expo-keep-awake',
'expo-modules-core',
'expo-system-ui'
],
pluginHistory: {
'react-native-maps': {
name: 'react-native-maps',
version: 'UNVERSIONED'
},
'expo-ads-admob': {
name: 'expo-ads-admob',
version: 'UNVERSIONED'
},
'expo-apple-authentication': {
name: 'expo-apple-authentication',
version: 'UNVERSIONED'
},
'expo-contacts': {
name: 'expo-contacts',
version: 'UNVERSIONED'
},
'expo-notifications': {
name: 'expo-notifications',
version: 'UNVERSIONED'
},
'expo-updates': {
name: 'expo-updates',
version: 'UNVERSIONED'
},
'expo-branch': {
name: 'expo-branch',
version: 'UNVERSIONED'
},
'expo-document-picker': {
name: 'expo-document-picker',
version: 'UNVERSIONED'
},
'expo-facebook': {
name: 'expo-facebook',
version: 'UNVERSIONED'
},
'expo-system-ui': {
name: 'expo-system-ui',
version: '1.3.0'
},
'expo-splash-screen': {
name: 'expo-splash-screen',
version: 'UNVERSIONED'
},
'expo-navigation-bar': {
name: 'expo-navigation-bar',
version: 'UNVERSIONED'
},
'expo-file-system': {
name: 'expo-file-system',
version: '14.1.0'
}
},
modResults: {
android: {
gradleProperties: [
{
type: 'property',
key: 'expo.jsEngine',
value: 'jsc'
}
],
manifest: {
manifest: {
'$': {
'xmlns:android': 'http://schemas.android.com/apk/res/android',
package: 'com.placeholder.appid'
},
'uses-permission': [
{
'$': {
'android:name': 'android.permission.INTERNET'
}
},
{
'$': {
'android:name': 'android.permission.SYSTEM_ALERT_WINDOW'
}
},
{
'$': {
'android:name': 'android.permission.READ_EXTERNAL_STORAGE'
}
},
{
'$': {
'android:name': 'android.permission.WRITE_EXTERNAL_STORAGE'
}
}
],
queries: [
{
intent: [
{
action: [
{
'$': {
'android:name': 'android.intent.action.VIEW'
}
}
],
category: [
{
'$': {
'android:name': 'android.intent.category.BROWSABLE'
}
}
],
data: [
{
'$': {
'android:scheme': 'https'
}
}
]
}
]
}
],
application: [
{
'$': {
'android:name': '.MainApplication',
'android:label': '@string/app_name',
'android:icon': '@mipmap/ic_launcher',
'android:roundIcon': '@mipmap/ic_launcher_round',
'android:allowBackup': 'true',
'android:theme': '@style/AppTheme',
'android:usesCleartextTraffic': 'true'
},
'meta-data': [
{
'$': {
'android:name': 'expo.modules.updates.EXPO_UPDATE_URL',
'android:value': 'https://exp.host/@anonymous/helix'
}
},
{
'$': {
'android:name': 'expo.modules.updates.EXPO_SDK_VERSION',
'android:value': '46.0.0'
}
},
{
'$': {
'android:name': 'expo.modules.updates.ENABLED',
'android:value': 'true'
}
},
{
'$': {
'android:name': 'expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH',
'android:value': 'ALWAYS'
}
},
{
'$': {
'android:name': 'expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS',
'android:value': '0'
}
}
],
activity: [
{
'$': {
'android:name': '.MainActivity',
'android:label': '@string/app_name',
'android:configChanges': 'keyboard|keyboardHidden|orientation|screenSize|uiMode',
'android:launchMode': 'singleTask',
'android:windowSoftInputMode': 'adjustResize',
'android:theme': '@style/Theme.App.SplashScreen',
'android:screenOrientation': 'portrait'
},
'intent-filter': [
{
action: [
{
'$': {
'android:name': 'android.intent.action.MAIN'
}
}
],
category: [
{
'$': {
'android:name': 'android.intent.category.LAUNCHER'
}
}
]
},
{
action: [
{
'$': {
'android:name': 'android.intent.action.VIEW'
}
}
],
category: [
{
'$': {
'android:name': 'android.intent.category.DEFAULT'
}
},
{
'$': {
'android:name': 'android.intent.category.BROWSABLE'
}
}
],
data: [
{
'$': {
'android:scheme': 'com.placeholder.appid'
}
}
]
}
]
},
{
'$': {
'android:name': 'com.facebook.react.devsupport.DevSettingsActivity'
}
}
]
}
]
}
},
colors: {
resources: {
color: [
{
'$': {
name: 'iconBackground'
},
_: '#FFFFFF'
},
{
'$': {
name: 'colorPrimary'
},
_: '#023c69'
},
{
'$': {
name: 'colorPrimaryDark'
},
_: '#ffffff'
},
{
'$': {
name: 'splashscreen_background'
},
_: '#ffffff'
}
]
}
},
strings: {
resources: {
string: [
{
'$': {
name: 'app_name'
},
_: 'helix'
},
{
'$': {
name: 'expo_splash_screen_resize_mode',
translatable: 'false'
},
_: 'contain'
},
{
'$': {
name: 'expo_splash_screen_status_bar_translucent',
translatable: 'false'
},
_: 'false'
},
{
'$': {
name: 'expo_system_ui_user_interface_style',
translatable: 'false'
},
_: 'light'
}
]
}
},
styles: {
resources: {
'$': {
'xmlns:tools': 'http://schemas.android.com/tools'
},
style: [
{
'$': {
name: 'AppTheme',
parent: 'Theme.AppCompat.Light.NoActionBar'
},
item: [
{
'$': {
name: 'colorPrimary'
},
_: '@color/colorPrimary'
},
{
'$': {
name: 'colorPrimaryDark'
},
_: '@color/colorPrimaryDark'
}
]
},
{
'$': {
name: 'Theme.App.SplashScreen',
parent: 'AppTheme'
},
item: [
{
'$': {
name: 'android:windowBackground'
},
_: '@drawable/splashscreen'
}
]
}
]
}
},
colorsNight: {
resources: {}
}
},
ios: {
infoPlist: {
CFBundleDevelopmentRegion: '$(DEVELOPMENT_LANGUAGE)',
CFBundleExecutable: '$(EXECUTABLE_NAME)',
CFBundleIdentifier: '$(PRODUCT_BUNDLE_IDENTIFIER)',
CFBundleName: '$(PRODUCT_NAME)',
CFBundlePackageType: '$(PRODUCT_BUNDLE_PACKAGE_TYPE)',
CFBundleInfoDictionaryVersion: '6.0',
CFBundleSignature: '????',
LSRequiresIPhoneOS: true,
UILaunchStoryboardName: 'SplashScreen',
UIRequiredDeviceCapabilities: [
'armv7'
],
UIViewControllerBasedStatusBarAppearance: false,
UIStatusBarStyle: 'UIStatusBarStyleDefault',
CFBundleShortVersionString: '1.0.0',
CFBundleVersion: '1',
CFBundleURLTypes: [
{
CFBundleURLSchemes: [
'com.placeholder.appid'
]
}
],
'UISupportedInterfaceOrientations~ipad': [
'UIInterfaceOrientationPortrait',
'UIInterfaceOrientationPortraitUpsideDown',
'UIInterfaceOrientationLandscapeLeft',
'UIInterfaceOrientationLandscapeRight'
],
UIRequiresFullScreen: false,
UISupportedInterfaceOrientations: [
'UIInterfaceOrientationPortrait',
'UIInterfaceOrientationPortraitUpsideDown'
],
CFBundleDisplayName: 'helix',
UIUserInterfaceStyle: 'Light',
NSAppTransportSecurity: {
NSAllowsArbitraryLoads: true,
NSExceptionDomains: {
localhost: {
NSExceptionAllowsInsecureHTTPLoads: true
}
}
}
},
entitlements: {
'aps-environment': 'development'
},
expoPlist: {
EXUpdatesEnabled: true,
EXUpdatesCheckOnLaunch: 'ALWAYS',
EXUpdatesLaunchWaitMs: 0,
EXUpdatesURL: 'https://exp.host/@anonymous/helix',
EXUpdatesSDKVersion: '46.0.0'
},
podfileProperties: {
'expo.jsEngine': 'jsc'
}
}
}
},
mods: {
android: {
manifest: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
colors: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
strings: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
styles: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
colorsNight: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
gradleProperties: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
}
},
ios: {
infoPlist: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
entitlements: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
expoPlist: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
},
podfileProperties: [AsyncFunction: interceptingMod] {
isProvider: true,
isIntrospective: true
}
}
},
androidStatusBar: {
backgroundColor: '#ffffff'
}
}