Jan Hesters

Sit Shotgun With A Senior To TDD An Expo React Native App Using Redux

One of the best ways to learn if you are a developer is by having a mentor.

I'm Jan, I'm the CTO of ReactSquad and in this video, you get to sit shotgun and build the app that you can see on screen right now together with me.

Note to Cheta or Ibrahim: Record the whole flow of the app including asking for permissions, etc. at the END of this tutorial, so we can show it here. Remember, you can record the iOS device through the simulator (button on the top right of the simulator).

Make sure you're using the latest version of Expo and let me know if you needed to upgrade (this tutorial is still written for Expo SDK 51).

Also, this script has many notes like this one. During and after recording the video, double check that you took all the notes into account.

Furthermore, when you record the code snippets: relax.

Reveal something. Pause. Scroll. Pause. Reveal the next thing. Pause. Etc.

And read the script to plan ahead. Some of these code snippets are long. So make sure that you avoid cutting off important parts. E.g. make sure the imports are fully shown, the createProps function is visible in full, each test case is visible in full, etc.

We can always speed up your recordings in post-production, but if they're too hasty or missing something, you'll have to redo them. This is the most ambitious YT-video, yet, so let's make sure it turns out great.

Make sure you get the positioning right in the long code snippets. I always used comments to indicate where the code snippet starts and ends.

Lastly, given how long this tutorial is, I might have made some mistakes. If you catch any, let me know via Slack, so we can update the script.

You get to watch a senior developer do test-driven development in React. You get to see how a senior developer structures their code. You get to see how a senior developer uses function composition. And at the very end of the video, you learn how you can use sagas to isolate random side effects, in this case scheduling notifications.

Even if you are a senior developer yourself, this video is jam-packed with knowledge and little nuggets that you get to steal to use in your own code.

Even though this video can be watched on its own as a standalone video and you can learn a lot from it, it does use Redux. And this is actually video 4 in a 5-part series on Redux.

If you get stuck at some point as a new developer, go watch parts 1 to 3 first and then resume wherever you got stuck because you do need to understand Redux to understand what's going on in this video. I'm going to mention this throughout the video to give you pointers what to watch as prerequisites, but this video is definitely NOT for you if you're new to React, or Redux.

If you're familiar with React but new to React Native, that's okay - you can still follow along. If you feel uncomfortable, a quick React Native crash course might help.

// TODO: thoroughly dsecribe the Loom recording of the app.

So, without further ado, let's get started!

Create The App

Start by setting up your project using Expo.

Open your temrminal and run the create-expo-app command.

$ npx create-expo-app@latest            
✔ What is your app named? … real-world-redux
✔ Downloaded and extracted project files.
> npm install
 
...
 
✅ Your project is ready!
 
To run your project, navigate to the directory and run one of the following npm commands.
 
- cd real-world-redux
- npm run android
- npm run ios
- npm run web

Next, navigate into your project directory and open it in your favorite code editor.

$ cd real-world-redux && code .

Note to Cheta & Ibrahim: Show & "explore" the app/ folder a bit because it'll be deleted in the next step. Show the folders in the side bar, open some files, scroll through some code (slowly), etc.

Make Sure Expo Works

Note to Cheta or Ibrahim: Show a recording of each of the steps here, e.g. show the QR code in the terminal, show the developer menu in the simulator, etc.

Make sure that your Expo environment is working correctly.

$ npm start

If you want to run the app on a physical device, use the Expo Go app and scan the QR code displayed in your terminal.

Alternatively, you can run it on a simulator:

• Press i to open the iOS simulator.
• Press a to open the Android emulator.

If you encounter any issues running the app on a device or simulator, you can run it in your web browser by accessing http://localhost:8081.

In the simulator, you can press r to reload the app and m to open the developer menu.

Remove Expo Boilerplate

When you create an Expo project, it is created in TypeScript. But this tutorial is going to use JavaScript instead. In the 5th part of this series, you're going to create a TypeScript app with Redux.

New Expo apps also come with a bunch of boilerplate code that you can read to familiarize yourself with React Native apps. At this point, if you're new to React Native, take a moment to explore the app/ folder that Expo has generated.

You can get rid of this boilerplate code by running the "reset-project" script.

$ npm run reset-project && rm -rf ./app-example && rm -rf ./scripts && rm -rf ./components && rm -rf ./constants && rm -rf ./hooks

This command moves the files from the "app" folder to "app-example," then creates a new "app" folder with a new "index.tsx" file. You then delete the app-example/ folder and the scripts/ folder, as well the components, hooks and constants folders.

Code Formatting

To ensure your code stays clean and consistent, you'll set up ESLint and Prettier. Install Prettier, ESLint, and a variety of plugins such as unicorn, import, prettier, simple-import-sort, and the expo config.

$ npm install --save-dev prettier eslint@8 eslint-plugin-unicorn eslint-plugin-import eslint-plugin-prettier eslint-config-prettier eslint-plugin-simple-import-sort eslint-config-expo

Create a prettier.config.js file with the following content:

/* eslint-disable unicorn/prefer-module */
module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: false,
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: false,
  plugins: [],
  printWidth: 80,
  proseWrap: 'always',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};

Also, create an .eslintrc.js file:

/* eslint-disable unicorn/prefer-module */
module.exports = {
  extends: [
    'expo',
    'plugin:unicorn/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'prettier',
  ],
  plugins: ['prettier', 'simple-import-sort'],
  rules: {
    'prettier/prettier': 'error',
    'unicorn/filename-case': [
      'error',
      {
        case: 'kebabCase',
      },
    ],
    'unicorn/no-array-reduce': 'off',
    'unicorn/no-array-callback-reference': 'off',
    'unicorn/no-null': 'off',
    'unicorn/prevent-abbreviations': [
      'error',
      {
        replacements: {
          props: false,
          params: false,
        },
      },
    ],
    'simple-import-sort/imports': 'error',
    'simple-import-sort/exports': 'error',
    'import/order': 'off',
  },
  overrides: [
    {
      files: ['src/tests/**/*.js', 'src/**/*.test.js'],
      env: {
        jest: true,
      },
    },
  ],
};

This configuration sets up ESLint to work with Prettier and Expo. It includes several plugins and rules to sort your imports and enforce a certain opinionated coding style through the unicorn plugin.

If you want to learn more, you can look up the respective plugins and configs online to see what they do.

Folder Structure

Create a src/ directory for your source code as the parent of the app/ directory.

Furthermore, you're going to group your files by feature.

When you group files by feature in a project, you organize all related components, reducers, and tests together, which makes it easy to manage and modify each feature.

.  
├── onboarding/
│ ├── component
│ ├── reducer
│ └── test
└── reminders/
    ├── component
    ├── reducer
    └── test

After you've moved the app/ directory into src/ directory run your app again and verify that you did not break anything.

Install & Configure Testing Tools

To set up testing for your app, install React Native Testing Library:

npx expo install -- --save-dev @testing-library/react-native

Also, install additional testing utilities for Redux Saga and to generate fake data:

npm i --save-dev redux-saga-test-plan @faker-js/faker

You don't need react-test-renderer for this project, so remove it:

npm uninstall react-test-renderer @types/react-test-renderer

In your package.json, add the Jest configuration:

{
  // ...
  "jest": {
    "preset": "jest-expo",
    "setupFilesAfterEnv": ["<rootDir>/src/tests/setup-jest.js"],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@rneui)"
    ]
  },
  // ...
}

The "preset" property tells Jest to use the jest-expo preset, which is a configuration that Jest uses to run tests in a React Native environment.

The "setupFilesAfterEnv" property tells Jest to use the src/tests/setup-jest.js file as a setup file for your tests.

The "transformIgnorePatterns" property tells Jest to ignore certain node modules that are not compatible with Jest.

Next, create the Jest setup file src/tests/setup-jest.js:

import "@testing-library/react-native/extend-expect";
import "react-native-gesture-handler/jestSetup";
 
import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
 
jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);

Install Redux And Other Deps

Install Redux, React Redux, middleware, Ramda for functional programming, date-fns for date manipulation, RNEUI for styling, the async storage package and cuid2 for unique IDs.

