DEV Community: Spencer Carli

Setting Max Width When Supporting Web and Mobile in React Native

Spencer Carli — Mon, 29 Aug 2022 21:03:41 +0000

React Native's Web support continually gets better. With that, we've got to consider different screen sizes and orientations.

While building a React Native version of the game "Match the Pairs" (100% open source) I found that when playing the game in a horizontal landscape on the web everything looked off. The cards were wider than they were tall - I want to maintain the traditional playing card shape on the game board, regardless of screen size.

Originally published on React Native School

The Reality of Supporting Multiple Platforms

Before diving into the code I want to make sure you have proper expectations around targeting multiple platforms with a single codebase.

Often when I talk to people about the universal nature of React Native there is an assumption that you get to support iOS, Android, and the Web from one code base with 100% code sharing.

That is unrealistic. You can absolutely support iOS, Android, and the Web from a single codebase that is MOSTLY shared... but there will be differences!

But each platform is going to have unique requirements to make it fit the platform the user is running it on.

This sometimes requires customizations to your layouts and code. That's not a bad thing - you're still able to share a TON of code!

This simple app is a great example - this article shows layout change requirements and a previous article outlines the differences between mobile and the web when handling sharing.

Now, with that out of the way lets dive into the code.

The Starting Code

First, lets look at the code that drives the current UI.

import { SafeAreaView, StyleSheet, View, Text } from "react-native"
import { StatusBar } from "expo-status-bar"

import { StatsCard, GameCard } from "components/cards"
import { Button } from "components/buttons"

import { Spacing, Colors } from "constants/index"

import { useMatchGame } from "hooks/useMatchGame"
import { shareGame } from "src/utils/shareGame"

const ROWS = [
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [8, 9, 10, 11],
  [12, 13, 14, 15],
]

const MatchThePairs = () => {
  const {
    emojis,
    reset,
    chooseCard,
    activeCardIndex,
    matchedCards,
    comparisonCards,
    totalMoves,
    matchCount,
    totalPairs,
  } = useMatchGame()

  const handlePress = (index: number) => {
    chooseCard(index)
  }

  const handleShare = () => {
    if (matchCount === totalPairs) {
      shareGame({ emojis, moveCount: totalMoves })
    } else {
      alert("You haven't matched all the pairs yet!")
    }
  }

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" />
      <View style={[styles.row, styles.header]}>
        <Text style={styles.headerText}>Match the pairs 🤔</Text>
      </View>

      <View style={[styles.row, styles.stats]}>
        <StatsCard
          title="Pairs matched"
          numerator={matchCount}
          denominator={totalPairs}
        />
        <StatsCard title="Total moves" numerator={totalMoves} />
      </View>

      {ROWS.map((indices, rowIndex) => (
        <View style={[styles.row, styles.gameRow]} key={rowIndex}>
          {indices.map(emojiIndex => {
            const inMatchedCard = matchedCards.includes(emojiIndex)
            const cardIsVisible =
              inMatchedCard || comparisonCards.includes(emojiIndex)

            return (
              <GameCard
                key={emojiIndex}
                index={emojiIndex}
                emojis={emojis}
                onPress={() => handlePress(emojiIndex)}
                selected={activeCardIndex === emojiIndex}
                visible={cardIsVisible}
                disabled={inMatchedCard}
              />
            )
          })}
        </View>
      ))}

      <View style={[styles.row, styles.actions]}>
        <Button type="primary" onPress={() => reset()}>
          Reset game
        </Button>
        <Button onPress={handleShare}>Share game</Button>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: Spacing.lg,
  },
  headerText: {
    color: Colors.greyDarkest,
    fontSize: 20,
    fontWeight: "600",
    marginTop: Spacing.md,
    marginBottom: Spacing.xl,
  },
  row: {
    flexDirection: "row",
    marginHorizontal: Spacing.sm,
  },
  gameRow: {
    flex: 1,
  },
  header: {
    marginHorizontal: Spacing.md,
  },
  stats: {
    marginBottom: Spacing.lg,
  },
  actions: {
    justifyContent: "center",
    marginTop: Spacing.xl,
  },
})

export default MatchThePairs

Layout for Web and Mobile in React Native

To fix the issue we'll do 3 things

Wrap the game board in a View with the content styles
Set the content to be full width but have a max width value
Center the content view within the container.

/* ... */

const MatchThePairs = () => {
  const {
    emojis,
    reset,
    chooseCard,
    activeCardIndex,
    matchedCards,
    comparisonCards,
    totalMoves,
    matchCount,
    totalPairs,
  } = useMatchGame()

  const handlePress = (index: number) => {
    /* ... */
  }

  const handleShare = () => {
    /* ... */
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <StatusBar style="dark" />
        <View style={[styles.row, styles.header]}>
          <Text style={styles.headerText}>Match the pairs 🤔</Text>
        </View>

        <View style={[styles.row, styles.stats]}>
          <StatsCard
            title="Pairs matched"
            numerator={matchCount}
            denominator={totalPairs}
          />
          <StatsCard title="Total moves" numerator={totalMoves} />
        </View>

        {ROWS.map((indices, rowIndex) => (
          <View style={[styles.row, styles.gameRow]} key={rowIndex}>
            {indices.map(emojiIndex => {
              const inMatchedCard = matchedCards.includes(emojiIndex)
              const cardIsVisible =
                inMatchedCard || comparisonCards.includes(emojiIndex)

              return (
                <GameCard
                  key={emojiIndex}
                  index={emojiIndex}
                  emojis={emojis}
                  onPress={() => handlePress(emojiIndex)}
                  selected={activeCardIndex === emojiIndex}
                  visible={cardIsVisible}
                  disabled={inMatchedCard}
                />
              )
            })}
          </View>
        ))}

        <View style={[styles.row, styles.actions]}>
          <Button type="primary" onPress={() => reset()}>
            Reset game
          </Button>
          <Button onPress={handleShare}>Share game</Button>
        </View>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: Spacing.lg,
    alignItems: "center",
  },
  content: {
    flex: 1,
    width: "100%",
    maxWidth: 550,
  },
  // ...
})

export default MatchThePairs

Let's dive into why we do each of these things.

First, we wrap our board in a second View so that the SafeAreaView can still take up the full screen (allowing for any background changes or other full screen changes).

We then use styles.content to fill the full vertical height, set the width to be 100% on portrait screens, and set a max width on it so that the playing cards remain the correct shape.

Finally we add alignItems: 'center' to the styles.container to center our game board. You can accomplish the same thing by adding marginHorizontal: 'auto' to styles.content but I prefer to use Flexbox whenever possible.

All of that results in the following game on the web:

You can find the full open source React Native game on Github.

Why use the Pressable Component over the Touchable Components

Spencer Carli — Mon, 22 Aug 2022 15:26:38 +0000

Way back in v0.63 of React Native the Pressable component was introduced.

But we've still got all the Touchable components (TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedback)...

So, which do you choose and why?

tl;dr

The preferred and suggested component, per React Native, is the Pressable component (and by extension the Pressability API).

Why Pressable Was Introduced

React Native apps are fantastic - allowing you to build apps for multiple platforms that perform like a fully native app.

BUT they often have "tells" that they're built with React Native.

From the announcement post for React Native v0.63: "However, because they include built-in styles and effects that don’t match the platform interaction, users can tell when experiences are written with React Native."

So, while the Touchable components are great and easy to use they're often not the right tool for the job.

When Should You Use the Pressable Component?

Well, basically always. It's the suggested way to handle user interactions within your app.

The Pressable component itself has a very familiar API to the Touchable components you may be familiar with while allowing for extensibility that the Touchable* components don't.

This allows you to create buttons/interactions that merge your intended UI/UX while also following the design guidelines for the platform.

When Should You Use Touchable Components?

Basically, never. Kind of.

Under their hood, the Touchable* components use the Pressability API for their implementation so they're fully supported but they still have the drawbacks outlined above.

That means you don't need to worry about ripping all the Touchable's out of your app and replacing them.

So, in conclusion, the next time you need to handle user interaction reach for Pressable over Touchable - it does everything you know and love but better.

How to Share from a React Native App (including the Web)

Spencer Carli — Mon, 15 Aug 2022 20:52:13 +0000

React Native's web support continues to get better and better, especially if you're using Expo. With Expo it just works out of the box.

But adding another supported platform to your app adds complexity! You've got to make sure things work on each supported platform.

Recently I was building a game with React Native, Match the Pairs, that allows a user to share how many moves it took them to beat the game.

It runs on iOS, Android, and the web. React Native's Share API works on iOS and Android but not the web so I had to come up with a solution to handle this.

Today we'll cover how to build a function that has differing functionality depending on what platform it runs on.

The shareGame Function

First we'll create the function that will be called when a user presses "Share game" in the app.

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {}

Example input:

shareGame({
  emojis: [
    "🏄",
    "💣",
    "📬",
    "😇",
    "🤠",
    "🦦",
    "📸",
    "📬",
    "🤠",
    "🏄",
    "🌮",
    "🌮",
    "💣",
    "😇",
    "🦦",
    "📸",
  ],
  moveCount: 16,
})

The Share API

First we can take advantage of the Share API from React Native.

import { Share } from "react-native"

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {
  const message = "This is an example message"

  return await Share.share({
    message,
  })
}

On iOS and Android this works great but the web throws an error that it isn't supported.

Leveraging the Platform API

So, what can we do about this differing API support between platforms?

We can leverage the core Platform API to change the functionality on a given platform.

import { Share, Platform } from "react-native"
import * as Clipboard from "expo-clipboard"

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {
  const message = "This is an example message"

  if (Platform.OS === "web") {
    await Clipboard.setStringAsync(message)

    alert(`The following message was copied to your clipboard.\n\n${message}`)
    return
  }

  return await Share.share({
    message,
  })
}

Above you can see that if the platform is "web" we'll copy the message to their clipboard (via expo-clipboard or react-native-clipboard).

We're also using alert to notify the user that we copied the message to the clipboard and what the actual message was. A custom modal would be an even better solution here.

If the platform isn't "web" then we'll continue on to use the Share API.

Bonus: Building the Share Message

This section isn't really pertinent to the content of this article but I figured I'd add it in. Let's create the actual message.

We want to create the grid of emojis that the user played, like this:

🏄 💣 📬 😇
🤠 🦦 📸 📬
🤠 🏄 🌮 🌮
💣 😇 🦦 📸

To do so we'll split our array of emojis into 4 rows of 4 emojis and then join them with a new line character.

import { Share, Platform } from "react-native"
import * as Clipboard from "expo-clipboard"

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

const buildRow = (emojis: string[], start: number, end: number) =>
  emojis.slice(start, end).join(" ")

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {
  const row1 = buildRow(emojis, 0, 4)
  const row2 = buildRow(emojis, 4, 8)
  const row3 = buildRow(emojis, 8, 12)
  const row4 = buildRow(emojis, 12, 16)

  const emojiBoard = [row1, row2, row3, row4].join("\n")
  const message = `I just beat Match the pairs in ${moveCount} moves!\n${emojiBoard}`

  if (Platform.OS === "web") {
    await Clipboard.setStringAsync(message)

    alert(`The following message was copied to your clipboard. \n\n${message}`)
    return
  }

  return await Share.share({
    message,
  })
}

And there we have it! A function to share the game result that works across multiple platforms, even when the same APIs aren't supported on each platform.

Build a Stop Watch Hook that Works Even When the App is Quit

Spencer Carli — Mon, 08 Aug 2022 15:08:22 +0000

Previously we built a custom hook to power a stop watch.

The problem with that implementation is that it will only work as long as the app is active/running in the background. If the app is quit then the timer stops.

