Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native (or React) listen to the style changes for the dark mode in separate ts modules

$
0
0

Goal: Implement dark mode in react native application.A little introduction to the system:File structure:

  • Profile.ts
  • ProfileCss.ts
  • constants.ts

In my application in order to separate styles from components, I moved them into .ts files and exported as modules.Example of StyleCss.ts:

import {StyleSheet} from 'react-native';import {Window, FixedCSS, hsize, wsize} from '../../entities/constants';export default StyleSheet.create({    loading: {        backgroundColor: FixedCSS.Colors.MainBackgroundColor,    }    ...});

All style-related constant values stored in constants.ts such as Colors, LineHeights, and etc. Also constants.ts contains a class called FixedCSS which has static properties:

export class FixedCSS {    static isDark = true;    static Colors = {        // Main Colors        RootColor: FixedCSS.isDark ? '#FF6666' : '#FF6666',        MainBackgroundColor: FixedCSS.isDark ? '#050505' : '#FFFFFF',        ...    }    ...}

isDark property of FixedCSS is supposed to be changed with the help of Switch component in Profile.ts

<Switch    value={darkMode}    onValueChange={value => {        this.setState({darkMode: value});    }}/>

The problem: How can I change isDark property in FixedCSS class so that it will affect the appearance of components. The most problematic aspect is that StyleCSS.ts files do not reflect to the change of isDark property in FixedCSS class, as they are exported only once when js bundle gets created.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>