Merge pull request #216 from flexbox/fix/dark-mode

fix dark mode switcher closes #213

Author: flexbox

challenges/data/02.md

@@ -98,7 +98,7 @@ async function fetchData() {
 }
 
 export function useStarships() {
-  return useQuery(["starships"], fetchData);
+  return useQuery({ queryKey: ["starships"], queryFn: fetchData} );
 }
 ```
 

challenges/ecosystem/02.md

@@ -124,17 +124,18 @@ module.exports = {
   env: {
     node: true
   },
-  parser: "@typescript-eslint/parser",
-  root: true,
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  root: true, // make sure eslint picks up the config at the root of the directory
   extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended"
+    "eslint:recommended", // ESLint rules
+    "plugin:@typescript-eslint/recommended", // TypeScript rules
+    "plugin:react/recommended", // React rules
+    "plugin:react/jsx-runtime", // support for React 17 JSX
+    "plugin:prettier/recommended" // Prettier recommended rules
   ],
-  plugins: ["react", "react-native", "simple-import-sort"],
+  plugins: ["react", "react-native", "simple-import-sort"], // add React and React Native plugins
   rules: {
-    "prettier/prettier": [
+    "prettier/prettier": [ // Prettier rules
       "warn",
       {
         usePrettierrc: true
@@ -222,4 +223,8 @@ You can share your VSCode settings with your team by adding a `.vscode` folder a
 }
 ```
 
+This will make sure everyone in your team is using the same settings.
+
+- [ ] create a ``.vscode` folder and paste the previous `settings.json` files.
+
 - [ ] Install [TanStack Query ESLint plugin](https://tanstack.com/query/v4/docs/react/eslint/eslint-plugin-query).

challenges/ecosystem/05.md

@@ -161,6 +161,12 @@ Ran all test suites.
 ✨  Done in 16.14s.
 ```
 
+At this point, TypeScript will complain on your `hello.test.ts` file because we need to install jest types.
+
+```console
+npm i --save-dev @types/jest
+```
+
 ### Installing React Native Testing Library
 
 we need to install `@testing-library/react-native` and `@testing-library/jest-native`.
@@ -199,8 +205,13 @@ Let's now create a workflow to quickly add units tests on your codebase.
 +  "test:watch": "jest --watch"
 ```
 
-Now you can run `yarn test:watch` to watch your files and run tests automatically.
+Now you can run `npm run test:watch` to watch your files and run tests automatically.
 
 ### Testing a component
 
 - [ ] Create tests files for your components
+
+## Learning More
+
+- https://reactnativetesting.io/
+- https://github.com/vanGalilea/react-native-testing?tab=readme-ov-file#covered-examples-

challenges/react-navigation/01.md

@@ -25,35 +25,22 @@ Here is a preview of our application user flow:
 
 **🔭 Hint:** you just installed **the core packages**, for every type of navigator (`Native Stack`, `Drawer`, `Bottom Tabs`…) you will need to **install other packages**.
 
-### Organise your routes
-
-We are going to create a "sitemap" of all our routes. This will help-us to have a single source of truth.
-
-> We will use a [TypeScript feature called `const` assertions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions).
-
-```javascript
-// ./src/navigation/Routes.ts
-
-const Routes {
-  LOGIN_SCREEN = 'Login',
-  TERMS_SCREEN = 'Terms',
-  STARSHIP_FEED_SCREEN = 'Starships',
-  STARSHIP_DETAIL_SCREEN = 'Starship',
-} as const;
-```
-
-- [ ] Create a `Routes.ts` file in `./src/navigation/`
-
 ### Create a Navigator file
 
-- [ ] Create a new component called `Navigator.tsx` on `./src/navigation/Routes.ts` and update the **entry point of your application**, such as `App.tsx`.
-- [ ] Wrap your `Stack` [with a `NavigationContainer`](https://reactnavigation.org/docs/getting-started#wrapping-your-app-in-navigationcontainer).
+- [ ] Create a new component called `Navigator.tsx` on `./src/navigation/`
+- [ ] return a [`NavigationContainer` from `@react-navigation/native`](https://reactnavigation.org/docs/getting-started#wrapping-your-app-in-navigationcontainer).
+- [ ] Update the **entry point of your application**, `App.tsx` to  import your component `<Navigator />`.
 
 ### Create your first Stack
 
 - [ ] Read the [`Stack.Navigator` documentation](https://reactnavigation.org/docs/hello-react-navigation).
 - [ ] Create a Stack Navigator in `./src/navigation/Navigator.tsx` that shows the `LoginScreen` and the `TermsScreen`.
-- [ ] Use `LOGIN_SCREEN` and `TERMS_SCREEN` from `Routes.ts`as screen names to maintain consistency when navigating
+
+You will have something like this:
+
+```javascript
+<Stack.Screen name="Terms" component={TermsScreen} />
+```
 
 **🔭 Hint:** You can have multiple `function`s in the same file.
 
@@ -75,7 +62,7 @@ Here is a function to navigate between screens:
 
 ```javascript
 function navigateToTerms() {
-  navigation.navigate('Routes.TERMS_SCREEN');
+  navigation.navigate('Terms');
 }
 ```
 
@@ -90,3 +77,37 @@ function navigateToTerms() {
   ...
 </Stack.Navigator>
 ```