Note to Cheta or Ibrahim: After you installed these dependencies, you might need to manually fix them because at the time of writing this tutorial, some dependencies were not compatible with each other and I got this error:

The following packages should be updated for best compatibility with the installed expo version:
  @react-native-async-storage/async-storage@2.0.0 - expected version: 1.23.1
  expo@51.0.37 - expected version: ~51.0.38

You can always peek in our GH repo to find the dependencies I've used during the writing of this tutorial.

npm i --save @react-native-async-storage/async-storage @reduxjs/toolkit redux-persist redux-saga ramda @rneui/themed @rneui/base @paralleldrive/cuid2 react-redux date-fns

Style

Define your color palette in src/styles/colors.js:

export const darkColors = {
  backgroundColorPrimary: '#111827',
  backgroundColorSecondary: '#1f2937',
  backgroundColorTertiary: 'rgba(55, 65, 81, 0.1)',
  secondary: 'rgba(255, 255, 255, 0.1)',
  primaryColor: '#6366f1',
  primaryColorLight: '#818cf8',
  textPrimary: '#ffffff',
  textSecondary: '#d1d5db',
  borderColor: 'rgba(255, 255, 255, 0.05)',
};

You can tweak these to fit your desired color scheme and make the app your own.

Then, create a theme using these colors in src/styles/themes.js:

import { createTheme } from '@rneui/themed';
 
import { darkColors } from './colors';
 
export const darkTheme = createTheme({
  components: {
    Button: {
      activeOpacity: 0.8,
      buttonStyle: {
        backgroundColor: darkColors.primaryColor,
        borderRadius: 6,
      },
      disabledStyle: {
        backgroundColor: darkColors.primaryColor,
        opacity: 0.5,
      },
    },
    Text: {
      style: {
        color: darkColors.textPrimary,
      },
    },
    Slider: {
      maximumTrackTintColor: darkColors.borderColor,
      minimumTrackTintColor: darkColors.primaryColorLight,
      thumbTintColor: darkColors.primaryColor,
    },
  },
});

Expo has a file-based routing system similar to Next.js. Place a route inside a folder named after the route. The index.js file in that folder becomes the screen for that route.

Files named _layout.js include shared elements for all nested routes. They must contain one <Slot /> component that renders the child route.

You can use the group syntax () to prevent a segment from showing in the URL.

• app/main/home.js matches /main/home.
• app/main/_layout.js wraps around /main/home.
• app/(main)/home.js matches /home.
• app/(main)/_layout.js wraps around /home, but NOT /main/home.
• app/_layout.js wraps around everything (/main/home and /home).

This is useful because assume you want to have two routes: /home and /about.

Now you want to have different layouts for each of these routes. If you'd just create the following 3 files:

• app/_layout.js
• app/home.js
• app/about.js

In this case, home and about would share the same layout.

If you want to have different layouts for each of these routes, you need to create the following files:

• app/(home)/_layout.js
• app/(home)/home.js
• app/(about)/_layout.js
• app/(about)/about.js

Another possibility would be to structure your routes like this:

• app/home/_layout.js
• app/home/index.js
• app/about/_layout.js
• app/about/index.js

You want to access your theme throughout your entire app. So, rename src/app/_layout.tsx to src/app/_layout.js and wrap a ThemeProvider around your app in your root layout.

import { ThemeProvider } from '@rneui/themed';
import { Slot } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
 
import { darkTheme } from '../styles/themes';
 
export default function Layout() {
  return (
    <ThemeProvider theme={darkTheme}>
      <StatusBar style="light" />
      <Slot />
    </ThemeProvider>
  );
}

Import the ThemeProvider from React Native Elements, and pass your darkTheme to it. Then wrap it around your status bar and slot.

Assets

If you want to, you can personalize your app with a custom icon and splash screen. The icon represents your app on your phone, while the splash screen appears when your app is launching.

Expo provides a default icon and splash screen, but you can also use your own. To use custom images, you can either download adaptive-icon.png, icon.png, and splash.png from the tutorial's GitHub repository or create your own. If you choose to download, save these files in your assets/images/ folder.

Ensure that the paths in your app.json correctly point to these image files.

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#111827",
        "foregroundImage": "./assets/images/adaptive-icon.png"
      }
    },
    "experiments": {
      "typedRoutes": true
    },
    "icon": "./assets/images/icon.png",
    "ios": {
      "supportsTablet": true
    },
    "name": "real-world-redux",
    "orientation": "portrait",
    "plugins": [
      "expo-router"
    ],
    "scheme": "real-world-redux",
    "slug": "real-world-redux",
    "splash": {
      "backgroundColor": "#111827",
      "image": "./assets/images/splash.png",
      "resizeMode": "contain"
    },
    "userInterfaceStyle": "dark",
    "version": "1.0.0",
    "web": {
      "bundler": "metro",
      "favicon": "./assets/images/favicon.png",
      "output": "static"
    }
  }
}

Configure the backgroundColor for your adaptive icon and your splash screen to be #111827 to match the backgroundColorPrimary color in your theme.

And hardcode the user interface style to dark.

Lastly, verify that your "name", "slug", and "scheme" are set to "real-world-redux".

Note to Cheta or Ibrahim: Record reopening the app here after configuring the assets and show the app icon and the new splash screen.

On your phone, your app has now a new icon. And when you open or reload your app, you see the new splash screen.

Set Up Helpers

You're going to use Test-Driven Development (TDD) throughout building this app.

The first helper you'll write is asyncPipe. Create a file src/utils/async-pipe.js and start with an empty function:

export const asyncPipe = () => () => 0;

When you use TDD, you always start by writing an empty function, component, or a 'do nothing' version of the code you want to test first. This approach lets you write failing tests against a placeholder implementation, rather than seeing your tests fail simply because the thing you're testing can't be imported as it doesn't exist yet.

Write the tests for this function. Create src/utils/async-pipe.test.js adjacent to the src/utils/async-pipe.js file because remember, you're grouping by feature, which means that the implementations live next to their tests.

import { asyncPipe } from './async-pipe';
 
const asyncInc = async x => x + 1;
const asyncDouble = async x => x * 2;
 
describe('asyncPipe()', () => {
  test('given two promises: composes them in reverse mathematical order', async () => {
    const asyncIncDouble = asyncPipe(asyncInc, asyncDouble);
 
    const actual = await asyncIncDouble(20);
    const expected = 42;
 
    expect(actual).toEqual(expected);
  });
});

Run your tests with npm test and see that it fails, as expected. It's important to see tests fail before making them pass to ensure they're working correctly.

npm test starts a so-called watch script. This is a long-running process that watches for file changes and automatically reruns your tests when you save your file for all files that have been affected by the change. This watch script runs by default when you use Jest. You need to run this command in your root folder but it will find all files in your project even if they're deeply nested within folders.

In the recordings that you see on screen, you see me running a specific test by using something like npm test async-pipe.test.js. But that is just for your convenience so in this video it's easier to see the respective test's results. You should keep running your watch script, which runs your tests for you whenever you save your file.

Note to Cheta or Ibrahim: Always record watching the test fail, and then after you made the test pass, also record the test passing.

You can run a specific test like this: npm test onboarding-helpers.test.js

 FAIL  src/utils/async-pipe.test.js
  asyncPipe()
    ✕ given two promises: composes them in reverse mathematical order (4 ms)
 
  ● asyncPipe() › given two promises: composes them in reverse mathematical order
 
    expect(received).toEqual(expected) // deep equality
 
    Expected: 42
    Received: 0
 
      11 |     const expected = 42;
      12 |
    > 13 |     expect(actual).toEqual(expected);
         |                    ^
      14 |   });
      15 | });
      16 |
 
      at Object.toEqual (src/utils/async-pipe.test.js:13:20)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
 
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.858 s, estimated 1 s
Ran all test suites.
 
Watch Usage: Press w to show more.

Now implement the asyncPipe function to make it pass.

export const asyncPipe =
  (...fns) =>
  x =>
    fns.reduce(async (y, f) => f(await y), x);

If you're unfamiliar with asyncPipe, it's a function that composes asynchronous functions from left to right, passing the result of each function to the next. To learn more, watch "JavaScript Promises Explained, But On A Senior-Level", which breaks down the asyncPipe function step-by-step.