Today we'll be upgrading that hook to work even if the app is quit for months. When you open it back up and, so long as the timer was started, it will give you the elapsed time since you started it.

The key to all of this is the @react-native-async-storage/async-storage package which will allow us to persist data to disk.

Make sure you install the library before proceeding.

This post was originally published on React Native School.

Starting Code

Below you can see the code we'll be starting with. To learn the why behind it you can read the previous tutorial walking you through it step by step.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export type LapData = {
  time: string
  lap: number
}

const padStart = (num: number) => {
  return num.toString().padStart(2, "0")
}

const formatMs = (milliseconds: number) => {
  let seconds = Math.floor(milliseconds / 1000)
  let minutes = Math.floor(seconds / 60)
  let hours = Math.floor(minutes / 60)

  // using the modulus operator gets the remainder if the time roles over
  // we don't do this for hours because we want them to rollover
  // seconds = 81 -> minutes = 1, seconds = 21.
  // 60 minutes in an hour, 60 seconds in a minute, 1000 milliseconds in a second.
  minutes = minutes % 60
  seconds = seconds % 60
  // divide the milliseconds by 10 to get the tenths of a second. 543 -> 54
  const ms = Math.floor((milliseconds % 1000) / 10)

  let str = `${padStart(minutes)}:${padStart(seconds)}.${padStart(ms)}`

  if (hours > 0) {
    str = `${padStart(hours)}:${str}`
  }

  return str
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    if (startTime > 0) {
      interval.current = setInterval(() => {
        setTime(() => Date.now() - startTime + timeWhenLastStopped)
      }, 1)
    } else {
      if (interval.current) {
        clearInterval(interval.current)
        interval.current = undefined
      }
    }
  }, [startTime])

  const start = () => {
    setIsRunning(true)
    setStartTime(Date.now())
  }

  const stop = () => {
    setIsRunning(false)
    setStartTime(0)
    setTimeWhenLastStopped(time)
  }

  const reset = () => {
    setIsRunning(false)
    setStartTime(0)
    setTimeWhenLastStopped(0)
    setTime(0)
    setLaps([])
  }

  const lap = () => {
    setLaps(laps => [time, ...laps])
  }

  let slowestLapTime: number | undefined
  let fastestLapTime: number | undefined

  const formattedLapData: LapData[] = laps.map((l, index) => {
    const previousLap = laps[index + 1] || 0
    const lapTime = l - previousLap

    if (!slowestLapTime || lapTime > slowestLapTime) {
      slowestLapTime = lapTime
    }

    if (!fastestLapTime || lapTime < fastestLapTime) {
      fastestLapTime = lapTime
    }

    return {
      time: formatMs(lapTime),
      lap: laps.length - index,
    }
  })

  return {
    start,
    stop,
    reset,
    lap,

    isRunning,
    time: formatMs(time),

    laps: formattedLapData,
    currentLapTime: laps[0] ? formatMs(time - laps[0]) : formatMs(time),
    hasStarted: time > 0,
    slowestLapTime: formatMs(slowestLapTime || 0),
    fastestLapTime: formatMs(fastestLapTime || 0),
  }
}

Persisting Data

The first thing we'll need to do is to persist (save) data to AsyncStorage. For our use case we'll want to store the following pieces of state

timeWhenLastStopped
isRunning
startTime
laps

Note: Each piece of data needs to be stored as a string in AsyncStorage.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"
import AsyncStorage from "@react-native-async-storage/async-storage"

export type LapData = {
  time: string
  lap: number
}

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

const ASYNC_KEYS = {
  timeWhenLastStopped: "useStopWatch::timeWhenLastStopped",
  isRunning: "useStopWatch::isRunning",
  startTime: "useStopWatch::startTime",
  laps: "useStopWatch::laps",
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    // persist the latest data to async storage to be used later, if needed
    const persist = async () => {
      try {
        await AsyncStorage.multiSet([
          [ASYNC_KEYS.timeWhenLastStopped, timeWhenLastStopped.toString()],
          [ASYNC_KEYS.isRunning, isRunning.toString()],
          [ASYNC_KEYS.startTime, startTime.toString()],
          [ASYNC_KEYS.laps, JSON.stringify(laps)],
        ])
      } catch (e) {
        console.log("error persisting data")
      }
    }

    persist()
  }, [timeWhenLastStopped, isRunning, startTime, laps])

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    /* ... */
  }

  const lap = () => {
    /* ... */
  }

  let slowestLapTime: number | undefined
  let fastestLapTime: number | undefined

  const formattedLapData: LapData[] = laps.map((l, index) => {
    /* ... */
  })

  return {
    /* ... */
  }
}

In the above code I've gone ahead and used a useEffect to run any time one of our target pieces of state changes (by adding each piece of state as a dependency) and then leverages AsyncStorage's multiSet function to save all data at one time.

I've pulled the keys I use to reference different pieces of data into an object since we'll need the same keys to pull the data from AsyncStorage momentarily.

Loading Data from AsyncStorage

Now we need to actually load the data from AsyncStorage when the hook is first initialized.

To do this I'll once again use the useEffect hook but without any dependencies (by passing an empty array of dependencies). That way it will only run the first time the component calling this hook is mounted.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"
import AsyncStorage from "@react-native-async-storage/async-storage"

export type LapData = {
  time: string
  lap: number
}

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

const ASYNC_KEYS = {
  timeWhenLastStopped: "useStopWatch::timeWhenLastStopped",
  isRunning: "useStopWatch::isRunning",
  startTime: "useStopWatch::startTime",
  laps: "useStopWatch::laps",
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    // load data from async storage in case app was quit
    const loadData = async () => {
      try {
        const persistedValues = await AsyncStorage.multiGet([
          ASYNC_KEYS.timeWhenLastStopped,
          ASYNC_KEYS.isRunning,
          ASYNC_KEYS.startTime,
          ASYNC_KEYS.laps,
        ])

        const [
          persistedTimeWhenLastStopped,
          persistedIsRunning,
          persistedStartTime,
          persistedLaps,
        ] = persistedValues

        setTimeWhenLastStopped(
          persistedTimeWhenLastStopped[1]
            ? parseInt(persistedTimeWhenLastStopped[1])
            : 0
        )
        setIsRunning(persistedIsRunning[1] === "true")
        setStartTime(
          persistedStartTime[1] ? parseInt(persistedStartTime[1]) : 0
        )
        setLaps(persistedLaps[1] ? JSON.parse(persistedLaps[1]) : [])
      } catch (e) {
        console.log("error loading persisted data", e)
      }
    }

    loadData()
  }, [])

  useEffect(() => {
    // persist the latest data to async storage to be used later, if needed
    /* ... */
  }, [timeWhenLastStopped, isRunning, startTime, laps])

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    /* ... */
  }

  const lap = () => {
    /* ... */
  }

  let slowestLapTime: number | undefined
  let fastestLapTime: number | undefined

  const formattedLapData: LapData[] = laps.map((l, index) => {
    /* ... */
  })

  return {
    /* ... */
  }
}

This code is a little messy just do to the nature of the multiGet API.

When using multiGet the response looks like this

[
  ["useStopWatch::timeWhenLastStopped", "1000"],
  ["useStopWatch::isRunning", "false"],
  ["useStopWatch::startTime", "0"],
  ["useStopWatch::laps", "[]"],
]

Thus the example[1] you see all over the place. It's just so that we access the value for that property.

Once we've pulled the value from AsyncStorage we need to convert it to the correct type for that piece of state or set a default value if none existed in AsyncStorage.

Waiting for Data to Load

You may think we're done but if you try to use the app right now you'll see that, when you refresh the app, everything just goes to the default values.

That's because the hook that is persisting the data can run before the data is pulled off of AsyncStorage, thus overriding it and setting it to the default values.

So we need to wait for our data to be loaded from AsyncStorage before persisting anything new. We'll add a new piece of state, dataLoaded, to handle that. Look for // NEW LINE in the code below to see what has been added.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"
import AsyncStorage from "@react-native-async-storage/async-storage"

export type LapData = {
  time: string
  lap: number
}

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

const ASYNC_KEYS = {
  timeWhenLastStopped: "useStopWatch::timeWhenLastStopped",
  isRunning: "useStopWatch::isRunning",
  startTime: "useStopWatch::startTime",
  laps: "useStopWatch::laps",
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])
  const [dataLoaded, setDataLoaded] = useState(false)

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    // load data from async storage in case app was quit
    const loadData = async () => {
      try {
        const persistedValues = await AsyncStorage.multiGet([
          ASYNC_KEYS.timeWhenLastStopped,
          ASYNC_KEYS.isRunning,
          ASYNC_KEYS.startTime,
          ASYNC_KEYS.laps,
        ])

        const [
          persistedTimeWhenLastStopped,
          persistedIsRunning,
          persistedStartTime,
          persistedLaps,
        ] = persistedValues

        setTimeWhenLastStopped(
          persistedTimeWhenLastStopped[1]
            ? parseInt(persistedTimeWhenLastStopped[1])
            : 0
        )
        setIsRunning(persistedIsRunning[1] === "true")
        setStartTime(
          persistedStartTime[1] ? parseInt(persistedStartTime[1]) : 0
        )
        setLaps(persistedLaps[1] ? JSON.parse(persistedLaps[1]) : [])
        setDataLoaded(true) // NEW LINE
      } catch (e) {
        console.log("error loading persisted data", e)
        setDataLoaded(true) // NEW LINE
      }
    }

    loadData()
  }, [])

  useEffect(() => {
    // persist the latest data to async storage to be used later, if needed
    const persist = async () => {
      try {
        await AsyncStorage.multiSet([
          [ASYNC_KEYS.timeWhenLastStopped, timeWhenLastStopped.toString()],
          [ASYNC_KEYS.isRunning, isRunning.toString()],
          [ASYNC_KEYS.startTime, startTime.toString()],
          [ASYNC_KEYS.laps, JSON.stringify(laps)],
        ])
      } catch (e) {
        console.log("error persisting data")
      }
    }

    // NEW LINE
    if (dataLoaded) {
      persist()
    }
  }, [timeWhenLastStopped, isRunning, startTime, laps, dataLoaded])

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    /* ... */
  }

  const lap = () => {
    /* ... */
  }

  let slowestLapTime: number | undefined
  let fastestLapTime: number | undefined

  const formattedLapData: LapData[] = laps.map((l, index) => {
    /* ... */
  })

  return {
    start,
    stop,
    reset,
    lap,

    isRunning,
    time: formatMs(time),

    laps: formattedLapData,
    currentLapTime: laps[0] ? formatMs(time - laps[0]) : formatMs(time),
    hasStarted: time > 0,
    slowestLapTime: formatMs(slowestLapTime || 0),
    fastestLapTime: formatMs(fastestLapTime || 0),

    dataLoaded,
  }
}

You can see a few changes above

Once we successfully or unsuccessfully load data from AsyncStorage we set dataLoaded to true
dataLoaded is added as a dependency of the hook that stores data in AsyncStorage
We check if dataLoaded is true before calling the persist() function
dataLoaded is returned from the hook so we can use that in our UI

Avoiding a Flash in the UI

Right now if you were to run the app everything would work perfectly but the user would briefly see 00:00.00 when they open the app, even if a timer has been running.

We can avoid that by using dataLoaded in the component and returning null until everything has been loaded.

import { StyleSheet } from "react-native";

import { Text, View, StatusBar, SafeAreaView } from "components/themed";
import { CircleButton } from "components/buttons";
import { useStopWatch } from "hooks/useStopWatch";
import { LapList } from "components/lists";