+
+## 👽 Bonus
+
+### Create a files with all your screens
+
+We are going to create a "sitemap" of all our routes. This will help-us in the long run to have a single source of truth.
+
+> We will use a [TypeScript feature called `const` assertions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions).
+
+```javascript
+// ./src/navigation/Routes.ts
+
+const Routes {
+  LOGIN_SCREEN: "Login",
+  TERMS_SCREEN: "Terms", // We will use Routes.TERMS_SCREEN to navigate later
+  STARSHIP_FEED_SCREEN: "Starships",
+  STARSHIP_DETAIL_SCREEN: "Starship",
+} as const;
+```
+
+- [ ] Create a `Routes.ts` file in `./src/navigation/`
+- [ ] Update the `name` of the screens with the `Routes` constants.
+
+```javascript
+<Stack.Screen name={Routes.TERMS_SCREEN} component={TermsScreen} />
+```
+
+- [ ] Udpate when using `navigate` props, use the `Routes` constants.
+
+```javascript
+function navigateToTerms() {
+  navigation.navigate(Routes.TERMS_SCREEN);
+}
+```

hackathon/spacecraft/App.tsx

@@ -5,14 +5,17 @@ import { NetworkProvider } from "react-native-offline";
 import { Provider as PaperProvider } from "react-native-paper";
 
 import { AuthenticationProvider } from "~/context/Authentication";
+import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";
 import { Navigator } from "~/navigation/Navigator";
 
 const queryClient = new QueryClient();
 
 const App = () => {
+  const appearanceTheme = useAppearanceTheme();
+
   return (
     <QueryClientProvider client={queryClient}>
-      <PaperProvider>
+      <PaperProvider theme={appearanceTheme}>
         <NetworkProvider>
           <AuthenticationProvider>
             <Navigator />

hackathon/spacecraft/package.json

@@ -34,6 +34,7 @@
     "@tanstack/react-query": "^4.29.12",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.5.0",
+    "deepmerge": "^4.3.1",
     "expo": "^49.0.5",
     "expo-constants": "~14.4.2",
     "expo-image": "~1.3.2",
@@ -56,10 +57,6 @@
     "rn-placeholder": "^3.0.3"
   },
   "devDependencies": {
-    "app-icon-badge": "^0.0.13",
-    "jest": "^29.6.4",
-    "jest-expo": "^49.0.0",
-    "@types/jest": "^29.5.4",
     "@babel/core": "^7.19.3",
     "@babel/preset-typescript": "^7.18.6",
     "@react-native-community/datetimepicker": "7.2.0",
@@ -73,8 +70,10 @@
     "@tanstack/eslint-plugin-query": "^4.29.9",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^12.1.2",
+    "@types/jest": "^29.5.4",
     "@types/react": "~18.2.14",
     "@types/react-dom": "~18.0.8",
+    "app-icon-badge": "^0.0.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-root-import": "^6.6.0",
@@ -83,6 +82,8 @@
     "eslint-config-react-native-wcandillon": "^3.9.0",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
     "eslint-plugin-import": "^2.25.3",
+    "jest": "^29.6.4",
+    "jest-expo": "^49.0.0",
     "typescript": "^5.1.3"
   }
 }