Onboarding Screen

You can write the first feature without using Redux. This demonstrates an important lesson: always consider whether you truly need Redux for a feature. Sometimes, the answer is "no".

The onboarding logic will manage the notification permissions.

First, install the necessary Expo packages:

$ npx expo install expo-device
$ npx expo install expo-notifications

expo-device is a library that allows you to access system information about the physical device your app is running on. This includes data like the device's manufacturer and model.

expo-notifications is a library that handles all aspects of local notifications for your app. It helps you manage how notifications are presented, scheduled, and responded to.

Create a constants file for onboarding in src/features/onboarding/onboarding-constants.js:

export const onboardingStorageKeys = {
  /**
   * The user was asked for notification permissions during onboarding.
   */
  WAS_ASKED_FOR_PERMISSIONS: 'wasAskedForPermissions',
  /**
   * The user completed the onboarding and pressed the "Get Started" button.
   */
  GOT_STARTED: 'gotStarted',
};

You'll use these keys later to save the user's onboarding progress to AsyncStorage, which is React Native's local storage solution.

Next, create onboarding helpers to determine whether the user has granted notification permissions. Start with an empty isGranted function.

export const isGranted = () => {};

Write the tests for the isGranted function.

import { isGranted } from './onboarding-helpers';
 
describe('isGranted()', () => {
  test.each([
    { status: 'granted', expected: true },
    { status: 'denied', expected: false },
    { status: 'undetermined', expected: false },
  ])('given a status of $status: returns $expected', ({ status, expected }) => {
    const actual = isGranted(status);
 
    expect(actual).toEqual(expected);
  });
});

Use Jest's .each modifier, which allows you to write a test prose once, and then run the same test with different setup data.

You make sure that for the different status values, the function returns the expected result.

Watch the tests fail, then implement isGranted to make the test pass.

Note to Cheta / Ibrahim: Always reveal the whole JSDoc string first, so:

1.)

export const isGranted = () => {};

2.) reveal ALL JSDoc in one go

/**
 * Checks if the given permission status is 'granted'.
 *
 * @param {string} status - The permission status to check.
 * @returns {boolean} True if the status is 'granted', false otherwise.
 *
 * @example
 * isGranted('granted') // returns true
 * isGranted('denied') // returns false
 * isGranted('undetermined') // returns false
 */
export const isGranted = () => {};

3.)

import { equals } from 'ramda';
 
/**
 * Checks if the given permission status is 'granted'.
 *
 * @param {string} status - The permission status to check.
 * @returns {boolean} True if the status is 'granted', false otherwise.
 *
 * @example
 * isGranted('granted') // returns true
 * isGranted('denied') // returns false
 * isGranted('undetermined') // returns false
 */
export const isGranted = equals('granted');

import { equals } from 'ramda';
 
/**
 * Checks if the given permission status is 'granted'.
 *
 * @param {string} status - The permission status to check.
 * @returns {boolean} True if the status is 'granted', false otherwise.
 *
 * @example
 * isGranted('granted') // returns true
 * isGranted('denied') // returns false
 * isGranted('undetermined') // returns false
 */
export const isGranted = equals('granted');

Watch your tests pass.

Now, you can write a helper function to check if the user has granted local notification permissions. Do NOT write unit tests for this function because it has many side effects. Testing it would require mocking several modules, and excessive mocking can be a code smell. Explaining when to mock or not is a topic for another video, so I'll leave it with that here.

Note to Cheta or Ibrahim: Now that / when the file(s) get(s) longer, first show the new imports, then slowly scroll down, then implement the function (1. name and empty callback, 2.) TSDOC, 3.) implementation). Obviously still break down the implementation step by step.

import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import { equals } from 'ramda';
import { Platform } from 'react-native';
 
/**
 * Checks if the given permission status is 'granted'.
 *
 * @param {string} status - The permission status to check.
 * @returns {boolean} True if the status is 'granted', false otherwise.
 *
 * @example
 * isGranted('granted') // returns true
 * isGranted('denied') // returns false
 * isGranted('undetermined') // returns false
 */
export const isGranted = equals('granted');
 
/**
 * Checks if the app has permission to send local notifications.
 *
 * @async
 * @returns {Promise<boolean>} A promise that resolves to `true` if the app has
 * permission to send local notifications. Otherwise it resolves with `false`.
 *
 * @example
 * const hasPermission = await getHasLocalNotificationsPermissions();
 * if (hasPermission) {
 *   console.log('App has permission to send notifications');
 * } else {
 *   console.log('App does not have permission to send notifications');
 * }
 */
export async function getHasLocalNotificationsPermissions() {
  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }
 
  if (Device.isDevice) {
    const { status: existingStatus } =
      await Notifications.getPermissionsAsync();
 
    return isGranted(existingStatus);
  }
 
  return false;
}

The getHasLocalNotificationsPermissions function performs the following steps:

1. For Android devices, it sets up a default notification channel.
2. Checks if the app is running on a physical device.
3. If on a physical device, it requests the current notification permissions.
4. Returns whether the permission status is 'granted'.
5. If it's not on a physical device, there is no way to send notifications, so it defaults to false.

You also need a function to ask the user to grant notification permissions. It also has side effects, which can't easily be tested without mocking, so you won't write any unit tests for it either.

import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import { equals, prop } from 'ramda';
import { Platform } from 'react-native';
 
import { asyncPipe } from '../../utils/async-pipe';
 
/**
 * Checks if the given permission status is 'granted'.
 *
 * @param {string} status - The permission status to check.
 * @returns {boolean} True if the status is 'granted', false otherwise.
 *
 * @example
 * isGranted('granted') // returns true
 * isGranted('denied') // returns false
 * isGranted('undetermined') // returns false
 */
export const isGranted = equals('granted');
 
/**
 * Checks if the app has permission to send local notifications.
 *
 * @returns {Promise<boolean>} A promise that resolves to `true` if the app has
 * permission to send local notifications. Otherwise it resolves with `false`.
 *
 * @example
 * const hasPermission = await getHasLocalNotificationsPermissions();
 * if (hasPermission) {
 *   console.log('App has permission to send notifications');
 * } else {
 *   console.log('App does not have permission to send notifications');
 * }
 */
export async function getHasLocalNotificationsPermissions() {
  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }
 
  if (Device.isDevice) {
    const { status: existingStatus } =
      await Notifications.getPermissionsAsync();
 
    return isGranted(existingStatus);
  }
 
  return false;
}
 
/**
 * Requests local notifications permissions and checks if they are granted.
 *
 * @returns {Promise<boolean>} A promise that resolves to `true` if permissions
 * are granted, `false` otherwise.
 *
 * @example
 * const permissionsGranted = await requestLocalNotificationsPermissions();
 * if (permissionsGranted) {
 *   console.log('Local notifications permissions granted');
 * } else {
 *   console.log('Local notifications permissions not granted');
 * }
 */
export const requestLocalNotificationsPermissions = asyncPipe(
  Notifications.requestPermissionsAsync,
  prop('status'),
  isGranted,
);

This function uses asyncPipe to chain the following operations:

1. Request permissions using Notifications.requestPermissionsAsync(). This function triggers a modal on the device asking the user to allow notifications. After user granted or prohibited permissions, it returns a promise that resolves to an object containing data about the notification permissions on the device. You probably have experienced promises where you are waiting on computers to return a response or a result from database. But this promise "waits" for user interaction and resolves with the result of that user's decision.
2. Extract the 'status' property from the result.
3. Check if the status is 'granted' using the isGranted function.

You need to check for permissions whenever the app "comes to the foreground". "Comes to the foreground" refers to when an app becomes the active application on a device, visible and interactable by the user. This occurs after being in the background (running but not visible) or inactive (partially active, like during transitioning states or when a call or notification partially obscures the app). The transition to "foreground" means the app is now the primary focus on the device screen.

You're going to isolate this check in a custom hook.

import { useEffect, useRef, useState } from 'react';
import { AppState } from 'react-native';
 