const StopWatch = () => {
  const {
    time,
    isRunning,
    start,
    stop,
    reset,
    lap,
    laps,
    currentLapTime,
    hasStarted,
    slowestLapTime,
    fastestLapTime,
    dataLoaded,
  } = useStopWatch();

  if (!dataLoaded) {
    return null;
  }

  return (
    /* ... */
  );
};

const styles = StyleSheet.create({
  /* ... */
});

export default StopWatch;

Now the timer will run forever! You can view the final code on Github

Animated Progress Bar with Reanimated 2

Spencer Carli — Tue, 26 Jul 2022 18:19:41 +0000

Animations can add a lot of polish to your app but can be challenging to accomplish in a performant way. Reanimated v2 makes that much easier to do.

This article serves as an introduction to the Reanimated v2 API. We'll be building an animated progress bar, as seen in the following GIF.

We'll be building the StatsCard component, which will have the progress bar inside of it (that's the part with the "Pairs matched" and "Total moves" at the top of in the above GIF). Whenever the numerator or denominator changes the progress bar width changes.

// screens/MatchThePairs.tsx

<StatsCard
  title="Pairs matched"
  numerator={matchCount}
  denominator={totalPairs}
/>

Starting Code

Let's take a look at our starting point. It has a progress bar that will adjust its width based on the percentage complete but when the width changes there is no animation, it simply jumps to the next width, as seen in the following GIF.

Take note that we're getting the width of the card via the onLayout prop on the View component. That way, regardles of the screen size and card width we're getting an accurate width to do our calculations off of.

// components/cards/Stats.tsx

import React from "react"
import { View, StyleSheet, Text, ViewStyle } from "react-native"

import { Colors, Spacing, Theme } from "src/constants"

type StatsCardProps = {
  title: string
  numerator: number
  denominator?: number
}

export const StatsCard = (props: StatsCardProps) => {
  const { numerator, denominator } = props
  const showProgressBar = denominator !== undefined

  const [cardWidth, setCardWidth] = React.useState(0)

  const progressBarContainerStyles: ViewStyle[] = [styles.progressBarContainer]
  const progressBarStyles: ViewStyle[] = [styles.progressBar]

  if (showProgressBar) {
    progressBarContainerStyles.push({ backgroundColor: Colors.greyMedium })
    progressBarStyles.push({ width: (numerator / denominator) * cardWidth })
  }

  if (numerator === denominator) {
    progressBarStyles.push({ borderBottomRightRadius: 0 })
  }

  return (
    <View
      style={styles.container}
      onLayout={e => setCardWidth(e.nativeEvent.layout.width)}
    >
      <View style={progressBarContainerStyles}>
        <View style={progressBarStyles} />
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>{props.title}</Text>
        <Text style={styles.numerator}>
          {numerator}
          {denominator && (
            <Text style={styles.denominator}>{`/${denominator}`}</Text>
          )}
        </Text>
      </View>
    </View>
  )
}

const borderRadius = Theme.radius
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.greyLight,
    margin: Spacing.sm,
    borderRadius,
  },
  content: {
    padding: Spacing.sm,
  },
  title: {
    fontWeight: "500",
    fontSize: 16,
    color: Colors.greyDarkest,
    marginBottom: Spacing.xs,
  },
  numerator: {
    color: Colors.greyDarkest,
    fontSize: 20,
    fontWeight: "600",
  },
  denominator: {
    color: Colors.greyDark,
    fontSize: 14,
    fontWeight: "500",
  },
  progressBarContainer: {
    backgroundColor: "transparent",
    height: 8,
    borderTopLeftRadius: borderRadius,
    borderTopRightRadius: borderRadius,
    marginBottom: Spacing.xs,
  },
  progressBar: {
    height: 8,
    width: 0,
    backgroundColor: Colors.blueMedium,
    borderTopLeftRadius: borderRadius,
    borderTopRightRadius: borderRadius,
    borderBottomRightRadius: borderRadius,
  },
})

Migrate to Reanimated 2

If you don't already have Reanimated 2 installed you'll want to do so by following the official docs.

In order to use the animations Reanimated 2 enables we need to use components that understand the animated values that Reanimated provides. Most/all components you would animate are provided under the default export from the library. That means we have Animated.Text, Animated.View, etc.

In the code below we'll want to import Animated from "react-native-reanimated" as well as switch

<View style={progressBarStyles} />

<Animated.View style={progressBarStyles} />

resulting in

// components/cards/Stats.tsx

import React from "react"
import { View, StyleSheet, Text, ViewStyle } from "react-native"
import Animated, { useAnimatedStyle, withSpring } from "react-native-reanimated"

import { Colors, Spacing, Theme } from "src/constants"

type StatsCardProps = {
  /* ... */
}

export const StatsCard = (props: StatsCardProps) => {
  const { numerator, denominator } = props
  const showProgressBar = denominator !== undefined

  const [cardWidth, setCardWidth] = React.useState(0)

  const progressBarContainerStyles: ViewStyle[] = [styles.progressBarContainer]
  const progressBarStyles: ViewStyle[] = [styles.progressBar]

  if (showProgressBar) {
    progressBarContainerStyles.push({ backgroundColor: Colors.greyMedium })
    progressBarStyles.push({ width: (numerator / denominator) * cardWidth })
  }

  if (numerator === denominator) {
    progressBarStyles.push({ borderBottomRightRadius: 0 })
  }

  return (
    <View
      style={styles.container}
      onLayout={e => setCardWidth(e.nativeEvent.layout.width)}
    >
      <View style={progressBarContainerStyles}>
        <Animated.View style={progressBarStyles} />
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>{props.title}</Text>
        <Text style={styles.numerator}>
          {numerator}
          {denominator && (
            <Text style={styles.denominator}>{`/${denominator}`}</Text>
          )}
        </Text>
      </View>
    </View>
  )
}

const borderRadius = Theme.radius
const styles = StyleSheet.create({
  /* ... */
})

The result of this change looks and works exactly the same as before.

Creating Animated Styles

Next we need to set up our animated styles. An Animated.View supports the same style properties as a normal View component (as seen above) in addition to the animated styles unique to Reanimated.

To accomplish this we'll need to import useAnimatedStyle from react-native-reanimated. This hook is one of the main elements in Reanimated v2's API.

From the useAnimatedStyle hook we want to return a style object with the properties that should be animated. In our case it's the width of the progress bar.

Also take note that useAnimatedStyle takes a second argument that serves as an array of depedencies (much like useEffect). Since the width of the bar changes when the numerator, denominator, or cardWidth change we'll add them all as dependencies.

The width is calculated exactly the same as before. The only difference is that we'll add our check of showProgressBar inside the hook.

const progressBarWidthAnimated = useAnimatedStyle(() => {
  if (!showProgressBar) {
    return {
      width: 0,
    }
  }

  return { width: (numerator / denominator) * cardWidth }
}, [numerator, denominator, cardWidth])

That hook in the context of the component:

// components/cards/Stats.tsx

import React from "react"
import { View, StyleSheet, Text, ViewStyle } from "react-native"
import Animated, { useAnimatedStyle, withSpring } from "react-native-reanimated"

import { Colors, Spacing, Theme } from "src/constants"

type StatsCardProps = {
  /* ... */
}

export const StatsCard = (props: StatsCardProps) => {
  const { numerator, denominator } = props
  const showProgressBar = denominator !== undefined

  const [cardWidth, setCardWidth] = React.useState(0)

  const progressBarContainerStyles: ViewStyle[] = [styles.progressBarContainer]

  if (showProgressBar) {
    progressBarContainerStyles.push({ backgroundColor: Colors.greyMedium })
  }

  const progressBarWidthAnimated = useAnimatedStyle(() => {
    if (!showProgressBar) {
      return {
        width: 0,
      }
    }

    return { width: (numerator / denominator) * cardWidth }
  }, [numerator, denominator, cardWidth])

  const progressBarStyles: ViewStyle[] = [
    styles.progressBar,
    progressBarWidthAnimated,
  ]

  if (numerator === denominator) {
    progressBarStyles.push({ borderBottomRightRadius: 0 })
  }

  return (
    <View
      style={styles.container}
      onLayout={e => setCardWidth(e.nativeEvent.layout.width)}
    >
      <View style={progressBarContainerStyles}>
        <Animated.View style={progressBarStyles} />
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>{props.title}</Text>
        <Text style={styles.numerator}>
          {numerator}
          {denominator && (
            <Text style={styles.denominator}>{`/${denominator}`}</Text>
          )}
        </Text>
      </View>
    </View>
  )
}

const borderRadius = Theme.radius
const styles = StyleSheet.create({
  /* ... */
})

By looking at the following GIF you'll see that, once again, the result is exactly the same as what we've had this whole time.

Driving the Animation

Finally we can actually make the animation happen! This happens via withSpring from Reanimated (there are a variety of other animation drivers available as well). This one will allow us to have a spring like animation where it "bounces" over/under the target value.

All we'll do is pass the target value as an argument to withSpring and return that as the width.

return {
  width: withSpring((numerator / denominator) * cardWidth),
}

// components/cards/Stats.tsx

import React from "react"
import { View, StyleSheet, Text, ViewStyle } from "react-native"
import Animated, { useAnimatedStyle, withSpring } from "react-native-reanimated"

import { Colors, Spacing, Theme } from "src/constants"

type StatsCardProps = {
  /* ... */
}

export const StatsCard = (props: StatsCardProps) => {
  const { numerator, denominator } = props
  const showProgressBar = denominator !== undefined

  const [cardWidth, setCardWidth] = React.useState(0)

  const progressBarContainerStyles: ViewStyle[] = [styles.progressBarContainer]

  if (showProgressBar) {
    progressBarContainerStyles.push({ backgroundColor: Colors.greyMedium })
  }

  const progressBarWidthAnimated = useAnimatedStyle(() => {
    if (!showProgressBar) {
      return {
        width: 0,
      }
    }

    return {
      width: withSpring((numerator / denominator) * cardWidth),
    }
  }, [numerator, denominator, cardWidth])

  const progressBarStyles: ViewStyle[] = [
    styles.progressBar,
    progressBarWidthAnimated,
  ]

  if (numerator === denominator) {
    progressBarStyles.push({ borderBottomRightRadius: 0 })
  }

  return (
    <View
      style={styles.container}
      onLayout={e => setCardWidth(e.nativeEvent.layout.width)}
    >
      <View style={progressBarContainerStyles}>
        <Animated.View style={progressBarStyles} />
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>{props.title}</Text>
        <Text style={styles.numerator}>
          {numerator}
          {denominator && (
            <Text style={styles.denominator}>{`/${denominator}`}</Text>
          )}
        </Text>
      </View>
    </View>
  )
}

const borderRadius = Theme.radius
const styles = StyleSheet.create({
  /* ... */
})

Now we see some animations! But there are few issues:

If the bar is 100% full, due to the spring animation, it can overflow beyond the bounds of the card.
If the value is set to 0 after being at 8 (when you reset the game for example) it glitches by filling/unfilling the bar multiple times
If the bar is close to full (7/8 for example) it can still overflow beyond the card

Fixing Overflow Issues

The problems we're seeing are a result of using spring animations, but we can fix those with a few arguments to withSpring.

To fix overshoot issue we can "clamp" the animation to not extend past the target value with overshootClamping. This takes some of the fun away from the spring animation though so we'll only do this if the bar is 0% or 100% full.

To fix the third point of a 90% full bar overflowing the card we can reduce how "bouncy" the spring is by adjusting the stiffness option.

// components/cards/Stats.tsx

import React from "react"
import { View, StyleSheet, Text, ViewStyle } from "react-native"
import Animated, { useAnimatedStyle, withSpring } from "react-native-reanimated"

