How can I change app theme with react-native Appearance and useColorScheme?

Question

So Im trying to change the color scheme using Appearance or useColorScheme, but I was only able to get current theme. How to change it?

Answer 1

You can use it by creating a customHook like

// hooks/useThemeColors.ts
import { useColorScheme } from 'react-native';

const Colors = {
  light: {
    background: "white",
    text: "black",
  },
  dark: {
    background: "black",
    text: "white",
  },
}

const useThemeColors = () => {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme]

  return colors
}

export default useThemeColors

Now use it in your comp like this

import React from "react" import { View, Text, ViewStyle, TextStyle, StyleSheet } from "react-native"

import useThemeColors from "hooks/useThemeColors"

const App = () => {
  const colors = useThemeColors()

  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: colors.background },
  ]
  const textStyles: TextStyle[] = [styles.text, { color: colors.text }]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

Hope it helps. feel free for doubts

All credit to https://www.reactnativeschool.com/how-to-detect-user-color-preference-in-react-native