/**
 * A custom React hook that triggers a side effect function whenever the app
 * comes to the foreground.
 *
 * @param {Function} effect - The side effect function to run when the app comes
 * to the foreground.
 * @returns {string} - The current state of the app ('active', 'inactive', or
 * 'background').
 */
export function useAppComesToForegroundEffect(effect) {
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);
 
  useEffect(() => {
    // This variable is called subscription because it proactively listens for
    // changes in the app's state until ...
    const subscription = AppState.addEventListener('change', nextAppState => {
      if (
        /inactive|background/.test(appState.current) &&
        nextAppState === 'active'
      ) {
        effect();
      }
 
      appState.current = nextAppState;
      setAppStateVisible(appState.current);
    });
 
    return () => {
      // ... it's unsubscribed in the cleanup function of this useEffect hook.
      subscription.remove();
    };
 
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  return appStateVisible;
}

This hook performs the following steps:

1. Initializes a ref with the current app state and a state variable to track it.
2. Sets up an effect that listens for app state changes.
3. When the app state changes to 'active' from 'inactive' or 'background', it runs the provided effect function. Note: The AppState can be 'active', 'background', 'inactive', 'unknown', or 'extension'.
4. Updates the ref and state variable with the new app state.
5. Cleans up the event listener when the component unmounts.

To make it easy to guard a specific screen when the user lacks permissions, you'll create a withNotificationPermissions higher-order component (HOC) that you can wrap around any screen.

/* eslint-disable unicorn/consistent-function-scoping */
import { useNavigation } from 'expo-router';
import { useState } from 'react';
 
import { getHasLocalNotificationsPermissions } from './onboarding-helpers';
import { useAppComesToForegroundEffect } from './use-app-comes-to-foreground-effect';
 
export const withNotificationPermissions = Component =>
  function WithNotificationPermissions(properties) {
    const [hasNotificationPermissions, setHasNotificationPermissions] =
      useState(false);
    const navigation = useNavigation();
 
    async function ensureNotificationPermissions() {
      const hasPermissions = await getHasLocalNotificationsPermissions();
      const { routes } = navigation.getState();
 
      if (!hasPermissions && routes[0].name !== 'index') {
        navigation.reset({ index: 0, routes: [{ name: 'index' }] });
      }
 
      setHasNotificationPermissions(hasPermissions);
    }
 
    useAppComesToForegroundEffect(ensureNotificationPermissions);
 
    return (
      <Component
        hasNotificationPermissions={hasNotificationPermissions}
        {...properties}
      />
    );
  };

Import the useNavigation and useState hooks, along with the getHasLocalNotificationsPermissions helper and the useAppComesToForegroundEffect hook.

Define a withNotificationPermissions HOC. It uses useState to track whether the user has granted permissions.

Then, define an ensureNotificationPermissions function that checks if the user has granted permissions using getHasLocalNotificationsPermissions. If the user has prohibited permissions, it redirects them to the onboarding screen using the reset method.

By using the useAppComesToForegroundEffect hook and the ensureNotificationPermissions function, it checks for permissions whenever the app comes to the foreground. This is important because the user could revoke permissions at any time when they leave the app, which would break the app's functionality.

Lastly, it passes whether the user has granted permissions to the wrapped component as a prop. You will later wrap the HOC around the onboarding screen, which uses the hasNotificationPermissions prop to automatically forward users into the main app if they have granted permissions.

Now, create a useEffectOnce hook that runs a function exactly once.

import { useEffect } from 'react';
 
export const useEffectOnce = (effect, deps) => {};

Write the tests for this hook.

import { renderHook } from '@testing-library/react-native';
 
import { useEffectOnce } from './use-effect-once';
 
describe('useEffectOnce()', () => {
  test('runs the effect exactly once per component mount', () => {
    const effect = jest.fn();
 
    expect(effect).not.toHaveBeenCalled();
 
    const { rerender } = renderHook(() => useEffectOnce(effect));
 
    expect(effect).toHaveBeenCalledTimes(1);
 
    rerender();
 
    expect(effect).toHaveBeenCalledTimes(1);
  });
});

You can test hooks by using the renderHook function from Testing Library. In this you will render the hook twice. You need to create a mock function using jest.fn(). You can run assertions on this mock function. Check that it hasn't been called. Then render your hook, which happens implicitly when you call renderHook, and check that it has been called. Rerender the hook and assert that it hasn't been called again.

After watching your tests fail, implement the useEffectOnce hook.

import { useEffect, useRef } from 'react';
 
/**
 * Accepts a function that contains imperative, possibly effectful code.
 * It executes that function exactly once.
 *
 * Can be used to avoid shooting us in the foot with React 18 and strict mode.
 * @see https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
 * @see https://github.com/reactwg/react-18/discussions/18
 *
 * @param effect Imperative function that can return a cleanup function
 */
export function useEffectOnce(effect) {
  const isFirstMount = useRef(true);
 
  useEffect(() => {
    if (isFirstMount) {
      isFirstMount.current = false;
 
      return effect();
    }
 
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

Use useRef to check that the effect only runs if the component is mounted for the first time. It's not enough to have an empty dependency array because React 18 mounts and unmounts your component twice during development mode.

Let's tie all of these functions together in your React components. You're going to use the display / container component pattern. Display components are responsible for how things look - they are pure functions that take in props and return JSX. Container components handle logic and side effects. They contain hooks and are connected to your Redux store.

In true TDD fashion, create a component that renders nothing.

export function OnboardingScreenComponent() {
  return null;
}

When you're testing a display component, you first need to think about what it should render. This determines the props the component receives, which depend on what the component should display.

By default, the onboarding screen should show a message informing the user that they will be asked for permission to send notifications. It should also have a button that starts the permission request flow. Therefore, it needs an onRequestPermissionPress function prop.

If the user was asked for permissions but declined, the screen needs to show a message telling them to go to their phone's settings to allow push notifications manually. This means the component needs wasAskedForPermissions and hasAllowedPermissions boolean props.

If the user was asked for permissions and allowed them, the screen should show a message indicating they can now use the app. It should also have a button to send a test notification and a button to navigate to the home screen. Therefore, it needs onSendTestNotificationPress and onGetStartedPress function props.

Capture these requirements in your tests.

import { render, screen } from '@testing-library/react-native';
 
import { OnboardingScreenComponent } from './onboarding-screen-component';
 
const createProps = ({
  hasAllowedPermissions = false,
  onGetStartedPress = jest.fn(),
  onRequestPermissionPress = jest.fn(),
  onSendTestNotificationPress = jest.fn(),
  wasAskedForPermissions = false,
} = {}) => ({
  hasAllowedPermissions,
  onGetStartedPress,
  onRequestPermissionPress,
  onSendTestNotificationPress,
  wasAskedForPermissions,
});
 
describe('OnboardingScreen component', () => {
  test('given the user was not asked for permission: shows a message that they will be asked for permission and a button to trigger the permission asking flow', () => {
    const props = createProps();
 
    render(<OnboardingScreenComponent {...props} />);
 
    expect(screen.getByText(/allow push notifications/i)).toBeOnTheScreen();
    expect(
      screen.getByRole('button', { name: /request permission now/i }),
    ).toBeOnTheScreen();
  });
 
  test('given the user was asked for permission, but declined: shows a message that they need to go into their settings to allow push notifications manually', () => {
    const props = createProps({
      wasAskedForPermissions: true,
      hasAllowedPermissions: false,
    });
 
    render(<OnboardingScreenComponent {...props} />);
 
    expect(screen.getByText(/go to your settings/i)).toBeOnTheScreen();
  });
 
  test('given the user was asked for permission and allowed: shows a message that they can now use the app, a button to send a test notification, and a button to navigate to the home screen', () => {
    const props = createProps({
      wasAskedForPermissions: true,
      hasAllowedPermissions: true,
    });
 
    render(<OnboardingScreenComponent {...props} />);
 
    expect(screen.getByText(/you can now use the app/i)).toBeOnTheScreen();
    expect(
      screen.getByRole('button', { name: /send test notification/i }),
    ).toBeOnTheScreen();
    expect(
      screen.getByRole('button', { name: /get started/i }),
    ).toBeOnTheScreen();
  });
});

First, create a createProps factory function to make it easy to generate the props for the component, so you only need to override the ones you need for each specific test case.

Then, write the first test that checks if the user was not asked for permissions. It should display a message informing the user that they will be asked for permission and a button to request permissions.

Your second test should check that if the user was asked for permissions but declined, it displays a message telling them to go to their settings to allow push notifications manually. In this test, you explicitly set hasAllowedPermissions to false, even though hasAllowedPermissions is false by default. This is good practice to make sure that the test always behaves the same even if the createProps factory function changes.

Your third and final test should verify that if the user was asked for permissions and allowed them, it displays a message indicating they can now use the app, along with a button to send a test notification and a button to navigate to the home screen.

Notice how easy it is to read the test setup using the createProps factory function because it only mentions what's special about each specific test case.

Before you jump into the implementation, install the expo-image package.

$ npx expo install expo-image

You'll use it to render your app's logo.

After seeing your tests fail, implement the component.

Note to Cheta or Ibrahim: For all UI code examples, after the imports, record the creation of the styles object first. This will make it easier to use them in the JSX. (See the narration below this code example for context.)

For this code example, because there's a lot of narration about the styles, "code them up" bit by bit. For example:

1.)

const styles = StyleSheet.create({});

2.)

const styles = StyleSheet.create({
  container: {
    backgroundColor: darkColors.backgroundColorPrimary,
    flex: 1,
  },
});

3.)

const styles = StyleSheet.create({
  container: {
    backgroundColor: darkColors.backgroundColorPrimary,
    flex: 1,
  },
  safeArea: {
    alignItems: 'center',
    flex: 1,
    paddingHorizontal: 16,
  },
});

... and so on.

Because the narration for this code block explaining StyleSheet will be longer.

For the code examples following this one, I'll only quickly add a line like: "Create the styles for this component." So there you can record the whole styles object in one go without revealing it bit by bit. (Only exception: if the styles are too many and the object is "higher" than the screen height, then record it in large chunks [e.g. halfs, or thirds].)

import { Button, Text } from '@rneui/themed';
import { Image } from 'expo-image';
import { StyleSheet, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
import { darkColors } from '../../styles/colors';
 
const noop = () => {};
 
export function OnboardingScreenComponent({
  hasAllowedPermissions = false,
  onGetStartedPress = noop,
  onRequestPermissionPress = noop,
  onSendTestNotificationPress = noop,
  wasAskedForPermissions = false,
}) {
  return (
    <SafeAreaProvider>
      <View style={styles.container}>
        <SafeAreaView style={styles.safeArea}>
          <Image
            alt="Random Reminders"
            contentFit="cover"
            // eslint-disable-next-line unicorn/prefer-module
            source={require('../../../assets/images/icon.png')}
            style={styles.logo}
          />
 
          {wasAskedForPermissions ? (
            hasAllowedPermissions ? (
              <>
                <Text style={{ alignSelf: 'center' }} h4>
                  You can now use the app.
                </Text>
 
                <View style={styles.buttonContainer}>
                  <Button
                    buttonStyle={styles.secondaryButton}
                    onPress={onSendTestNotificationPress}
                    size="lg"
                  >
                    Send Test Notification
                  </Button>
 
                  <Button onPress={onGetStartedPress} size="lg">
                    Get Started
                  </Button>
                </View>
              </>
            ) : (
              <View style={styles.instructions}>
                <Text h4 style={styles.text}>
                  Push notification access has been denied.
                </Text>
 
                <Text h4 style={styles.text}>
                  Since we can't ask you again, please go to your settings to
                  allow push notifications.
                </Text>
              </View>
            )
          ) : (
            <>
              <View style={styles.instructions}>
                <Text h4 style={styles.text}>
                  You must allow push notifications to use this app, so you can
                  get notifications for your reminders.
                </Text>
 
                <Text h4 style={styles.text}>
                  Click the button below and then allow notifications in the
                  popup.
                </Text>
              </View>
 
              <Button onPress={onRequestPermissionPress} size="lg">
                Request permission now
              </Button>
            </>
          )}
        </SafeAreaView>
      </View>
    </SafeAreaProvider>
  );
}
 
const styles = StyleSheet.create({
  container: {
    backgroundColor: darkColors.backgroundColorPrimary,
    flex: 1,
  },
  safeArea: {
    alignItems: 'center',
    flex: 1,
    paddingHorizontal: 16,
  },
  logo: {
    height: 256,
    width: 256,
  },
  text: {
    lineHeight: 32,
    textAlign: 'center',
  },
  instructions: {
    gap: 24,
    marginBottom: 48,
    width: '100%',
  },
  secondaryButton: {
    backgroundColor: darkColors.secondary,
  },
  buttonContainer: {
    gap: 24,
    marginTop: 'auto',
    width: '100%',
  },
});

Import the necessary components from React Native Elements, Expo, and React Native, as well as your colors.

Create a styles object using StyleSheet.create at the bottom of your file. If you've never used React Native, StyleSheet is a tool that allows you to define styles for your application's interface. You create an object where each key is a style name, and the associated value is a set of CSS-like properties. These styles are then applied to components using the style prop to customize their appearance. I'm going to show you the styles on screen for all UI components, but I won't explain them in-depth going forward. If you're coding along, you can also grab the styles from the GitHub repository linked in the description.

Create a noop function to use as a default for function props. This makes it safe to use your display component anywhere and if a developer forgets to pass in a function prop, the app won't crash when the user presses a button.

Then, define your component. It takes in the props we discussed earlier and renders a SafeAreaProvider with a View. Inside that View is the SafeAreaView, which guards against the notches on iOS devices.

Render the Image with your app's logo at the top of the component.

Then, render the UI for the different states of the component:

• If the user was asked for permissions and has allowed them, render the respective message and the buttons.
• If they declined, render the respective message.
• If they were not asked for permissions yet, render the respective message and the button to request permissions.

Run your tests again and watch them pass.

You can now tie everything together in your container component.

/* eslint-disable unicorn/consistent-function-scoping */
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as Notifications from 'expo-notifications';
import { router } from 'expo-router';
import { useState } from 'react';
 
import { onboardingStorageKeys } from './onboarding-constants';
import {
  getHasLocalNotificationsPermissions,
  requestLocalNotificationsPermissions,
} from './onboarding-helpers';
import { OnboardingScreenComponent } from './onboarding-screen-component';
import { useEffectOnce } from './use-effect-once';
import { withNotificationPermissions } from './with-notification-permission';
 
function OnboardingScreenContainer({ hasNotificationPermissions }) {
  const [hasAllowedPermissions, setHasAllowedPermissions] = useState(
    hasNotificationPermissions,
  );
  const [wasAskedForPermissions, setWasAskedForPermissions] = useState(false);
 
  useEffectOnce(() => {
    async function init() {
      const currentPermissions = await getHasLocalNotificationsPermissions();
      setHasAllowedPermissions(currentPermissions);
 
      const [wasAsked, gotStarted] = await Promise.all([
        AsyncStorage.getItem(onboardingStorageKeys.WAS_ASKED_FOR_PERMISSIONS),
        AsyncStorage.getItem(onboardingStorageKeys.GOT_STARTED),
      ]);
 
      if (wasAsked !== null) {
        setWasAskedForPermissions(true);
      }
 
      if (
        (currentPermissions || hasNotificationPermissions) &&
        gotStarted !== null
      ) {
        router.replace('/home');
      }
    }
 
    init();
  });
 
  async function handleRequestPermissionPress() {
    await requestLocalNotificationsPermissions().then(setHasAllowedPermissions);
 
    setWasAskedForPermissions(true);
 
    await AsyncStorage.setItem(
      onboardingStorageKeys.WAS_ASKED_FOR_PERMISSIONS,
      JSON.stringify(true),
    );
  }
 
  async function handleSendTestNotificationPress() {
    await Notifications.scheduleNotificationAsync({
      content: {
        body: 'This is a test notification.',
        title: 'Random Reminder App',
      },
      trigger: null,
    });
  }
 
  async function handleGetStartedPress() {
    await AsyncStorage.setItem(
      onboardingStorageKeys.GOT_STARTED,
      JSON.stringify(true),
    );
 
    router.replace('/home');
  }
 
  return (
    <OnboardingScreenComponent
      hasAllowedPermissions={
        // This order is important because hasAllowedPermissions only updates
        // when the user is on this screen whereas hasNotificationPermissions
        // updates when the app switches between foreground and background.
        hasAllowedPermissions || hasNotificationPermissions
      }
      onGetStartedPress={handleGetStartedPress}
      onRequestPermissionPress={handleRequestPermissionPress}
      onSendTestNotificationPress={handleSendTestNotificationPress}
      wasAskedForPermissions={wasAskedForPermissions}
    />
  );
}
 
export default withNotificationPermissions(OnboardingScreenContainer);

First, import necessary modules and components. You'll need AsyncStorage for storing some flags across app restarts, Notifications for handling notifications, router from expo-router for navigation, and useState for React state management.

Define the OnboardingScreenContainer function that takes hasNotificationPermissions as a prop. This prop will come from the withNotificationPermissions HOC, which will wrap this container.

Inside, initialize two states with useState: hasAllowedPermissions and wasAskedForPermissions. You will use these states to keep track of whether the user has allowed notifications and whether they have been prompted yet.

Inside the useEffectOnce hook, define an asynchronous function init. This function performs several operations:

1. It checks the current permission status with getHasLocalNotificationsPermissions.
2. It retrieves values from AsyncStorage to check if the user was previously asked for permissions. This state is persisted even if the user closed the app and re-opens it again.
3. If the user granted permissions and already got started, navigate the user directly to the home screen using router.replace.

Because the onboarding screen will always render first when the app is loaded, the init function ensures that users who have already granted permissions and completed onboarding are taken directly to the home screen.

Next, define the handleRequestPermissionPress function. This function will be triggered when the user presses the button to request permissions. It calls requestLocalNotificationsPermissions, updates the permissions state, and sets a flag in AsyncStorage indicating that the user has been asked for permissions.

For the handleSendTestNotificationPress, this function schedules a test notification using the Notifications API. This is a simple way to show that notifications are working as expected.

Lastly, the handleGetStartedPress function is triggered when the user presses the "Get Started" button after granting permissions. It sets a flag in AsyncStorage and navigates the user to the home screen.

Now, render the OnboardingScreenComponent and pass all the necessary props to it. And finally, wrap the container in the withNotificationPermissions HOC and export it.

Note to Cheta or Ibrahim: Record the renaming of the root file below, too.

If there are changes to your tsconfig.json, make sure to delete them. It sometimes updates automatically, but we don't care.

After this next step, record the app with the "You must allow" message, but don't press the "Request permission now" button yet.

Your root route might still be named index.tsx, so rename it to index.js.

export { default } from '../features/onboarding/onboarding-screen-container';

Export the OnboardingScreenContainer from it.

When you now reload your app, you can see the onboarding screen. Don't press the "Request permission now" button yet though because your app lacks the home screen, so it will crash.

Set Up Redux

All subsequent features will use Redux, so it's time to set it up.

Start by creating your root reducer in src/redux/root-reducer.js.

import { combineReducers } from '@reduxjs/toolkit';
 
export const rootReducer = combineReducers({
  ['temp-not-used-to-avoid-crash']: (state = {}) => state,
});
 
export const rootState = rootReducer(undefined, { type: '' });

Import combineReducers from Redux Toolkit and create a root reducer that does nothing for now. This temporary reducer prevents your app from crashing until you add actual reducers. Also, export rootState, which you'll use in your unit tests later.

Here, you create the root state by calling the root reducer with undefined and an empty action as arguments. This guards your app against refactors with Redux Toolkit. While the reducers that you're going to write in this tutorial can be called without arguments and still return their initial state, the reducers created by createSlice lack this behavior.

Next, create an empty root saga in src/redux/root-saga.js. You will use sagas in the last third of this tutorial to schedule your reminders. While we're setting up the store, it's convenient to also configure the saga middleware already.

import { all } from 'redux-saga/effects';
 
export function* rootSaga() {
  yield all([]);
}

In your root saga, import the all effect from redux-saga/effects and define a generator function rootSaga that currently yields an empty array.

Now, set up your store in src/redux/store.js.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { configureStore } from '@reduxjs/toolkit';
import { persistReducer, persistStore } from 'redux-persist';
import createSagaMiddleware from 'redux-saga';
 
import { rootReducer } from './root-reducer';
import { rootSaga } from './root-saga';
 
const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
};
 
const persistedReducer = persistReducer(persistConfig, rootReducer);
 
const sagaMiddleware = createSagaMiddleware();
 
export const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware => [
    ...getDefaultMiddleware({ serializableCheck: false, thunk: false }),
    sagaMiddleware,
  ],
});
 