import { Colors, Spacing, Theme } from "src/constants"

type StatsCardProps = {
  /* ... */
}

export const StatsCard = (props: StatsCardProps) => {
  const { numerator, denominator } = props
  const showProgressBar = denominator !== undefined

  const [cardWidth, setCardWidth] = React.useState(0)

  const progressBarContainerStyles: ViewStyle[] = [styles.progressBarContainer]

  if (showProgressBar) {
    progressBarContainerStyles.push({ backgroundColor: Colors.greyMedium })
  }

  const progressBarWidthAnimated = useAnimatedStyle(() => {
    if (!showProgressBar) {
      return {
        width: 0,
      }
    }

    // We clamp at 0 and the last number so that the bar doesn't extend outside of
    // the card. If we jump from 8 to 0 (reseting a game) the bar glitches and
    // empties, refills, and empties again. Clamping fixes that.
    const useClamping = numerator === 0 || numerator >= denominator
    return {
      width: withSpring((numerator / denominator) * cardWidth, {
        overshootClamping: useClamping,
        stiffness: 75,
      }),
    }
  }, [numerator, denominator, cardWidth])

  const progressBarStyles: ViewStyle[] = [
    styles.progressBar,
    progressBarWidthAnimated,
  ]

  if (numerator === denominator) {
    progressBarStyles.push({ borderBottomRightRadius: 0 })
  }

  return (
    <View
      style={styles.container}
      onLayout={e => setCardWidth(e.nativeEvent.layout.width)}
    >
      <View style={progressBarContainerStyles}>
        <Animated.View style={progressBarStyles} />
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>{props.title}</Text>
        <Text style={styles.numerator}>
          {numerator}
          {denominator && (
            <Text style={styles.denominator}>{`/${denominator}`}</Text>
          )}
        </Text>
      </View>
    </View>
  )
}

const borderRadius = Theme.radius
const styles = StyleSheet.create({
  /* ... */
})

Much better! Now we have a fun and glitch-free animation for the progress bar thanks to Reanimated 2.

You can find the final code on Github.

Further Learning

Reanimated 2 is incredibly powerful. Friend of React Native School, Aditya Pahilwani, wrote a fantastic article on using Reanimated 2 to build an animated tab bar.

What's an area in your app where you could benefit from some subtle animations? Let us know on Twitter.

Build a Custom React Hook: Stopwatch

Spencer Carli — Tue, 19 Jul 2022 16:37:49 +0000

Hooks are a powerful way to abstract logic out of a component to make it reusable and to simplify the component. Today we've got an exercise that will help you practice writing your own hooks by creating a stop watch with the ability to track laps.

This post was originally published on React Native School. Be sure to visit for exclusive React Native tricks, tips, and tutorials!

Hook in Use

Before we start building the custom hook lets look at it in use. This is pulled from an open source React Native app developed by React Native School.

We'll cover what each piece means in a moment but take a look at how the custom hook is used in the component. This is the code for the screen in the gif above.

// screens/StopWatch.tsx

import { StyleSheet } from "react-native"

import { Text, View, StatusBar, SafeAreaView } from "components/themed"
import { CircleButton } from "components/buttons"
import { useStopWatch } from "hooks/useStopWatch"
import { LapList } from "components/lists"

const StopWatch = () => {
  const {
    // actions
    start,
    stop,
    reset,
    lap,
    // data
    isRunning,
    time,
    // lap data
    laps,
    currentLapTime,
    hasStarted,
    slowestLapTime,
    fastestLapTime,
  } = useStopWatch()

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar />
      <View style={styles.container}>
        <Text style={styles.timeText}>{time}</Text>

        <View style={styles.row}>
          <CircleButton
            onPress={() => {
              isRunning ? lap() : reset()
            }}
          >
            {isRunning ? "Lap" : "Reset"}
          </CircleButton>
          <CircleButton
            onPress={() => {
              isRunning ? stop() : start()
            }}
            color={isRunning ? "red" : "green"}
          >
            {isRunning ? "Stop" : "Start"}
          </CircleButton>
        </View>

        <LapList
          hasStarted={hasStarted}
          currentLapTime={currentLapTime}
          laps={laps}
          fastestLapTime={fastestLapTime}
          slowestLapTime={slowestLapTime}
        />
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  /* ... */
})

export default StopWatch

Hook Requirements

Let's create a quick list of requirements for this hook.

Ability to start and stop the stopwatch
Return total time, formatted, as the clock is running
Ability to reset the clock time to 0
Ability to track a lap
Return all lap times
Display the updating current lap time
Designate the slowest lap time
Designate the fastest lap time

Start Functionality

Let's get started building our custom hook. Two resources, from the React docs, that will be helpful to review:

Our hook will be called useStopWatch and at this point we just want to add the ability to start the clock and update the elapsed time.

We'll be writing this in TypeScript (learn more about TypeScript in React Native).

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)

  const start = () => {
    setIsRunning(true)
    setStartTime(Date.now())
  }

  return {
    start,

    isRunning,
    time,
  }
}

The first thing we've done is create a function, start, that when called will store the milliseconds since epoch. We'll subtract this value from the current time to figure out how many milliseconds the timer has been running.

We've also got a boolean, isRunning, that allows us to know if the timer is actively running or not.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    if (startTime > 0) {
      interval.current = setInterval(() => {
        setTime(() => Date.now() - startTime)
      }, 1)
    } else {
      if (interval.current) {
        clearInterval(interval.current)
        interval.current = undefined
      }
    }
  }, [startTime])

  const start = () => {
    setIsRunning(true)
    setStartTime(Date.now())
  }

  return {
    start,

    isRunning,
    time,
  }
}

Now we've added a block of code inside the useEffect hook. This has a dependency on the startTime state so whenever that changes this block will re-run.

If the startTime is 0 then we clear our interval, which we're tracking via useRef (more info on the useRef hook).

If the value of startTime is above 0 then we start an interval that will then subtract the current time from our startTime, giving us the elapsed milliseconds.

The actual delay we give our setInterval doesn't matter (it could be every milllisecond, as it is above, or every second). The accuracy of the time isn't dependent on that - all that would adjust is how often the UI updates.

Stop Functionality

Next we'll add the ability to stop/pause the timer. When we stop the timer we're going to reset our startTime state but we need to keep track of how long the timer had been running when it was stopped.We'll add a new piece of state, timeWhenLastStopped, which will keep track of how many milliseconds the timer had been running when it was stopped.

We then take the value of that and add it to the elapsed time of the current timer to figure out the total time.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    if (startTime > 0) {
      interval.current = setInterval(() => {
        setTime(() => Date.now() - startTime + timeWhenLastStopped)
      }, 1)
    } else {
      if (interval.current) {
        clearInterval(interval.current)
        interval.current = undefined
      }
    }
  }, [startTime])

  const start = () => {
    setIsRunning(true)
    setStartTime(Date.now())
  }

  const stop = () => {
    setIsRunning(false)
    setStartTime(0)
    setTimeWhenLastStopped(time)
  }

  return {
    start,
    stop,

    isRunning,
    time,
  }
}

Formatted Time

Right now the time is stored in milliseconds. As a human this isn't very easy to read so we'll go ahead and format it into hours (if applicable), minutes, seconds, and milliseconds. Additionally, we'll ensure that the number is atleast two digits with the padStart function.

We'll then use the formatMs function to format the time that we return from the hook.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

const padStart = (num: number) => {
  return num.toString().padStart(2, "0")
}

const formatMs = (milliseconds: number) => {
  let seconds = Math.floor(milliseconds / 1000)
  let minutes = Math.floor(seconds / 60)
  let hours = Math.floor(minutes / 60)

  // using the modulus operator gets the remainder if the time roles over
  // we don't do this for hours because we want them to rollover
  // seconds = 81 -> minutes = 1, seconds = 21.
  // 60 minutes in an hour, 60 seconds in a minute, 1000 milliseconds in a second.
  minutes = minutes % 60
  seconds = seconds % 60
  // divide the milliseconds by 10 to get the tenths of a second. 543 -> 54
  const ms = Math.floor((milliseconds % 1000) / 10)

  let str = `${padStart(minutes)}:${padStart(seconds)}.${padStart(ms)}`

  if (hours > 0) {
    str = `${padStart(hours)}:${str}`
  }

  return str
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  return {
    start,
    stop,

    isRunning,
    time: formatMs(time),
  }
}

Since the time will be rapidly changing it's important that the text has a fixed width so the layout isn't constantly shifting. We've covered how to configure fixed width text in React Native in another article.

Reset Clock

Now that the start and stop functions are working we also want to be able to reset the timer. The only difference between this and stopping the timer is that we'll reset the time to 0 as well as set timeWhenLastStopped to 0.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    setIsRunning(false)
    setStartTime(0)
    setTimeWhenLastStopped(0)
    setTime(0)
  }

  return {
    start,
    stop,
    reset,

    isRunning,
    time: formatMs(time),
  }
}

Track a Lap

The next feature is tracking laps as they occur. We'll do this by adding a piece of state that is an array of numbers. To track a lap we'll add the current time, when the lap function is called, to the array.

Take note of the change in the reset function as well. We reset the laps state to an empty array when that function is called.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    setIsRunning(false)
    setStartTime(0)
    setTimeWhenLastStopped(0)
    setTime(0)
    setLaps([]) // NEW LINE
  }

  const lap = () => {
    setLaps(laps => [time, ...laps])
  }

  return {
    start,
    stop,
    reset,
    lap,

    isRunning,
    time: formatMs(time),
  }
}

Display All Lap Times

Then, to display the lap times, we'll need to do a bit of math and formatting.

First we need to determine the lap time by taking the current lap's stop time and subtracting the previous lap's stop time. This gives you the actual lap time.

Then we need to determine which lap that time is for. Since the newest lap is added to the start of the array we subtract the index from the length of our laps array.

For example.

["a", "b", "c", "d", "e"] // length === 5
// Lap 5 ('a'). index = 0, 5 - 0.
// Lap 4 ('b'). index = 1, 5 - 1.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export type LapData = {
  time: string
  lap: number
}

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    /* ... */
  }

  const lap = () => {
    /* ... */
  }

  const formattedLapData: LapData[] = laps.map((l, index) => {
    const previousLap = laps[index + 1] || 0
    const lapTime = l - previousLap

    return {
      time: formatMs(lapTime),
      lap: laps.length - index,
    }
  })

  return {
    start,
    stop,
    reset,
    lap,

    isRunning,
    time: formatMs(time),

    laps: formattedLapData,
  }
}

Display the Current Lap Time

If you look back to the gif at the beginning you'll notice that we have not only the total time that is updating but also the current lap time. This lap time is how much time has elapsed since the previous lap.

To calculate that we need to subtract the last lap time from the current time or, if this is the first lap, the time and the currentLapTime will be the same.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export type LapData = {
  /* ... */
}

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    /* ... */
  }

  const lap = () => {
    /* ... */
  }

  const formattedLapData: LapData[] = laps.map((l, index) => {
    /* ... */
  })

  return {
    start,
    stop,
    reset,
    lap,

    isRunning,
    time: formatMs(time),

    laps: formattedLapData,
    currentLapTime: laps[0] ? formatMs(time - laps[0]) : formatMs(time),
    hasStarted: time > 0,
  }
}

We also add the hasStarted boolean. This is used to determine if the laps information should be displayed.

Designate Slowest Lap Time

We're in the final stretch! The second to last thing we'll do is figure out the slowest lap time. We can accomplish this at the same time that we calculate individual lap times.

