CODEWITHSUNDEEP
androidxmlreact-nativeandroid-drawabledrawable
Nilton Schumacher F
Nilton Schumacher F

Reputation: 1180

Changing color of android:drawable according to light mode or darkMode

I have created a splash screen for React Native using native Android, without any additional libraries (which is my purpose) How can I switch the color from the splash screen according to the device mode (dark or light).
I have a drawable folder in which consists of:

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/darkBackground" />
  <item 
    android:width="120dp"
    android:height="120dp"
    android:drawable="@drawable/icon"
    android:gravity="center"
  />
</layer-list>

A color file:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <color name='lightBackground'>#F2F1F1</color>
  <color name='darkBackground'>#121212</color>
</resources>

If possible doing something like:

<item android:drawable=darkMode ? "@color/darkBackground" : "@color/lighBackground"  >

Upvotes: 1

Views: 43

Answers (1)

NIZEYIMANA Jean de Dieu
NIZEYIMANA Jean de Dieu

Reputation: 61

You can manage them using react native codes

import React from 'react';
import { Appearance, useColorScheme, View, StyleSheet } from 'react-native';

const App = () => {
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';

  return (
    <View style={isDarkMode ? styles.darkSplash : styles.lightSplash}>
      {/* Your splash screen content */}
    </View>
  );
};

const styles = StyleSheet.create({
  darkSplash: {
    flex: 1,
    backgroundColor: 'black',
  },
  lightSplash: {
    flex: 1,
    backgroundColor: 'white', 
  },
});

export default App;

Upvotes: 0

Related Questions