sagaMiddleware.run(rootSaga);
 
export const persistor = persistStore(store);

Import AsyncStorage, configureStore, middleware and your root reducer and saga.

Create a persistConfig object, which is configured to save your Redux state to AsyncStorage. This will save your Redux state across app restarts.

Use persistReducer and the persistConfig to create a persisted version of your root reducer.

Afterwards, initialize the saga middleware.

Create your store using the persisted reducer and middleware. If your only contact with Redux has been through this five-part series, you may have noticed that you create the store as a variable, instead of using a makeStore function. As mentioned in the previous videos, the makeStore function is really only needed for Next.js.

Run your root saga with sagaMiddleware.run(rootSaga), and lastly, export the store and persistor.

If at any point during development your app is in a buggy state or behaves differently from this tutorial, it could be because a weird state has been persisted. You can purge the state by calling persistor.purge() in your store.js file. But remember to only do this in development.

Next, integrate your store and persistor into your root layout.

import { ThemeProvider } from '@rneui/themed';
import { Slot } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
 
import { persistor, store } from '../redux/store';
import { darkTheme } from '../styles/themes';
 
export default function Layout() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ThemeProvider theme={darkTheme}>
          <StatusBar style="light" />
          <Slot />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  );
}

Import Provider from react-redux and PersistGate from redux-persist/integration/react. Then, wrap your app with the Provider component, passing in the store as a prop. Inside the Provider, wrap your content with PersistGate, providing the persistor to ensure that your app waits for the persisted state to be retrieved before rendering.

