Add a brightness configuration setting for the Binary Clock

Someone using the Binary Clock by their bedside will likely prefer a
dimmer screen than a person using it at their office desk.

To accomodate both preferences, this commit adds a Settings screen with
a slider to adjust the clock's brightness. The settings are accessible
only via long pressing on the clock face in order to preserve the
minimalist feel of the Binary Clock (a Toast is shown on app launch to
inform the user of how to access the settings.)

Improves #1
Closes #2

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+    "recommendations": [
+        "equimper.react-native-react-redux",
+        "esbenp.prettier-vscode",
+        "msjsdiag.vscode-react-native",
+        "ms-vscode.vscode-typescript-next",
+        "dbaeumer.vscode-eslint",
+        "wix.glean"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Pressable"
+    ]
+}

App.tsx

@@ -1,25 +1,35 @@
 import React from 'react';
-import { View, StatusBar } from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
-import { Colors } from 'react-native/Libraries/NewAppScreen';
-import KeepAwake from 'react-native-keep-awake';
-
-import BinaryClock from './src/components/BinaryClock';
+import BinaryClockScreen from './src/pages/BinaryClockScreen';
+import BinaryClockSettingsScreen from './src/pages/BinaryClockSettingsScreen';
+import Toast from 'react-native-toast-message';
 
+const Stack = createNativeStackNavigator();
 
 const App = () => {
-  const isDarkMode = true // useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
   return (
-    <View style={backgroundStyle}>
-      <StatusBar hidden={true} barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <KeepAwake />
-      <BinaryClock isDarkMode={isDarkMode} />
-    </View>
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="BinaryClockScreen"
+          component={BinaryClockScreen}
+          options={{
+            title: 'Binary Clock',
+            headerShown: false,
+          }}
+        />
+        <Stack.Screen
+          name="BinaryClockSettingsScreen"
+          component={BinaryClockSettingsScreen}
+          options={{
+            title: 'Binary Clock Settings',
+          }}
+        />
+      </Stack.Navigator>
+      <Toast position={'bottom'} />
+    </NavigationContainer>
   );
 };
 

ios/Podfile

@@ -19,7 +19,6 @@ target 'BinaryClock' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
-  pod 'react-native-keep-awake', :path => '../node_modules/react-native-keep-awake'
 
   target 'BinaryClockTests' do
     inherit! :complete

ios/Podfile.lock

@@ -284,6 +284,14 @@ PODS:
     - glog
   - react-native-keep-awake (4.0.0):
     - React
+  - react-native-safe-area-context (4.2.5):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - ReactCommon/turbomodule/core
+  - react-native-slider (4.2.2):
+    - React-Core
   - React-perflogger (0.68.0)
   - React-RCTActionSheet (0.68.0):
     - React-Core/RCTActionSheetHeaders (= 0.68.0)
@@ -349,6 +357,11 @@ PODS:
     - React-jsi (= 0.68.0)
     - React-logger (= 0.68.0)
     - React-perflogger (= 0.68.0)
+  - RNDefaultPreference (1.4.4):
+    - React-Core
+  - RNScreens (3.13.1):
+    - React-Core
+    - React-RCTImage
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -398,6 +411,8 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-keep-awake (from `../node_modules/react-native-keep-awake`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -410,6 +425,8 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNDefaultPreference (from `../node_modules/react-native-default-preference`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -469,6 +486,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-keep-awake:
     :path: "../node_modules/react-native-keep-awake"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -493,6 +514,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNDefaultPreference:
+    :path: "../node_modules/react-native-default-preference"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -529,6 +554,8 @@ SPEC CHECKSUMS:
   React-jsinspector: 90f0bfd5d04e0b066c29216a110ffb9a6c34f23f
   React-logger: 8474fefa09d05f573a13c044cb0dfd751d4e52e3
   react-native-keep-awake: afad8a51dfef9fe9655a6344771be32c8596d774
+  react-native-safe-area-context: ebf8c413eb8b5f7c392a036a315eb7b46b96845f
+  react-native-slider: 2f25c919f1dc309b90e2cc8346b8042ecec2102f
   React-perflogger: 15cb741d6c2379f4d3fc8f9e4d4e1110ef3020cb
   React-RCTActionSheet: ea9099db0597bd769430db1e2d011fd5fdb7fc5e
   React-RCTAnimation: 252df4749866f2654f37612f839522cac91c1165
@@ -541,6 +568,8 @@ SPEC CHECKSUMS:
   React-RCTVibration: 82fc52d3d96549b8c59a6c8c017d5a1a11457049
   React-runtimeexecutor: 9b1304f48e344c55bb3c36e13bf11461cb4da5d8
   ReactCommon: fab89a13b52f1ac42b59a0e4b4f76f21aea9eebe
+  RNDefaultPreference: 08bdb06cfa9188d5da97d4642dac745218d7fb31
+  RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 6671cf077f614314c22fd09ddf87d7abeee64e96
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a