All we have to do is determine if the lap time we're currently looking at is slower than the previous slowest. If we don't have a slowest lap time yet then the one we're looking at is it!

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export type LapData = {
  /* ... */
}

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    /* ... */
  }

  const lap = () => {
    /* ... */
  }

  let slowestLapTime: number | undefined
  const formattedLapData: LapData[] = laps.map((l, index) => {
    const previousLap = laps[index + 1] || 0
    const lapTime = l - previousLap

    if (!slowestLapTime || lapTime > slowestLapTime) {
      slowestLapTime = lapTime
    }

    return {
      time: formatMs(lapTime),
      lap: laps.length - index,
    }
  })

  return {
    start,
    stop,
    reset,
    lap,

    isRunning,
    time: formatMs(time),

    laps: formattedLapData,
    currentLapTime: laps[0] ? formatMs(time - laps[0] || 0) : formatMs(time),
    hasStarted: time > 0,
    slowestLapTime: formatMs(slowestLapTime || 0),
  }
}

Designate the Fastest Lap Time

This is the exact opposite of the slowest lap time.

// hooks/useStopWatch.ts

import { useState, useRef, useEffect } from "react"

export type LapData = {
  /* ... */
}

const padStart = (num: number) => {
  /* ... */
}

const formatMs = (milliseconds: number) => {
  /* ... */
}

export const useStopWatch = () => {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [timeWhenLastStopped, setTimeWhenLastStopped] = useState<number>(0)
  const [laps, setLaps] = useState<number[]>([])

  const interval = useRef<ReturnType<typeof setInterval>>()

  useEffect(() => {
    /* ... */
  }, [startTime])

  const start = () => {
    /* ... */
  }

  const stop = () => {
    /* ... */
  }

  const reset = () => {
    /* ... */
  }

  const lap = () => {
    /* ... */
  }

  let slowestLapTime: number | undefined
  let fastestLapTime: number | undefined

  const formattedLapData: LapData[] = laps.map((l, index) => {
    const previousLap = laps[index + 1] || 0
    const lapTime = l - previousLap

    if (!slowestLapTime || lapTime > slowestLapTime) {
      slowestLapTime = lapTime
    }

    if (!fastestLapTime || lapTime < fastestLapTime) {
      fastestLapTime = lapTime
    }

    return {
      time: formatMs(lapTime),
      lap: laps.length - index,
    }
  })

  return {
    start,
    stop,
    reset,
    lap,

    isRunning,
    time: formatMs(time),

    laps: formattedLapData,
    currentLapTime: laps[0] ? formatMs(time - laps[0] || 0) : formatMs(time),
    hasStarted: time > 0,
    slowestLapTime: formatMs(slowestLapTime || 0),
    fastestLapTime: formatMs(fastestLapTime || 0),
  }
}

And there you have a functioning custom stop watch hook! You can see it in use in the open source Clock app (one of many open source React Native apps we have).

Next Steps

Now, we've gone through all this work but this implementation has a problem.

What happens if our app is quit? The "real" Clock app will continue to count the time but ours will reset.

How would you fix this issue? Learn how I did so in part 2 of this tutorial.

Let us know on Twitter.

Flexbox Exercise: Building a Card Game Board

Spencer Carli — Mon, 11 Jul 2022 16:51:40 +0000

In a recent open source React Native app I had to build a grid of cards to fill the screen. After having a handful of conversations regarding Flexbox recently I thought this would be a nice quick exercise to get some practice.

The app is based on the following reference. All we'll be doing today is the grid layout. The rest (animations, custom hooks, etc.) will be covered later.

You can quickly do the exercise via Expo Snack.

The requirements are:

Equally fill the remainder of the screen with cards (after other UI elements like stats or buttons)
Resize for changing screen sizes (such as on web)
Automatically adjust layout based on number of cards in a row

Flexbox is the perfect tool for this in React Native. Though it can take some time to get used to, this is a good exercise to start getting more comfortable with it.

Our end goal, for this exercise, is the following:

Let's start with the following code.

import * as React from "react"
import { Text, View, StyleSheet } from "react-native"
import Constants from "expo-constants"

const Card = () => <View style={styles.card} />

export default function App() {
  return (
    <View style={styles.container}>
      <Text>This is top filler</Text>
      <View style={styles.row}>
        <Card />
        <Card />
        <Card />
      </View>
      <View style={styles.row}>
        <Card />
        <Card />
        <Card />
      </View>
      <View style={styles.row}>
        <Card />
        <Card />
        <Card />
      </View>
      <Text>This is bottom filler</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
  },
  row: {},
  card: {
    backgroundColor: "#7ca1b4",
  },
})

We want each of our rows to equally fill the vertical space and each of our cards to fill that row vertically and to evenly split the space horizontally.

First we want our container to fill up the entire screen. We can do this by setting flex: 1 on our container styles. This is best visualized by temporarily setting a background color.

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
    backgroundColor: "green",
  },
  row: {},
  card: {
    backgroundColor: "#7ca1b4",
  },
})

Now, we need to tell the row to evenly split the remainder of the screen (via flex: 1).

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
    backgroundColor: "green",
  },
  row: {
    flex: 1,
    backgroundColor: "blue",
    marginVertical: 5,
  },
  card: {
    backgroundColor: "#7ca1b4",
  },
})

Because each row has a flex: 1 on it the rendering engine knows that each row should take up 1/3 of the available space. If one row had flex: 2 on it, then a flex: 1 would take up 1/5 and a flex: 2 would take up 2/5 of the area.

Next we want our cards to fill the remaining space, sharing it equally. Again we'll leverage flex: 1.

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
    backgroundColor: "green",
  },
  row: {
    flex: 1,
    backgroundColor: "blue",
    marginVertical: 5,
  },
  card: {
    backgroundColor: "#7ca1b4",
    flex: 1,
    margin: 5,
  },
})

Now, with this, the cards aren't rendered correctly. We want them rendered horizontally, but still split the space equally. We can accomplish this with flexDirection: 'row' on our row style. By default Flexbox in React Native sets the flex direction to column. We'll also remove our placeholder background colors.

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
  },
  row: {
    flex: 1,
    marginVertical: 5,
    flexDirection: "row",
  },
  card: {
    backgroundColor: "#7ca1b4",
    flex: 1,
    margin: 5,
  },
})

Since we're using flexbox to manage our layout we can be confident that it will fill the screen correctly no matter what size the screen is and that it will also automatically resize if the screen size changes.

This was a super brief exercise into practicing layout with Flexbox. If you'd like to learn more I wrote a more in depth article on Flexbox over on LogRocket.

Fixed Width Text in React Native

Spencer Carli — Mon, 04 Jul 2022 15:18:59 +0000

Despite working on React Native daily for 7 years, I'm still constantly learning new things about it. Recently it was the fontVariant style prop on a Text component.

This post was published a week ago on React Native School. Be sure to visit for the latest tips, tricks and tutorials on React Native!

I was working a multi-theme stop watch app in React Native (it's open source!) and ran into an issue where the width of each number was different.

Normally this is not a problem but when you are changing the numbers every millisecond it looks quite hectic.

To fix this is a simple one liner:

When styling the text, add fontVariant: ["tabular-nums"]. This will make the text a fixed width so your layout stays fixed.

Code from the example app:

// ...

const styles = StyleSheet.create({
  // ...
  timeText: {
    fontSize: 60,
    fontWeight: "300",
    marginTop: 100,
    fontVariant: ["tabular-nums"], // fixed width character
  },
})

export default StopWatch

MDN has a good resource through which you can learn more about the font-variant CSS property.

Build Themed Components in React Native

Spencer Carli — Mon, 27 Jun 2022 15:01:04 +0000

Building a multi-theme app doesn't have to be complicated, so long as you take advantage of custom components. In this tutorial we'll cover how to create your own versions of core React Native components that are automatically themed to use the right colors based on the user's preferred color scheme.

Take a look at the code for the StopWatch screen below. There's nothing unique to supporting multiple themes in it, but it fully supports multiple themes thanks to the custom components we'll create.

// screens/StopWatch.tsx

import { StyleSheet } from "react-native"

import { Text, View, StatusBar, SafeAreaView } from "components/themed"
import { CircleButton } from "components/buttons"
import { useStopWatch } from "hooks/useStopWatch"
import { LapList } from "components/lists"

const StopWatch = () => {
  const {
    time,
    isRunning,
    start,
    stop,
    reset,
    lap,
    laps,
    currentLapTime,
    hasStarted,
    slowestLapTime,
    fastestLapTime,
  } = useStopWatch()

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar />
      <View style={styles.container}>
        <Text style={styles.timeText}>{time}</Text>

        <View style={styles.row}>
          <CircleButton
            onPress={() => {
              isRunning ? lap() : reset()
            }}
          >
            {isRunning ? "Lap" : "Reset"}
          </CircleButton>
          <CircleButton
            onPress={() => {
              isRunning ? stop() : start()
            }}
            color={isRunning ? "red" : "green"}
          >
            {isRunning ? "Stop" : "Start"}
          </CircleButton>
        </View>

        <LapList
          hasStarted={hasStarted}
          currentLapTime={currentLapTime}
          laps={laps}
          fastestLapTime={fastestLapTime}
          slowestLapTime={slowestLapTime}
        />
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center" },
  timeText: {
    fontSize: 60,
    fontWeight: "300",
    marginTop: 100,
    fontVariant: ["tabular-nums"], // fixed width character
  },
  row: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    marginTop: 100,
  },
})

export default StopWatch

The useThemeColors Hook

At the core of our themed components is the useThemeColors hook. This hook does the heavy lifting for our theme based logic.

We built a version of this hook in a recent tutorial. I would recommend you read it to get a better understanding of how to implement it and the "why" behind it.

From this hook we return an object with two pieces of data in it:

The colors for the currently active theme. This is standardized between "light" and "dark". It could also expand to other themes as well.
isDark will be used to determine the color of things like the StatusBar. We can't change the actual text color but we can determine if the text should be light or dark.

// hooks/useThemeColors.tsx

import Colors from "constants/Colors"
import { useColorScheme } from "hooks/useColorScheme"

export function useThemeColors() {
  const theme = useColorScheme()

  return {
    isDark: theme === "dark",
    colors: Colors[theme],
  }
}

The View Components

The goal of our custom View component is to serve as a building block that functions just like a normal View. All we do is set the background color and then forward any user defined props onto the underlying View.

This allows us to use the custom View just like a normal View, including overriding our default background color. The same goes for the SafeAreaView.

// components/themed/View.tsx

import { View as DefaultView, ViewProps } from "react-native"
import { SafeAreaView as DefaultSafeAreaView } from "react-native-safe-area-context"

import { useThemeColors } from "hooks/useThemeColors"

export function View(props: ViewProps) {
  const { style, ...otherProps } = props
  const { colors } = useThemeColors()

  return (
    <DefaultView
      style={[{ backgroundColor: colors.background }, style]}
      {...otherProps}
    />
  )
}

export const SafeAreaView = (props: ViewProps) => {
  const { style, ...otherProps } = props
  const { colors } = useThemeColors()

  return (
    <DefaultSafeAreaView
      style={[{ backgroundColor: colors.background }, style]}
      {...otherProps}
    />
  )
}

Learn how to set up path alias' like you see used throughout this post

The Text Component

Just like the View component all the Text component does is set the text color based on the theme. Other options could be to set a default font family, add different text types ("title", "subtitle", etc). Even if you're not supporting multiple themes creating your own Text component is a great practice so you don't need to update styles all over your app when a font family changes.

// components/themed/Text.tsx

import { Text as DefaultText, TextProps } from "react-native"

import { useThemeColors } from "hooks/useThemeColors"