Home Screen

On the home screen, you want to show your user a list of reminders. The app should come with a few hardcoded reminders to uplift the user. Here is the list of default reminders for this tutorial:

• You got this! 💪
• Learn Redux at a senior-level.
• Give a stranger a compliment 🫂
• Subscribe to Jan Hesters on YouTube!

The home screen and all upcoming screens are going to be rendered in a stack navigator. A stack navigator in Expo manages navigation between screens, where each new screen is placed on top of a stack, much like pages in a book. Users navigate forward by pushing a screen onto the stack and go back by popping it off.

Note to Cheta or Ibrahim: Show a recording of this stack transition of "pushing" and "popping" screens so we can overlay it here.

Begin by creating a new folder src/app/(main) to group the main screens of your app.

Next, add a layout for the stack navigator in src/app/(main)/_layout.js:

import { Stack } from 'expo-router/stack';
 
import { darkColors } from '../../styles/colors';
 
export default function Layout() {
  return (
    <Stack
      screenOptions={{
        headerStyle: {
          backgroundColor: darkColors.backgroundColorPrimary,
        },
        headerTintColor: darkColors.textColorPrimary,
        headerShadowVisible: false,
      }}
    />
  );
}

Import Stack from expo-router/stack. Configure the stack navigator's screenOptions to style the header with your chosen background color, text color, and to hide the header shadow.

Next, create a general src/components/ folder for components that are not specific to a single feature and add a header button component.

import { Button, Icon } from '@rneui/themed';
 
export function HeaderButton({ iconName, ...props }) {
  return (
    <Button buttonStyle={{ backgroundColor: 'transparent' }} {...props}>
      <Icon color="white" name={iconName} type="ionicon" />
    </Button>
  );
}

Import Button and Icon from @rneui/themed. Create a HeaderButton that renders a button with a transparent background and an icon. The iconName prop specifies which icon to display.

You can configure layouts directly in the layout file or by using higher-order components (HOCs). So, create a higher-order component (HOC) to handle header configurations for your stack navigator.