hackathon/spacecraft/src/components/ScreenContainer.tsx

@@ -2,7 +2,7 @@ import { useNavigation } from "@react-navigation/native";
 import type { ReactNode } from "react";
 import React from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
-import { IconButton, Text } from "react-native-paper";
+import { IconButton, Text, useTheme } from "react-native-paper";
 
 import { Offline } from "~/components/Offline";
 
@@ -52,9 +52,13 @@ export const ScreenContainer = ({
   withGoBack = false,
   accessoryFooter,
 }: ScreenContainerProps) => {
+  const theme = useTheme();
+
   if (withScrollView) {
     return (
-      <ScrollView style={styles.container}>
+      <ScrollView
+        style={[styles.container, { backgroundColor: theme.colors.background }]}
+      >
         <ScreenContainerTitle title={title} withGoBack={withGoBack} />
         {children}
         <Offline />
@@ -64,7 +68,9 @@ export const ScreenContainer = ({
   }
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
       <ScreenContainerTitle title={title} withGoBack={withGoBack} />
       {children}
       <Offline />

hackathon/spacecraft/src/hooks/useAppearanceTheme.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import type { AppStateStatus } from "react-native";
+import { Appearance, AppState } from "react-native";
+
+import { CombinedDarkTheme, CombinedDefaultTheme } from "~/theme/theme";
+
+export const useAppearanceTheme = () => {
+  const [theme, setTheme] = useState(
+    Appearance.getColorScheme() === "dark"
+      ? CombinedDarkTheme
+      : CombinedDefaultTheme
+  );
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (nextAppState === "active") {
+        const colorScheme = Appearance.getColorScheme();
+        setTheme(
+          colorScheme === "dark" ? CombinedDarkTheme : CombinedDefaultTheme
+        );
+      }
+    };
+
+    AppState.addEventListener("change", handleAppStateChange);
+  }, []);
+
+  return theme;
+};

hackathon/spacecraft/src/navigation/Navigator.tsx

@@ -6,14 +6,16 @@ import { BottomTabNavigator } from "./BottomTabNavigator";
 import { AuthNavigator } from "./AuthNavigator";
 
 import { useAuthentication } from "~/context/Authentication";
+import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";
 
 const Stack = createNativeStackNavigator();
 
 export const Navigator = () => {
   const { user } = useAuthentication();
+  const appearanceTheme = useAppearanceTheme();
 
   return (
-    <NavigationContainer>
+    <NavigationContainer theme={appearanceTheme}>
       <Stack.Navigator screenOptions={{ headerShown: false }}>
         {user ? (
           <Stack.Screen name={"BOTTOM_TABS"} component={BottomTabNavigator} />

hackathon/spacecraft/src/theme/theme.ts

@@ -0,0 +1,18 @@
+import {
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+} from "@react-navigation/native";
+import {
+  MD3DarkTheme,
+  MD3LightTheme,
+  adaptNavigationTheme,
+} from "react-native-paper";
+import merge from "deepmerge";
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+  reactNavigationLight: NavigationDefaultTheme,
+  reactNavigationDark: NavigationDarkTheme,
+});
+
+export const CombinedDefaultTheme = merge(MD3LightTheme, LightTheme);
+export const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);