export const Text = (props: TextProps) => {
  const { style, ...otherProps } = props
  const { colors } = useThemeColors()

  return <DefaultText style={[{ color: colors.text }, style]} {...otherProps} />
}

The StatusBar Component

This one is unique because we can only customize parts of it. Therefore we use the isDark data to determine whether we should use the light text or dark text. We can also set the background color of the StatusBar on Android.

The benefit of using this approach is that if we choose to add more themes (as the example repo this tutorial is based on has) we can define if a theme is light or dark in one place.

// components/themed/StatusBar.tsx

import { StatusBar as DefaultStatusBar, StatusBarProps } from "react-native"

import { useThemeColors } from "hooks/useThemeColors"

export const StatusBar = (props: StatusBarProps) => {
  const { isDark, colors } = useThemeColors()

  const barStyle = isDark ? "light-content" : "dark-content"

  return (
    <DefaultStatusBar
      barStyle={barStyle}
      backgroundColor={colors.background}
      {...props}
    />
  )
}

CHALLENGE

There are more default UI elements you can theme. With what's been discussed here, how would you do it?

The different buttons. Notice they have a prop of color but that color stated may not be the same for each theme.
The tab bar from React Navigation. The background color and the icons are customized based on the theme.

The answers exist in the repo but I'd encourage you to think about how you'd do it before digging into the repo to find how I did it.

How to Detect User Color Preference in React Native

Spencer Carli — Mon, 20 Jun 2022 18:13:41 +0000

React Native has two ways for you to determine a user's appearance preferences:

The Appearance API which lets you get their current color scheme
The useColorScheme hook which provides an up-to-date color scheme (it will automatically update as the user's preferences change)

This post was originally posted on React Native School. Visit React Native School to access 170+ tutorials and 18 courses!

Today we'll be leveraging the useColorScheme hook.

We'll take a look at the following screen which shows black text and a white background - a light color scheme.

import React from "react"
import { View, Text, ViewStyle, TextStyle, StyleSheet } from "react-native"

const App = () => {
  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: "white" },
  ]
  const textStyles: TextStyle[] = [styles.text, { color: "black" }]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

We can use the useColorScheme hook and determine the user's preferred color scheme, changing our colors based on it.

import React from "react"
import {
  View,
  Text,
  ViewStyle,
  TextStyle,
  StyleSheet,
  useColorScheme,
} from "react-native"

const App = () => {
  const colorScheme = useColorScheme()
  const isLightTheme = colorScheme === "light"

  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: isLightTheme ? "white" : "black" },
  ]
  const textStyles: TextStyle[] = [
    styles.text,
    { color: isLightTheme ? "black" : "white" },
  ]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

NOTE: If you have the chrome debugger enabled useColorScheme will always return 'light'.

Improving Reusability with useColorScheme

Currently our component needs to know the color theme to determine what color to use. We can put our app colors into a Colors object where we define colors based on the theme.

Then, in the component, we can just say we want to use colors.background or colors.text. Something descriptive.

import React from "react"
import {
  View,
  Text,
  ViewStyle,
  TextStyle,
  StyleSheet,
  useColorScheme,
} from "react-native"

const Colors = {
  light: {
    background: "white",
    text: "black",
  },
  dark: {
    background: "black",
    text: "white",
  },
}

const App = () => {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme]

  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: colors.background },
  ]
  const textStyles: TextStyle[] = [styles.text, { color: colors.text }]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

TypeScript Tip: Dealing with useColorScheme null Type

You may be seeing a warning when trying to access Colors[colorScheme] because colorScheme may be null...

This is a nice tip I saw in an Expo Template on how to fix this.

We can create a custom useColorScheme hook that changes the return type to not be null via NonNullable.

// hooks/ColorSchemeName.ts

import {
  ColorSchemeName,
  useColorScheme as _useColorScheme,
} from "react-native"

// The useColorScheme value is always either light or dark, but the built-in
// type suggests that it can be null. This will not happen in practice, so this
// makes it a bit easier to work with.
export default function useColorScheme(): NonNullable<ColorSchemeName> {
  return _useColorScheme() as NonNullable<ColorSchemeName>
}

Creating your own useColorScheme hook is also nice if you want to "fake" a different color scheme/quickly change through them. Rather than returning the result of _useColorScheme you can just return dark or light.

Custom useThemeColors Hook

Finally, in an effort to write even more reusable code, we can simplify our logic further and create a useThemeColors hook to return just the colors of the current theme without the component having to be aware of what the current theme is.

// hooks/useThemeColors.ts
import useColorScheme from "hooks/useColorScheme"

const Colors = {
  light: {
    background: "white",
    text: "black",
  },
  dark: {
    background: "black",
    text: "white",
  },
}

const useThemeColors = () => {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme]

  return colors
}

export default useThemeColors

Further reading: how to set up path alias', like shown above, in a React Native + TypeScript project.

Now your App.tsx can be as simple as

import React from "react"
import { View, Text, ViewStyle, TextStyle, StyleSheet } from "react-native"

import useThemeColors from "hooks/useThemeColors"

const App = () => {
  const colors = useThemeColors()

  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: colors.background },
  ]
  const textStyles: TextStyle[] = [styles.text, { color: colors.text }]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

Now within our component we don't have to do anything to figure out the current theme or which colors to use for that them. The useThemeColors hook encapsulates all of that and returns a color object from which we can choose the right color for our UI elements.

Expanded Example

You can find an expanded version of this code in a more real-world example in React Native School's Clock example app.

How to Setup Path Alias in a React Native TypeScript App

Spencer Carli — Mon, 13 Jun 2022 18:33:38 +0000

So you've got a React Native app, you're using TypeScript, and you're being killing by long package imports. Let's fix that.

Take the project structure below - if I want to import CircleButton in components from my StopWatch.tsx in screens it's going to look like this:

import { CircleButton } from '../../components/buttons';

/Users/spencer/Dev/ClockApp
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
├── src
|  ├── components
|  |  ├── buttons
|  |  |  ├── CircleButton.tsx
|  |  |  └── index.tsx
|  ├── index.tsx
|  └── screens
|     └── Clocks
|        └── StopWatch.tsx
├── tsconfig.json
└── yarn.lock

Let's fix that so your import statement can look like

import { CircleButton } from 'components/buttons';

or better yet

import { CircleButton } from 'buttons';

To accomplish this you need to update two files.

TypeScript Path Alias

The first is tsconfig.json. This is for TypeScript to understand the path alias.

First set your baseUrl to ., which represents the root of the directory. Every path in your tsconfig will be relative to that.

You then add your path alias' to the paths object. I'm going to add one for the components directory (components/buttons) and a direct one to the button exports (buttons).

// tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    // Path alias config
    "baseUrl": ".",
    "paths": {
      // This needs to be mirrored in babel.config.js
      // Components is a directory with sub directories
      "components/*": ["src/components/*"],

      // We want to expose the exports of the buttons index file
      "buttons": ["src/components/buttons/index"]
    }
  }
}

That will allow TypeScript to parse the following:

import { CircleButton } from "components/buttons"
import { CircleButton } from "buttons"

React Native Path Alias

Now we need to handle React Native path alias so the packager knows where to actually grab the files.

First install the babel-plugin-module-resolver as a developer dependency

yarn add --dev babel-plugin-module-resolver
npm install babel-plugin-module-resolver --save-dev

Now we can update the babel.config.js file to use the module-resolver plugin and point to our directories.

// babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            // This needs to be mirrored in tsconfig.json
            components: "./src/components",
            buttons: "./src/components/buttons",
          },
        },
      ],
    ],
  }
}

And you're all set! Now you can shorten your imports, type less, ease refactoring, and make it easier to scan code.

Pro tip: Want to use absolute paths but don't want to add an alias for every directory? Add your root directory (such as src) to the alias config as well!

// tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    // Path alias config
    "baseUrl": ".",
    "paths": {
      // This needs to be mirrored in babel.config.js
      "components/*": ["src/components/*"],
      "buttons": ["src/components/buttons/index"],
      "src/*": ["src/*"]
    }
  }
}

// babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            // This needs to be mirrored in tsconfig.json
            components: "./src/components",
            buttons: "./src/components/buttons",
            src: "./src",
          },
        },
      ],
    ],
  }
}

Now you can use imports like import { CircleButton } from "src/components/buttons" as well.

Hope that helps!

Build a Wordle Clone with React Native

Spencer Carli — Thu, 10 Mar 2022 16:02:15 +0000

This post was originally published on React Native School.

Wordle has become an increasingly popular game and it’s one that we can build with React Native... in a single file!

Here’s a demo of what we’ll be building today.

Let’s jump in, shall we?

We'll use Expo and TypeScript throughout this tutorial. Feel free to use whatever you like - nothing is Expo specific.

To create a new Expo project with TypeScript running the following commands

expo init WordleClone

Then select “blank (TypeScript)” under Managed Workflow.

Build the Wordle UI with React Native

First we’ll build the UI and then add functionality. We’ll use a SafeAreaView so all our content is visible and not hidden by any notches potentially on a device.

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView>
      <View></View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({});

Guess Blocks

In Wordle you have 6 chances to guess a 5 letter word. We’ll first build out the grid to display our guesses.

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';

const GuessRow = () => (
  <View style={styles.guessRow}>
    <View style={styles.guessSquare}></View>
    <View style={styles.guessSquare}></View>
    <View style={styles.guessSquare}></View>
    <View style={styles.guessSquare}></View>
    <View style={styles.guessSquare}></View>
  </View>
);

export default function App() {
  return (
    <SafeAreaView>
      <View>
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  guessRow: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  guessSquare: {
    borderColor: '#d3d6da',
    borderWidth: 2,
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 5,
  },
});

We need to then display the letters within each “block”. Since there is a decent amount of duplication (and it’s only going to increase) I’m going to break the block into a component.

import React from 'react';
import { StyleSheet, View, SafeAreaView, Text } from 'react-native';

const Block = ({ letter }: { letter: string }) => (
  <View style={styles.guessSquare}>
    <Text style={styles.guessLetter}>{letter}</Text>
  </View>
);

const GuessRow = () => (
  <View style={styles.guessRow}>
    <Block letter="A" />
    <Block letter="E" />
    <Block letter="I" />
    <Block letter="O" />
    <Block letter="" />
  </View>
);

// ...

const styles = StyleSheet.create({
  // ...
  guessLetter: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#878a8c',
  },
});

Keyboard

Rather than using the system keyboard we’ll build our own simple one, following the QWERTY layout.

Each key should be tappable and we’ll rely on React Native’s Flexbox implementation to figure out the size of each key.

import React from 'react';
import {
  StyleSheet,
  View,
  SafeAreaView,
  Text,
  TouchableOpacity,
} from 'react-native';

// ...

const Keyboard = () => {
  const row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];

  return (
    <View style={styles.keyboard}>
      <View style={styles.keyboardRow}>
        {row1.map((letter) => (
          <TouchableOpacity>
            <View style={styles.key}>
              <Text style={styles.keyLetter}>{letter}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
      </View>
      <Keyboard />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  // ...

  container: {
    justifyContent: 'space-between',
    flex: 1,
  },

  // keyboard
  keyboard: { flexDirection: 'column' },
  keyboardRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 10,
  },
  key: {
    backgroundColor: '#d3d6da',
    padding: 10,
    margin: 3,
    borderRadius: 5,
  },
  keyLetter: {
    fontWeight: '500',
    fontSize: 15,
  },
});

We can then leverage our KeyboardRow component to fill out the next two levels of the keyboard. On the third row I’m using ⌫ to represent the delete key.

// ...

const KeyboardRow = ({ letters }: { letters: string[] }) => (
  <View style={styles.keyboardRow}>
    {letters.map((letter) => (
      <TouchableOpacity>
        <View style={styles.key}>
          <Text style={styles.keyLetter}>{letter}</Text>
        </View>
      </TouchableOpacity>
    ))}
  </View>
);

const Keyboard = () => {
  const row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
  const row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
  const row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '⌫'];

  return (
    <View style={styles.keyboard}>
      <KeyboardRow letters={row1} />
      <KeyboardRow letters={row2} />
      <KeyboardRow letters={row3} />
    </View>
  );
};