import { Stack } from 'expo-router';
 
export const withHeader = options => Component =>
  function WithHeader(props) {
    return (
      <>
        <Stack.Screen
          options={{
            headerTintColor: '#fff',
            ...options,
          }}
        />
        <Component {...props} />
      </>
    );
  };

Curry your withHeader component to first take in options for the header configuration. The Stack.Screen component is used to configure the appearance of the screen's header. In this case, you make the header text white.

You're going to use the withHeader HOC as a wrapper for your home screen, so you'll need to create the related reducers first.

Since you'll be saving your reminders in Redux, it's time to apply TDD to create your first reducer.

Note to Cheta or Ibrahim: In these TDD blocks, follow the narration after each code example, so that its easy for the editors to keep the pace.

In this case, first reveal the initial state and then reducer, both as a hole, instead of bit by bit.

E.g. good ✅

1.)

export const sliceName = 'reminders';

2.)

export const sliceName = 'reminders';
 
const initialState = {};

3.)

export const sliceName = 'reminders';
 
const initialState = {};
 
export const reducer = (state = initialState, { type, payload } = {}) => state;

E.g. bad ❌

1.)

export const sliceName = 'reminders';

2.)

export const sliceName = 'reminders';
 
const initialState = {};

3.)

export const sliceName = 'reminders';
 
const initialState = {};
 
export const reducer = (state = initialState) => state;

4.)

const initialState = {};
 
export const reducer = (state = initialState, { type, payload } = {}) => state;

Basically, follow the narration as much as possible, so it's neither too granular, nor too chunky.

export const sliceName = 'reminders';
 
const initialState = {};
 
export const reducer = (state = initialState, { type, payload } = {}) => state;
 
export const selectRemindersSlice = () => {};
 
export const selectRemindersArray = () => {};

Export a sliceName constant that is the name of the slice.

Define an empty initial state and a reducer that returns its state unchanged. Additionally, define two selectors that should return the reminders array from the state, but they do nothing yet.

Writing tests for reducers is easy because every component in Redux - actions, reducers, and selectors - is a pure function.

import { rootReducer } from '../../redux/root-reducer';
import { selectRemindersArray } from './reminders-reducer';
 
describe('reminders reducer', () => {
  describe('selectRemindersArray() selector', () => {
    test('given the initial state: returns the default reminders array', () => {
      const state = rootReducer();
 
      const actual = selectRemindersArray(state);
      const expected = [
        {
          id: 'hardcoded-first-reminder',
          message: 'You got this! 💪',
          dateCreated: '2024-10-01T00:00:00.000Z',
        },
        {
          id: 'hardcoded-second-reminder',
          message: 'Learn Redux at a senior-level.',
          dateCreated: '2024-10-02T00:00:00.000Z',
        },
        {
          id: 'hardcoded-third-reminder',
          message: 'Give a stranger a compliment 🫂',
          dateCreated: '2024-10-03T00:00:00.000Z',
        },
        {
          id: 'hardcoded-fourth-reminder',
          message: 'Subscribe to Jan Hesters on YouTube!',
          dateCreated: '2024-10-04T00:00:00.000Z',
        },
      ];
 
      expect(actual).toEqual(expected);
    });
  });
});

Import the root reducer and the selectRemindersSlice selector. Then write a test that checks if the selector applied to the initial state of the root reducer returns the default reminders array. Give each reminder in that array a fake ID and date created because those details don't matter for these default reminders.

You write tests for selectors using the root reducer because selectors take in the current root state as an argument.

Run your test and watch it fail.

Before you implement the reducer, you first need to hook it up in your root reducer.

import { combineReducers } from '@reduxjs/toolkit';
 
import {
  reducer as remindersReducer,
  sliceName as remindersSliceName,
} from '../features/reminders/reminders-reducer';
 
export const rootReducer = combineReducers({
  [remindersSliceName]: remindersReducer,
});
 
export const rootState = rootReducer(undefined, { type: '' });

Import your reminders reducer and slice name, and add the reminders reducer to your combineReducers call.

Now, implement the reminders reducer and the selector.

import { pipe, prop, values } from 'ramda';
 
export const sliceName = 'reminders';
 
const initialState = {
  reminders: {
    'hardcoded-first-reminder': {
      id: 'hardcoded-first-reminder',
      message: 'You got this! 💪',
      dateCreated: '2024-10-01T00:00:00.000Z',
    },
    'hardcoded-second-reminder': {
      id: 'hardcoded-second-reminder',
      message: 'Learn Redux at a senior-level.',
      dateCreated: '2024-10-02T00:00:00.000Z',
    },
    'hardcoded-third-reminder': {
      id: 'hardcoded-third-reminder',
      message: 'Give a stranger a compliment 🫂',
      dateCreated: '2024-10-03T00:00:00.000Z',
    },
    'hardcoded-fourth-reminder': {
      id: 'hardcoded-fourth-reminder',
      message: 'Subscribe to Jan Hesters on YouTube!',
      dateCreated: '2024-10-04T00:00:00.000Z',
    },
  },
};
 
export const reducer = (state = initialState, { type, payload } = {}) => state;
 
const selectRemindersSlice = prop(sliceName);
 
export const selectRemindersArray = pipe(
  selectRemindersSlice,
  prop('reminders'),
  values,
);

Import pipe, prop, and values from Ramda.

Add the default reminders to the initial state. You normalize this state as an object where each key is the reminder's ID and the value is the reminder itself, because it's easier to work with normalized data.

Create a selector that grabs the reminders slice from the root state.

Then compose the selectRemindersArray selector using values, which retrieves each value from an object and returns them in an array. You want to have the reminders as an array so you can map over them in your component in a list.

Run your test again. This time, it passes.

On the home screen, you also want to delete reminders. To do this, add an action to delete a reminder by its ID.

// ... your initial state
 
export const reducer = (state = initialState, { type, payload } = {}) => state;
 
export const reminderDeleted = reminderId => ({
  type: `${sliceName}/reminderDeleted`,
  payload: reminderId,
});
 
// ... your selectors

Add a test for the reminderDeleted action creator.

import { rootReducer } from '../../redux/root-reducer';
import { reminderDeleted, selectRemindersArray } from './reminders-reducer';
 
describe('reminders reducer', () => {
  describe('selectRemindersArray() selector', () => {
    // ... existing test
 
    test('given a reminder deleted action and the id of the reminder to delete: deletes the reminder and returns the correct array', () => {
      const reminderId = 'hardcoded-third-reminder';
      const state = rootReducer(undefined, reminderDeleted(reminderId));
 
      const actual = selectRemindersArray(state);
      const expected = [
        {
          id: 'hardcoded-first-reminder',
          message: 'You got this! 💪',
          dateCreated: '2024-10-01T00:00:00.000Z',
        },
        {
          id: 'hardcoded-second-reminder',
          message: 'Learn Redux at a senior-level.',
          dateCreated: '2024-10-02T00:00:00.000Z',
        },
        {
          id: 'hardcoded-fourth-reminder',
          message: 'Subscribe to Jan Hesters on YouTube!',
          dateCreated: '2024-10-04T00:00:00.000Z',
        },
      ];
 
      expect(actual).toEqual(expected);
    });
  });
});    

Write a test that calculates the state after the reminderDeleted action has been dispatched. Then use the selectRemindersArray selector to check if the array without the deleted reminder is returned.

Before you watch this test fail, notice how the test couples the action creator to the selector. Action creators and selectors are like pairs of getters and setters. They are the only interface you should use to interact with your Redux store and therefore it is best practice to test them together like this.

Using action creators in conjunction with your selectors and your root reducer in your tests like this gives you confidence that:

1. You hooked up your slice's reducer to your rootReducer, and you did it correctly.
2. Your action creators modify your state in the way that you intended (= the right slices, the right data shape, etc.).
3. Your action creators interact correctly with each other (- if you use several to set up the test, which you will see later in this tutorial when you toggle on which days your user wants to receive reminders).
4. Your selectors return the correct value.

You should test selectors with at least two cases:

1. One with default state, and
2. one with modified state.

