Text Color not changing in React Native

So I'm messing with React Native using Typescript, im trying to implement a dark mode system (once I have it working it will be going into Redux State) however, My Background is changing colour but my text is not.

I have seen React Native Text color not working my state is updating because my background colour is changing.

import React from 'react';
import { StyleSheet, Text, StatusBar, SafeAreaView, AsyncStorage, Button } from 'react-native';

export interface Props{
  name: string;
}

export interface State{
  darkmode: boolean;
  ready:boolean;
}

export interface DarkModeStyle{
  backgroundColor: string;
  color: string
}

export interface LightModeStyle{
  backgroundColor: string;
  color: string
}

export default class BeaconAppFrame extends React.Component<Props, State>{
  private styles;

  public state : State = {
    darkmode:false,
    ready:false
  }

  public darkModeStyle : DarkModeStyle = {
    backgroundColor:"#555", 
    color:"#EEE"
  }

  public lightModeStyle : LightModeStyle = {
    backgroundColor:"#FFF",
    color:"#000"
  }

  constructor(props: Props){
    super(props);

    // setup the default frame styles
    this.styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
      }
    });
  }

  componentDidMount(){
    AsyncStorage.getItem('darkmode').then( (darkmode) => {
      this.setState({darkmode:darkmode === "yes", ready:true});
    }).catch(() => {
      this.setState({darkmode:false, ready:true});
      AsyncStorage.setItem("darkmode", "no");
    });
  }

  enableDarkMode(){
    this.setState({"darkmode":!this.state.darkmode});
    AsyncStorage.setItem("darkmode", this.state.darkmode?"yes":"no");
  }

  render(){
    if(this.state.ready){
      let style = [this.styles.container, this.state.darkmode?this.darkModeStyle:this.lightModeStyle];
      console.log(style);
      return (
        <SafeAreaView style={style}>
          <StatusBar barStyle="light-content" hidden={true} translucent={false} />
          <Text>darkmode is set to {this.state.darkmode? "Active":"Inactive"}</Text>
          <Button onPress={this.enableDarkMode.bind(this)} title={"Toggle darkmode"}>
            <Text>Toggle Darkmode</Text>
          </Button>
        </SafeAreaView>
      );
    }else{
      return (
        <SafeAreaView style={this.styles.container}>
            <Text>Please Wait Loading</Text>
        </SafeAreaView>
      )
    }
  }
}