- SDK Version: SDK 35.0.0
- Platforms(Android/iOS/web/all): iOS
I’m having trouble figuring out how I can subscribe to changes then the user changes modes (dark/light). My code is below which is a static mode based on what you launched it in when the user starts the app:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Appearance, AppearanceProvider, useColorScheme } from 'react-native-appearance';
let systemGray6 = "rgb(28, 28, 30)"
let systemGray5 = "rgb(44, 44, 46)"
let systemGray4 = "rgb(58, 58, 60)"
let systemGray3 = "rgb(72, 72, 74)"
let systemGray2 = "rgb(99, 99, 102)"
let systemGray = "rgb(142, 142, 147)"
export default class SignIn extends React.Component {
constructor(props) {
super(props);
this.state = {
colorScheme: Appearance.getColorScheme(),
title: "test"
}
}
handleChange = () => {
}
render() {
let colorScheme = this.state.colorScheme;
let styles = null;
if (colorScheme == "dark") {
styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: systemGray6,
alignItems: 'center',
justifyContent: 'center',
},
title: {
color: "#fff",
fontSize: 48,
fontWeight: "bold"
}
});
} else if (colorScheme == "light") {
styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: 'center',
justifyContent: 'center',
},
title: {
color: systemGray6,
fontSize: 48,
fontWeight: "bold"
}
});
}
return (
<AppearanceProvider>
<View style={styles.container}>
<Text style={styles.title}>{this.state.title}</Text>
</View>
</AppearanceProvider>
)
}
}
My issue is I want to have it dynamically change but I cannot figure out how to make it work. Any help is greatly appriciated.