For the default state, you can call the rootReducer without arguments to get the global initial state. You did this in your first test, which returned the default reminders array. And again, if you can't call your rootReducer without arguments to produce the default state. For example because you're using Redux Toolkit's createSlice. In this case you can create and export the rootState from your root reducer file.

// ...
 
export const rootState = rootReducer(undefined, { type: '' });

To test the selector's behavior with populated state, you can simply pass the action as the second argument to your root reducer, as you did in the test for the reminderDeleted action.

If your selector depends on several pieces of state managed by multiple actions, you can create an actions array and reduce over it to build up the state. You will see examples of this in a later tutorial.

Now watch your test fail, and then implement the case to handle the reminderDeleted action in your reducer.

Note to Cheta or Ibrahim: In cases like this, modify the relevant code in the reducer file, so do NOT show the comments (// ... your initial state etc.) like I'm doing for the script / article version.

// ... your initial state
 
export const reducer = (state = initialState, { type, payload } = {}) => {
  switch (type) {
    case reminderDeleted().type: {
      const { [payload]: _, ...remainingReminders } = state.reminders;
 
      return { ...state, reminders: remainingReminders };
    }
    default: {
      return state;
    }
  }
};
 
// ... your action

Run your tests and watch them pass.

You're going to render your reminders in a list. So, create a ReminderItem component.

export function ReminderItemComponent() {
  return null;
}

As always, when you TDD a display component, you want to first think about what props it should receive. Your reminder item should render a message and a delete button. When pressing the item in general, it should redirect you to the reminder details screen.

To write this test, you need a reminder fixture. It is good practice to create your fixtures with factory functions. So, create a file that contains your reminder factory functions.

import { faker } from '@faker-js/faker';
import { createId } from '@paralleldrive/cuid2';
 
export const createReminder = ({
  id = '',
  message = '',
  dateCreated = new Date().toISOString(),
} = {}) => ({ message, id, dateCreated });
 
export const createPopulatedReminder = ({
  id = createId(),
  message = faker.word.words(),
  dateCreated = faker.date.recent().toISOString(),
} = {}) => createReminder({ id, message, dateCreated });

Whenever you create reminders, whether in your tests or your actual code, you should use the createReminder factory function. It provides default parameters, so you only need to provide the values that are unique to the reminder you're creating. In general, factories make it easy to amend your entities. If you create all entities in your app with factories, they will automatically receive the new properties. As a neat little bonus, you even get type inference from them, even in JavaScript.

The createPopulatedReminder factory function uses faker to generate mock data. The faker package is a JavaScript library that creates large amounts of fake but realistic data for testing and development. It can generate names, addresses, phone numbers, emails, lorem ipsum text, and more. You'll use this factory to create realistic reminder fixtures for your tests. If you've never heard the word "fixture", it means the predefined data used in testing scenarios.

Now write your tests for the ReminderItemComponent.

import { fireEvent, render, screen } from '@testing-library/react-native';
 
import { createPopulatedReminder } from '../reminders/reminders-factories';
import { ReminderItemComponent } from './reminder-item-component';
 
const createProps = ({
  id = createPopulatedReminder().id,
  message = createPopulatedReminder().message,
  onDeletePressed = jest.fn(),
  onPress = jest.fn(),
} = {}) => ({ id, message, onDeletePressed, onPress });
 
describe('ReminderItemComponent', () => {
  test('given a message: displays the message', () => {
    const props = createProps();
 
    render(<ReminderItemComponent {...props} />);
 
    expect(screen.getByText(props.message)).toBeOnTheScreen();
  });
 
  test('given an on press handler: clicking the item triggers the listener', () => {
    const props = createProps();
 
    render(<ReminderItemComponent {...props} />);
 
    const button = screen.getByRole('button', { name: props.message });
    fireEvent.press(button);
 
    expect(props.onDeletePressed).toHaveBeenCalledTimes(0);
    expect(props.onPress).toHaveBeenCalledWith({ id: props.id });
  });
 
  test('given an on delete pressed handler: clicking the delete button triggers the listener', () => {
    const props = createProps();
 
    render(<ReminderItemComponent {...props} />);
 
    const button = screen.getByLabelText(/delete/i);
    fireEvent.press(button);
 
    expect(props.onPress).toHaveBeenCalledTimes(0);
    expect(props.onDeletePressed).toHaveBeenCalledWith({ id: props.id });
  });
});

Define the createProps function and use your factory to populate the defaults.

In your first test, check if the reminder message is displayed correctly using screen.getByText to locate the text element containing the message.

In your second test, ensure that when the reminder item is pressed, the appropriate handler is triggered. Use screen.getByRole to get the button associated with the reminder message and fireEvent.press to trigger the press event. Then check that the onPress handler was called with the id of the reminder.

Finally, test the delete functionality by checking that pressing the delete button calls the onDeletePressed handler with the correct identifier.

Watch your tests fail, and then implement the component.

import { Button, Text } from '@rneui/themed';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
import { darkColors } from '../../styles/colors';
 
export function ReminderItemComponent({
  id,
  message,
  onDeletePressed,
  onPress,
}) {
  return (
    <TouchableOpacity
      accessibilityRole="button"
      activeOpacity={0.8}
      onPress={() => onPress({ id })}
      style={styles.container}
    >
      <View style={styles.textContainer}>
        <Text style={styles.text}>{message}</Text>
      </View>
 
      <Button
        accessibilityLabel="delete"
        icon={{
          color: darkColors.textSecondary,
          name: 'trash-outline',
          size: 20,
          type: 'ionicon',
        }}
        onPress={() => onDeletePressed({ id })}
      />
    </TouchableOpacity>
  );
}
 
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: darkColors.backgroundColorSecondary,
    borderBottomColor: darkColors.borderColor,
    borderBottomWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 16,
    width: '100%',
  },
  textContainer: {
    flex: 3,
  },
  text: {
    color: darkColors.textPrimary,
    fontSize: 20,
  },
});

Import Button and Text from @rneui/themed, and StyleSheet, TouchableOpacity, and View from react-native.

Define the styles object using StyleSheet.create.

In React Native, TouchableOpacity is a component that makes any view responsive to touch, similar to how a <button /> tag works in web development with React. When TouchableOpacity is pressed, it decreases the opacity of the wrapped view, providing visual feedback to the user. Hook up your TouchableOpacity to the onPress handler and pass in the id as an argument.

// TODO: record a gif of a simple press to show what the touchable opacity does.

Inside the TouchableOpacity, render a View with a Text component that displays the reminder message. View functions like <div /> in web development. Then, render a Button that displays the delete icon and is connected to the onDeletePressed handler.

Now it's time to TDD the home screen component. As usual, start with a component that renders nothing.

export function HomeScreenComponent() {
  return null;
}

The home screen should take in the list of reminders and the function to delete a reminder.

import { render, screen } from '@testing-library/react-native';
 
import { createPopulatedReminder } from '../reminders/reminders-factories';
import { HomeScreenComponent } from './home-screen-component';
 
const createProps = ({
  onDeleteReminder = jest.fn(),
  reminders = [createPopulatedReminder(), createPopulatedReminder()],
} = {}) => ({ onDeleteReminder, reminders });
 
describe('HomeScreenComponent', () => {
  test('given any props: renders the create reminder button', () => {
    const props = createProps();
 
    render(<HomeScreenComponent {...props} />);
 
    expect(
      screen.getByRole('button', { name: /create reminder/i }),
    ).toBeOnTheScreen();
  });
 
  test('given an empty list of reminders: renders the empty state message', () => {
    const props = createProps({ reminders: [] });
 
    render(<HomeScreenComponent {...props} />);
 
    expect(screen.queryByRole('list')).not.toBeOnTheScreen();
    expect(screen.getByText(/you have no reminders yet/i)).toBeOnTheScreen();
  });
 
  test('given some reminders: renders a list of reminders', () => {
    const props = createProps();
 
    render(<HomeScreenComponent {...props} />);
 
    expect(
      screen.queryByText(/you have no reminders yet/i),
    ).not.toBeOnTheScreen();
 
    for (const reminder of props.reminders) {
      expect(screen.getByText(reminder.message)).toBeOnTheScreen();
    }
  });
});