Added Support for dark/light modes (#14)

Author: rezbyte

App.tsx

@@ -1,34 +1,119 @@
 import { StatusBar } from "expo-status-bar";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
-import { StyleSheet, FlatList } from "react-native";
+import {
+    Platform,
+    PlatformColor,
+    StyleSheet,
+    FlatList,
+    useColorScheme,
+} from "react-native";
 import { useState } from "react";
+import { white, black } from "./constants/colors";
 import TaskListItem from "./components/TaskListItem";
 import TaskCreator from "./components/TaskCreator";
 import Task from "./utils/Task";
 import removeFromArray from "./utils/arrayHelpers";
 
-const white = "#fff";
 const styles = StyleSheet.create({
     container: {
         alignItems: "flex-start",
-        backgroundColor: white,
         flex: 1,
         justifyContent: "flex-start",
         marginHorizontal: 10,
     },
+    containerDark: {
+        ...Platform.select({
+            ios: {
+                backgroundColor: PlatformColor("systemBackground"),
+            },
+            android: {
+                backgroundColor: PlatformColor(
+                    "@android:color/background_dark"
+                ),
+            },
+            default: { backgroundColor: black },
+        }),
+    },
+    containerLight: {
+        ...Platform.select({
+            ios: {
+                backgroundColor: PlatformColor("systemBackground"),
+            },
+            android: {
+                backgroundColor: PlatformColor(
+                    "@android:color/background_light"
+                ),
+            },
+            default: { backgroundColor: white },
+        }),
+    },
     creator: {
         flex: 1,
     },
+    creatorDark: {
+        borderColor: white, // PlatformColor crashes the app when used with borderColor
+        ...Platform.select({
+            ios: {
+                color: PlatformColor("label"),
+            },
+            android: {
+                color: PlatformColor("@android:color/primary_text_dark"),
+            },
+            default: { color: white },
+        }),
+    },
+    creatorLight: {
+        borderColor: black,
+        ...Platform.select({
+            ios: {
+                color: PlatformColor("label"),
+            },
+            android: {
+                color: PlatformColor("@android:color/primary_text_light"),
+            },
+            default: { color: black },
+        }),
+    },
     task: {
         marginBottom: 5,
     },
+    taskDark: {
+        ...Platform.select({
+            ios: {
+                color: PlatformColor("label"),
+            },
+            android: {
+                color: PlatformColor("@android:color/primary_text_dark"),
+            },
+            default: { color: "white" },
+        }),
+    },
+    taskLight: {
+        ...Platform.select({
+            ios: {
+                color: PlatformColor("label"),
+            },
+            android: {
+                color: PlatformColor("@android:color/primary_text_light"),
+            },
+            default: { color: "black" },
+        }),
+    },
     taskList: {
         flex: 3,
         marginTop: 10,
     },
 });
 
 export default function App(): JSX.Element {
+    const colourScheme = useColorScheme();
+    const containerColor =
+        colourScheme === "dark" ? styles.containerDark : styles.containerLight;
+    const creatorColor =
+        colourScheme === "dark" ? styles.creatorDark : styles.creatorLight;
+    const taskColor =
+        colourScheme === "dark" ? styles.taskDark : styles.taskLight;
+
     const initialTask = new Task("Welcome to my minimal todo list!");
     const [tasks, setTasks] = useState([initialTask]);
 
@@ -41,13 +126,20 @@ export default function App(): JSX.Element {
     };
 
     const renderItem = ({ item }: { item: Task }) => (
-        <TaskListItem task={item} onClick={removeTask} style={styles.task} />
+        <TaskListItem
+            task={item}
+            onClick={removeTask}
+            style={[styles.task, taskColor]}
+        />
     );
 
     return (
-        <SafeAreaProvider>
+        <SafeAreaProvider style={containerColor}>
             <SafeAreaView style={styles.container}>
-                <TaskCreator onAdd={addTask} style={styles.creator} />
+                <TaskCreator
+                    onAdd={addTask}
+                    style={[styles.creator, creatorColor]}
+                />
                 <FlatList
                     data={tasks}
                     renderItem={renderItem}

app.json

@@ -13,6 +13,7 @@
         "updates": {
             "fallbackToCacheTimeout": 0
         },
+        "userInterfaceStyle": "automatic",
         "assetBundlePatterns": ["**/*"],
         "ios": {
             "supportsTablet": true

components/TaskCreator.tsx

@@ -1,5 +1,12 @@
 import { useState } from "react";
-import { StyleSheet, TextInput, Button, View, ViewStyle } from "react-native";
+import {
+    StyleSheet,
+    TextInput,
+    Button,
+    View,
+    ViewStyle,
+    TextStyle,
+} from "react-native";
 import Task from "../utils/Task";
 
 const styles = StyleSheet.create({
@@ -17,13 +24,10 @@ const styles = StyleSheet.create({
 
 interface Props {
     onAdd: (newTask: Task) => void;
-    style?: ViewStyle;
+    style?: (ViewStyle & TextStyle)[];
 }
 
-export default function TaskCreator({
-    onAdd,
-    style = styles.container,
-}: Props): JSX.Element {
+export default function TaskCreator({ onAdd, style }: Props): JSX.Element {
     const [text, setText] = useState("");
 
     const addTask = () => {
@@ -34,7 +38,7 @@ export default function TaskCreator({
     return (
         <View style={[styles.container, style]}>
             <TextInput
-                style={styles.input}
+                style={[styles.input, style]}
                 onChangeText={setText}
                 onSubmitEditing={addTask}
                 value={text}

components/TaskListItem.tsx

@@ -1,4 +1,11 @@
-import { StyleSheet, Text, ViewStyle, Button, View } from "react-native";
+import {
+    StyleSheet,
+    Text,
+    TextStyle,
+    ViewStyle,
+    Button,
+    View,
+} from "react-native";
 import Task from "../utils/Task";
 
 const styles = StyleSheet.create({
@@ -19,13 +26,13 @@ const styles = StyleSheet.create({
 
 interface Props {
     task: Task;
-    style?: ViewStyle;
+    style?: (ViewStyle & TextStyle)[];
     onClick: (newTask: Task) => void;
 }
 
 export default function TaskListItem({
     task,
-    style = styles.view,
+    style,
     onClick,
 }: Props): JSX.Element {
     return (
@@ -34,6 +41,7 @@ export default function TaskListItem({
                 style={[
                     task.done ? styles.disabledStyle : undefined,
                     styles.text,
+                    style,
                 ]}
             >
                 - {task.name}

constants/colors.ts

@@ -0,0 +1,3 @@
+export const white = "#FFF";
+
+export const black = "#000";