I made one app in react-naive using
"react-native": "0.62.0",
"react": "16.11.0",
as I put my android device in dark mode, my UI designs get disturbed so i want to make it disable for now.
please help.
You can disable force dark mode in android by adding this line in your styles.xml in your android folder
<item name="android:forceDarkAllowed">false</item>
Like this
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:forceDarkAllowed">false</item>
<item name="android:textColor">#000000</item>
</style>
</resources>
You need to run the app again after doing these changes since these changes are native level.
File path: android/app/src/main/res/values/styles.xml
change
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
to
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
</style>
For IOS change your info.plist
<key>UIUserInterfaceStyle</key>
<string>Light</string>
It's complicade because you can try many things but if you buy a theme of other developer maybe the code have lines to force the dark mode. I bought a theme a have this lines, like this:
export const useTheme = () => {
const isDarkMode = useColorScheme() === 'dark';
const forceDark = useSelector(state => state.application.force_dark);
const themeStorage = useSelector(state => state.application.theme);
const listTheme = ThemeSupport.filter(item => item.theme == themeStorage);
const theme = listTheme.length > 0 ? listTheme[0] : DefaultTheme;
if (forceDark) {
return {theme: theme.dark, colors: theme.dark.colors}; <--- change here
}
if (forceDark === false) {
return {theme: theme.light, colors: theme.light.colors};
}
return isDarkMode
? {theme: theme.dark, colors: theme.dark.colors} <----- change here
: {theme: theme.light, colors: theme.light.colors};
};
So I change dark to ligth and solved my problem.
Related
I'm still struggling with an error that I can't figure out.
I did not find clear information on how to solve it (only information on how to put the color on a single component)
In their documentation it says that you have to override in a config and set the theme to dark, but it works for me..
My App.tsx
const config: object = {
useSystemColorMode: false,
initialColorMode: 'dark',
};
// extend the theme
const customTheme = extendTheme({ config });
return (
<Provider store={store}>
<NativeBaseProvider theme={customTheme}>
<Navigator />
</NativeBaseProvider>
</Provider>
);
And now if I go to another screen where I create a new component with <View></View> it's still white..
I want to enable dark mode in react native app by using switch button in react native.Please guide me how it is possible.I can't use hooks in colors file. Here is my color file:
const lightMode={
........
TextColor1: '#FFFFFF',
buttonColor1: '#FFFFFF',
borderColor1: '#3CB3FF',
........
}
const DarkMode={
........
TextColor1: '#424242',
buttonColor1: '#3CB3FF',
borderColor1: '#3CB3FF',
........
}
let theme = 'light'
let colors = theme == 'light' ? { ...lightMode} : { ...DarkMode}
How to change above theme by using switch
How to enable dark mode in react native by using your own colors.
I have ever implemented dark theme. But I don't add button to enable dark mode, but it would automatically change basis on phone appearance.
So for implementing dark mode, I used [useColorScheme] .
The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module.
So, we can get the current theme is light or dark.
Here is code example:
In your color file: (Maybe, I will define it as theme.js)
theme.js
export const Theme = {
light: {
........
TextColor1: '#FFFFFF',
buttonColor1: '#FFFFFF',
borderColor1: '#3CB3FF',
........
},
dark: {
........
TextColor1: '#424242',
buttonColor1: '#3CB3FF',
borderColor1: '#3CB3FF',
........
},
}
In your screens:
home.js
import {useColorScheme} from 'react-native';
import {Theme} from './theme';
export const HomeScreen = ({}) = > {
const colorTheme = useColorScheme();
const theme = Theme[colorTheme];
...
return (
<View>
<Text style={theme.TextColor1}> Hello World! </Text>
<Button color={theme.buttonColor1}> Click </Button>
</View>
);
}
I hope this help you solve the problem.
How do I change the color of the bottom touches of the phone in react native. Link to an image.
Navigate to that directory:
your_project/android/app/src/main/res/values.
There will be styles.xml file, open it and there will be something like that:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000</item>
<item name="android:navigationBarColor">#000</item> // Add this line and change the color
</style>
Then go to your_project/android/build.gradle and change minSdkVersion to 21 or higher.
buildscript {
ext {
buildToolsVersion = "29.0.2"
minSdkVersion = 21 // or higher
compileSdkVersion = 29
targetSdkVersion = 29
}
}
If you are using Expo, try to add this to app.json file:
{
"androidNavigationBar": {
"visible": true,
"barStyle": "light-content" or "dark-content",
"backgroundColor": color_here
}
}
Im having a issue that white screen appears after splash screen loads and the app gets started .
I have already tried with some codes and using js and native but does't work
componentwillmount{
splashscreen.hide();
}
In case of Android put android:windowDisablePreview into your styles.xml.
I hope it will help you.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item>
<item name="colorPrimaryDark">#color/status_bar_color</item>
<!-- Customize your theme here. -->
</style>
Please try the below code as well.
componentDidMount() {
setTimeout(() => {
SplashScreen.hide()
}, 300)
}
How do i change the background color, font size of my alert box in react native? I put my alert after a button is clicked. I don't know how to style this one, Thanks for the help
Alert.alert(
'Plate',
'Plate has been sent for printing!',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
Open android/app/src/main/res/values/styles.xml
Add <item name="colorAccent">#000000</item> inside <style> tag.
You will get this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#000000</item>
</style>
</resources>
This will change color over whole app (alerts, calendars, etc.)
You can use this library React-Native_DropDown-Alert. Its highly customizable library with predefined styles for differnet types of alerts. The code would go like this.
<View>
// !!! Make sure it's the last component in your document tree.
<DropdownAlert
ref={(ref) => this.dropdown = ref}
onClose={(data) => this.onClose(data)} />
</View>
// ...
handleRequestCallback(err, response) {
if (err != null) {
this.dropdown.alertWithType('error', 'Error', err)
}
}
// ...
onClose(data) {
// data = {type, title, message, action}
// action means how the alert was dismissed. returns: automatic, programmatic, tap, pan or cancel
}
// ...