CM3050 Lab 3109: Light Switch

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
import React, {useState} from 'react';

export default function App() {

  const [switched, setSwitched] = useState(false)
  const tapSwitch = () => setSwitched(!switched)

  return (
    <View style={[styles.container, switched ? styles.darkContainer : styles.lightContainer]}>
      <TouchableOpacity onPress={tapSwitch} style={styles.lightSwitch} />

      <Text style={[styles.switchText, switched ? styles.darkText : styles.lightText]}>
	{switched ? "It's dark" : "Toggle the Lights with the Switch"}
      </Text>

      <StatusBar style={switched ? "light" : "dark"} />

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  darkContainer: {
    backgroundColor: "#242424"
  },
  lightContainer: {
    backgroundColor: "white"
  },
  lightSwitch: {
    width: 70,
    height: 130,
    backgroundColor: "white",
    borderColor: "gray",
    borderWidth: 1,
    borderRadius: 8,
    shadowColor: "#000",
    shadowOpacity: 0.36,
    shadowRadius: 6.68,
    elevation: 11,
    shadowOffset: {
      width: 0,
      height: 5,

    }
  },
  switchText: {
    marginTop: 30,
    fontWeight: "bold"
  },
  lightText: {
    color: "black"
  },
  darkText: {
    color: "white"
  }
});