// ...

And finally we’ll add an “ENTER” key so the user can submit their guess.

// ...

const Keyboard = () => {
  const row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
  const row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
  const row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '⌫'];

  return (
    <View style={styles.keyboard}>
      <KeyboardRow letters={row1} />
      <KeyboardRow letters={row2} />
      <KeyboardRow letters={row3} />
      <View style={styles.keyboardRow}>
        <TouchableOpacity>
          <View style={styles.key}>
            <Text style={styles.keyLetter}>ENTER</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// ...

Capture User Input

Right now our keys don’t do anything. We’ll create a function that we pass down to each key that will be called each time a user taps one of the keys in our keyboard.

// ...

const KeyboardRow = ({
  letters,
  onKeyPress,
}: {
  letters: string[],
  onKeyPress: (letter: string) => void,
}) => (
  <View style={styles.keyboardRow}>
    {letters.map((letter) => (
      <TouchableOpacity onPress={() => onKeyPress(letter)}>
        <View style={styles.key}>
          <Text style={styles.keyLetter}>{letter}</Text>
        </View>
      </TouchableOpacity>
    ))}
  </View>
);

const Keyboard = ({ onKeyPress }: { onKeyPress: (letter: string) => void }) => {
  const row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
  const row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
  const row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '⌫'];

  return (
    <View style={styles.keyboard}>
      <KeyboardRow letters={row1} onKeyPress={onKeyPress} />
      <KeyboardRow letters={row2} onKeyPress={onKeyPress} />
      <KeyboardRow letters={row3} onKeyPress={onKeyPress} />
      <View style={styles.keyboardRow}>
        <TouchableOpacity onPress={() => onKeyPress('ENTER')}>
          <View style={styles.key}>
            <Text style={styles.keyLetter}>ENTER</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default function App() {
  const handleKeyPress = (letter: string) => {
    alert(letter);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
        <GuessRow />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

Before we actually start capturing user key input lets remove the placeholder text.

// ...

const GuessRow = () => (
  <View style={styles.guessRow}>
    <Block letter="" />
    <Block letter="" />
    <Block letter="" />
    <Block letter="" />
    <Block letter="" />
  </View>
);

// ...

Capture & Store Letter Presses

Now we can capture the actually keys a user presses. We’ll store a user’s guess in React state and then pass that state down to the GuessRow component. We’ll handle multiple guesses later.

// ...

const GuessRow = ({ guess }: { guess: string }) => {
  const letters = guess.split('');

  return (
    <View style={styles.guessRow}>
      <Block letter={letters[0]} />
      <Block letter={letters[1]} />
      <Block letter={letters[2]} />
      <Block letter={letters[3]} />
      <Block letter={letters[4]} />
    </View>
  );
};

// ...

export default function App() {
  const [guess, setGuess] = React.useState('');

  const handleKeyPress = (letter: string) => {
    setGuess(guess + letter);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow guess={guess} />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

Handle a Complete Guess

A guess is considered complete if it is 5 characters long. We don’t want to continue to add characters to a string of 5 characters.

// ...

export default function App() {
  const [guess, setGuess] = React.useState('');

  const handleKeyPress = (letter: string) => {
    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuess(guess + letter);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow guess={guess} />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

Handle Delete Tap

Another consideration we need to make is when the delete key is pressed. We should delete the last character from the string, which can be accomplished using a string slice.

// ...

export default function App() {
  const [guess, setGuess] = React.useState('');

  const handleKeyPress = (letter: string) => {
    if (letter === '⌫') {
      setGuess(guess.slice(0, -1));
      return;
    }

    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuess(guess + letter);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow guess={guess} />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

Handle Enter Tap

When a user presses “enter” we have a few considerations to make. First is if the word is too short (length less than 5).

// ...

export default function App() {
  const [guess, setGuess] = React.useState('');

  const handleKeyPress = (letter: string) => {
    if (letter === 'ENTER') {
      if (guess.length !== 5) {
        alert('Word too short.');
        return;
      }
    }

    if (letter === '⌫') {
      setGuess(guess.slice(0, -1));
      return;
    }

    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuess(guess + letter);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow guess={guess} />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

We also need to check if the word they submitted exists in our dictionary. This prevents people from mining for words by submitting something like “aeiou” in search of vowels.

// ...

const words = ['LIGHT', 'WRUNG', 'COULD', 'PERKY', 'MOUNT', 'WHACK', 'SUGAR'];

export default function App() {
  const [guess, setGuess] = React.useState('');

  const handleKeyPress = (letter: string) => {
    if (letter === 'ENTER') {
      if (guess.length !== 5) {
        alert('Word too short.');
        return;
      }

      if (!words.includes(guess)) {
        alert('Not a valid word.');
        return;
      }
    }

    if (letter === '⌫') {
      setGuess(guess.slice(0, -1));
      return;
    }

    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuess(guess + letter);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow guess={guess} />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

Finally, lets check if the word they submitted is equal to the active word.

// ...

export default function App() {
  const [activeWord] = React.useState(words[0]);
  const [guess, setGuess] = React.useState('');

  const handleKeyPress = (letter: string) => {
    if (letter === 'ENTER') {
      if (guess.length !== 5) {
        alert('Word too short.');
        return;
      }

      if (!words.includes(guess)) {
        alert('Not a valid word.');
        return;
      }

      if (guess === activeWord) {
        alert('You win!');
        return;
      }
    }

    if (letter === '⌫') {
      setGuess(guess.slice(0, -1));
      return;
    }

    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuess(guess + letter);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow guess={guess} />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
        <GuessRow guess="" />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

Manage State of Multiple Guesses

Now we need to do the more complicated part - handling the (up to) 6 guesses a user can make.

We’ll do this by creating a guesses object and a guess index. When a user submits a valid guess we’ll increase our guess index by one.

We can pass each guess down to the relevant GuessRow to be displayed.

Finally, we need to consider if they’ve reached their game guess limit when pressing submit.

// ...

interface IGuess {
  [key: number]: string;
}

const defaultGuess: IGuess = {
  0: '',
  1: '',
  2: '',
  3: '',
  4: '',
  5: '',
};

export default function App() {
  const [activeWord] = React.useState(words[0]);
  const [guessIndex, setGuessIndex] = React.useState(0);
  const [guesses, setGuesses] = React.useState < IGuess > defaultGuess;

  const handleKeyPress = (letter: string) => {
    const guess: string = guesses[guessIndex];

    if (letter === 'ENTER') {
      if (guess.length !== 5) {
        alert('Word too short.');
        return;
      }

      if (!words.includes(guess)) {
        alert('Not a valid word.');
        return;
      }

      if (guess === activeWord) {
        alert('You win!');
        return;
      }

      if (guessIndex < 5) {
        setGuessIndex(guessIndex + 1);
      } else {
        alert('You lose!');
      }
    }

    if (letter === '⌫') {
      setGuesses({ ...guesses, [guessIndex]: guess.slice(0, -1) });
      return;
    }

    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuesses({ ...guesses, [guessIndex]: guess + letter });
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow guess={guesses[0]} />
        <GuessRow guess={guesses[1]} />
        <GuessRow guess={guesses[2]} />
        <GuessRow guess={guesses[3]} />
        <GuessRow guess={guesses[4]} />
        <GuessRow guess={guesses[5]} />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

// ...

Indicate Accuracy in a Guess Block

So far we’ve got no visual indication if a guess has correctly placed letters or if they’re in the word.

To determine if a letter is in the word or in the correct place we need to know:

Has the user submitted that guess yet (we don’t want to show them if a letter is correct before they press “ENTER”)
What is the word the user is trying to guess?
What is the user’s guess?

By passing that information down to the Block component we can first compare if the letter the user guessed is the same as the letter in the word at that index.

If so, we should make the text white and the background green.

In the following image the word the user is trying to guess is “LIGHT” and their guess was “TIGHT”

// ...

const Block = ({
  index,
  guess,
  word,
  guessed,
}: {
  index: number,
  guess: string,
  word: string,
  guessed: boolean,
}) => {
  const letter = guess[index];
  const wordLetter = word[index];

  const blockStyles: any[] = [styles.guessSquare];
  const textStyles: any[] = [styles.guessLetter];

  if (letter === wordLetter && guessed) {
    blockStyles.push(styles.guessCorrect);
    textStyles.push(styles.guessedLetter);
  }

  return (
    <View style={blockStyles}>
      <Text style={textStyles}>{letter}</Text>
    </View>
  );
};

const GuessRow = ({
  guess,
  word,
  guessed,
}: {
  guess: string,
  word: string,
  guessed: boolean,
}) => {
  return (
    <View style={styles.guessRow}>
      <Block index={0} guess={guess} word={word} guessed={guessed} />
      <Block index={1} guess={guess} word={word} guessed={guessed} />
      <Block index={2} guess={guess} word={word} guessed={guessed} />
      <Block index={3} guess={guess} word={word} guessed={guessed} />
      <Block index={4} guess={guess} word={word} guessed={guessed} />
    </View>
  );
};

// ...

const words = [
  'LIGHT',
  'TIGHT',
  'WRUNG',
  'COULD',
  'PERKY',
  'MOUNT',
  'WHACK',
  'SUGAR',
];

interface IGuess {
  [key: number]: string;
}

const defaultGuess: IGuess = {
  0: '',
  1: '',
  2: '',
  3: '',
  4: '',
  5: '',
};

export default function App() {
  const [activeWord] = React.useState(words[0]);
  const [guessIndex, setGuessIndex] = React.useState(0);
  const [guesses, setGuesses] = React.useState < IGuess > defaultGuess;

  const handleKeyPress = (letter: string) => {
    // ...
  };

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow
          guess={guesses[0]}
          word={activeWord}
          guessed={guessIndex > 0}
        />
        <GuessRow
          guess={guesses[1]}
          word={activeWord}
          guessed={guessIndex > 1}
        />
        <GuessRow
          guess={guesses[2]}
          word={activeWord}
          guessed={guessIndex > 2}
        />
        <GuessRow
          guess={guesses[3]}
          word={activeWord}
          guessed={guessIndex > 3}
        />
        <GuessRow
          guess={guesses[4]}
          word={activeWord}
          guessed={guessIndex > 4}
        />
        <GuessRow
          guess={guesses[5]}
          word={activeWord}
          guessed={guessIndex > 5}
        />
      </View>
      <Keyboard onKeyPress={handleKeyPress} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  // ...
  guessedLetter: {
    color: '#fff',
  },
  guessCorrect: {
    backgroundColor: '#6aaa64',
    borderColor: '#6aaa64',
  },

  container: {
    justifyContent: 'space-between',
    flex: 1,
  },

  // ...
});

Next case to consider is if the letter is in the word but at a different index. We should only check this if the character in the guess and character in the word do not match.

Again, the correct word is “LIGHT” but the user guessed “GOING”

// ...

const Block = ({
  index,
  guess,
  word,
  guessed,
}: {
  index: number,
  guess: string,
  word: string,
  guessed: boolean,
}) => {
  const letter = guess[index];
  const wordLetter = word[index];

  const blockStyles: any[] = [styles.guessSquare];
  const textStyles: any[] = [styles.guessLetter];

  if (letter === wordLetter && guessed) {
    blockStyles.push(styles.guessCorrect);
    textStyles.push(styles.guessedLetter);
  } else if (word.includes(letter) && guessed) {
    blockStyles.push(styles.guessInWord);
    textStyles.push(styles.guessedLetter);
  }

  return (
    <View style={blockStyles}>
      <Text style={textStyles}>{letter}</Text>
    </View>
  );
};

// ...

Finally we’ll indicate to the user if a letter they guessed is not in the word at all by setting the background to grey, ruling that letter out for future guesses.

Once again the correct word is “LIGHT” and the user guess is “GOING.

// ...

const Block = ({
  index,
  guess,
  word,
  guessed,
}: {
  index: number,
  guess: string,
  word: string,
  guessed: boolean,
}) => {
  const letter = guess[index];
  const wordLetter = word[index];

  const blockStyles: any[] = [styles.guessSquare];
  const textStyles: any[] = [styles.guessLetter];

  if (letter === wordLetter && guessed) {
    blockStyles.push(styles.guessCorrect);
    textStyles.push(styles.guessedLetter);
  } else if (word.includes(letter) && guessed) {
    blockStyles.push(styles.guessInWord);
    textStyles.push(styles.guessedLetter);
  } else if (guessed) {
    blockStyles.push(styles.guessNotInWord);
    textStyles.push(styles.guessedLetter);
  }

  return (
    <View style={blockStyles}>
      <Text style={textStyles}>{letter}</Text>
    </View>
  );
};

// ...

Reset Game

Unlike the real Wordle game, where you can only play once per day, we’ll set ours up so that a user can reset the game and get a new word after winning/losing the game.

When the game is reset we’ll reset all the values by listening to the changing state using a useEffect.

import React from 'react';
import {
  StyleSheet,
  View,
  SafeAreaView,
  Text,
  TouchableOpacity,
  Button,
} from 'react-native';

// ...

export default function App() {
  const [activeWord, setActiveWord] = React.useState(words[0]);
  const [guessIndex, setGuessIndex] = React.useState(0);
  const [guesses, setGuesses] = React.useState < IGuess > defaultGuess;
  const [gameComplete, setGameComplete] = React.useState(false);

  const handleKeyPress = (letter: string) => {
    const guess: string = guesses[guessIndex];

    if (letter === 'ENTER') {
      if (guess.length !== 5) {
        alert('Word too short.');
        return;
      }

      if (!words.includes(guess)) {
        alert('Not a valid word.');
        return;
      }

      if (guess === activeWord) {
        setGuessIndex(guessIndex + 1);
        setGameComplete(true);
        alert('You win!');
        return;
      }

      if (guessIndex < 5) {
        setGuessIndex(guessIndex + 1);
      } else {
        setGameComplete(true);
        alert('You lose!');
        return;
      }
    }

    if (letter === '⌫') {
      setGuesses({ ...guesses, [guessIndex]: guess.slice(0, -1) });
      return;
    }

    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuesses({ ...guesses, [guessIndex]: guess + letter });
  };

  React.useEffect(() => {
    if (!gameComplete) {
      setActiveWord(words[Math.floor(Math.random() * words.length)]);
      setGuesses(defaultGuess);
      setGuessIndex(0);
    }
  }, [gameComplete]);

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow
          guess={guesses[0]}
          word={activeWord}
          guessed={guessIndex > 0}
        />
        <GuessRow
          guess={guesses[1]}
          word={activeWord}
          guessed={guessIndex > 1}
        />
        <GuessRow
          guess={guesses[2]}
          word={activeWord}
          guessed={guessIndex > 2}
        />
        <GuessRow
          guess={guesses[3]}
          word={activeWord}
          guessed={guessIndex > 3}
        />
        <GuessRow
          guess={guesses[4]}
          word={activeWord}
          guessed={guessIndex > 4}
        />
        <GuessRow
          guess={guesses[5]}
          word={activeWord}
          guessed={guessIndex > 5}
        />
      </View>
      <View>
        {gameComplete ? (
          <View style={styles.gameCompleteWrapper}>
            <Text>
              <Text style={styles.bold}>Correct Word:</Text> {activeWord}
            </Text>
            <View>
              <Button
                title="Reset"
                onPress={() => {
                  setGameComplete(false);
                }}
              />
            </View>
          </View>
        ) : null}
        <Keyboard onKeyPress={handleKeyPress} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  // ...
  keyLetter: {
    fontWeight: '500',
    fontSize: 15,
  },

  // Game complete
  gameCompleteWrapper: {
    alignItems: 'center',
  },
  bold: {
    fontWeight: 'bold',
  },
});

That’s all we’ll cover today. You’ve got a pretty functional version of Wordle, in one file, using React Native.

Additional features to add that ours is missing include:

Indicate if a letter is correctly placed, in the word, or not in the word on the keyboard
Create a shareable emoji to show the user’s guess journey when the game is complete.

Final Code

The final file for our React Native Wordle clone is:

import React from 'react';
import {
  StyleSheet,
  View,
  SafeAreaView,
  Text,
  TouchableOpacity,
  Button,
} from 'react-native';

const Block = ({
  index,
  guess,
  word,
  guessed,
}: {
  index: number,
  guess: string,
  word: string,
  guessed: boolean,
}) => {
  const letter = guess[index];
  const wordLetter = word[index];

  const blockStyles: any[] = [styles.guessSquare];
  const textStyles: any[] = [styles.guessLetter];

  if (letter === wordLetter && guessed) {
    blockStyles.push(styles.guessCorrect);
    textStyles.push(styles.guessedLetter);
  } else if (word.includes(letter) && guessed) {
    blockStyles.push(styles.guessInWord);
    textStyles.push(styles.guessedLetter);
  } else if (guessed) {
    blockStyles.push(styles.guessNotInWord);
    textStyles.push(styles.guessedLetter);
  }

  return (
    <View style={blockStyles}>
      <Text style={textStyles}>{letter}</Text>
    </View>
  );
};

const GuessRow = ({
  guess,
  word,
  guessed,
}: {
  guess: string,
  word: string,
  guessed: boolean,
}) => {
  return (
    <View style={styles.guessRow}>
      <Block index={0} guess={guess} word={word} guessed={guessed} />
      <Block index={1} guess={guess} word={word} guessed={guessed} />
      <Block index={2} guess={guess} word={word} guessed={guessed} />
      <Block index={3} guess={guess} word={word} guessed={guessed} />
      <Block index={4} guess={guess} word={word} guessed={guessed} />
    </View>
  );
};

const KeyboardRow = ({
  letters,
  onKeyPress,
}: {
  letters: string[],
  onKeyPress: (letter: string) => void,
}) => (
  <View style={styles.keyboardRow}>
    {letters.map((letter) => (
      <TouchableOpacity onPress={() => onKeyPress(letter)} key={letter}>
        <View style={styles.key}>
          <Text style={styles.keyLetter}>{letter}</Text>
        </View>
      </TouchableOpacity>
    ))}
  </View>
);

const Keyboard = ({ onKeyPress }: { onKeyPress: (letter: string) => void }) => {
  const row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
  const row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
  const row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '⌫'];

  return (
    <View style={styles.keyboard}>
      <KeyboardRow letters={row1} onKeyPress={onKeyPress} />
      <KeyboardRow letters={row2} onKeyPress={onKeyPress} />
      <KeyboardRow letters={row3} onKeyPress={onKeyPress} />
      <View style={styles.keyboardRow}>
        <TouchableOpacity onPress={() => onKeyPress('ENTER')}>
          <View style={styles.key}>
            <Text style={styles.keyLetter}>ENTER</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const words = [
  'LIGHT',
  'TIGHT',
  'GOING',
  'WRUNG',
  'COULD',
  'PERKY',
  'MOUNT',
  'WHACK',
  'SUGAR',
];

interface IGuess {
  [key: number]: string;
}

const defaultGuess: IGuess = {
  0: '',
  1: '',
  2: '',
  3: '',
  4: '',
  5: '',
};

export default function App() {
  const [activeWord, setActiveWord] = React.useState(words[0]);
  const [guessIndex, setGuessIndex] = React.useState(0);
  const [guesses, setGuesses] = React.useState < IGuess > defaultGuess;
  const [gameComplete, setGameComplete] = React.useState(false);

  const handleKeyPress = (letter: string) => {
    const guess: string = guesses[guessIndex];

    if (letter === 'ENTER') {
      if (guess.length !== 5) {
        alert('Word too short.');
        return;
      }

      if (!words.includes(guess)) {
        alert('Not a valid word.');
        return;
      }

      if (guess === activeWord) {
        setGuessIndex(guessIndex + 1);
        setGameComplete(true);
        alert('You win!');
        return;
      }

      if (guessIndex < 5) {
        setGuessIndex(guessIndex + 1);
      } else {
        setGameComplete(true);
        alert('You lose!');
        return;
      }
    }

    if (letter === '⌫') {
      setGuesses({ ...guesses, [guessIndex]: guess.slice(0, -1) });
      return;
    }

    // don't add if guess is full
    if (guess.length >= 5) {
      return;
    }

    setGuesses({ ...guesses, [guessIndex]: guess + letter });
  };

  React.useEffect(() => {
    if (!gameComplete) {
      setActiveWord(words[Math.floor(Math.random() * words.length)]);
      setGuesses(defaultGuess);
      setGuessIndex(0);
    }
  }, [gameComplete]);

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <GuessRow
          guess={guesses[0]}
          word={activeWord}
          guessed={guessIndex > 0}
        />
        <GuessRow
          guess={guesses[1]}
          word={activeWord}
          guessed={guessIndex > 1}
        />
        <GuessRow
          guess={guesses[2]}
          word={activeWord}
          guessed={guessIndex > 2}
        />
        <GuessRow
          guess={guesses[3]}
          word={activeWord}
          guessed={guessIndex > 3}
        />
        <GuessRow
          guess={guesses[4]}
          word={activeWord}
          guessed={guessIndex > 4}
        />
        <GuessRow
          guess={guesses[5]}
          word={activeWord}
          guessed={guessIndex > 5}
        />
      </View>
      <View>
        {gameComplete ? (
          <View style={styles.gameCompleteWrapper}>
            <Text>
              <Text style={styles.bold}>Correct Word:</Text> {activeWord}
            </Text>
            <View>
              <Button
                title="Reset"
                onPress={() => {
                  setGameComplete(false);
                }}
              />
            </View>
          </View>
        ) : null}
        <Keyboard onKeyPress={handleKeyPress} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  guessRow: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  guessSquare: {
    borderColor: '#d3d6da',
    borderWidth: 2,
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 5,
  },
  guessLetter: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#878a8c',
  },
  guessedLetter: {
    color: '#fff',
  },
  guessCorrect: {
    backgroundColor: '#6aaa64',
    borderColor: '#6aaa64',
  },
  guessInWord: {
    backgroundColor: '#c9b458',
    borderColor: '#c9b458',
  },
  guessNotInWord: {
    backgroundColor: '#787c7e',
    borderColor: '#787c7e',
  },

  container: {
    justifyContent: 'space-between',
    flex: 1,
  },

  // keyboard
  keyboard: { flexDirection: 'column' },
  keyboardRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 10,
  },
  key: {
    backgroundColor: '#d3d6da',
    padding: 10,
    margin: 3,
    borderRadius: 5,
  },
  keyLetter: {
    fontWeight: '500',
    fontSize: 15,
  },

  // Game complete
  gameCompleteWrapper: {
    alignItems: 'center',
  },
  bold: {
    fontWeight: 'bold',
  },
});