iOS 13 Dark Mode Implementation (SDK 35)

  1. SDK Version: SDK 35.0.0
  2. 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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.