Glossary

103 terms from React Native, in plain words, each with the chapter that teaches it.

Search the glossary

#

@/ (path alias): An import starting with `@/` means "from the `src` folder", so `@/money` is `src/money.ts` from anywhere in Kettle & Crane's project. It avoids long relative paths like `../../money`.
@expo/vector-icons (Ionicons): A package already in your project that supplies icon sets such as `Ionicons`; each icon has a name like `cafe-outline`. A tab's `tabBarIcon` option returns one.

A

accessibilityLabel / accessibilityRole: Props that help screen readers, which speak the screen aloud for blind or low-vision users. `accessibilityRole` says what kind of control something is, and `accessibilityLabel` is the text read aloud, such as "Add House Espresso to cart".
ActivityIndicator: The phone's own loading spinner. The Menu screen shows it while the first load of products from the server is running.
API (Application Programming Interface): A server that apps talk to over the internet to get or send data. Kettle & Crane's practice API (`server.mjs`) serves the menu and accepts orders.
APK, AAB: Android app file formats. An `.apk` installs straight onto a phone, which suits testers; an `.aab` is what Google Play wants and is the default EAS build.
APNs (Apple Push Notification service): Apple's service that delivers push notifications to iPhones. Expo's push service talks to it for you.
app.json: The project file holding the app's settings, such as its `name`, `slug`, `icon`, config plugins and the iOS/Android IDs.
as (type assertion): A TypeScript phrase that tells the compiler what type a value really is, as in `(e as Error).message` for something caught in `catch`. It doesn't change the value at runtime.
AsyncStorage: The phone's version of `localStorage`: it saves strings under keys, and every call is asynchronous so you `await` it. Kettle & Crane uses it to keep the cart between launches; it isn't encrypted, so it's not for secrets.

B

Badge: The small number shown on a tab or app icon, such as the count of items on the Cart tab.
Build profile: A named set of build settings in `eas.json`, such as `development`, `preview` and `production`.
Bundle identifier, package: The unique ID of an app in the stores, usually a reversed web domain like `com.kettleandcrane.order`. iPhone calls it the bundle identifier and Android calls it the package; you can't change it once the app is in a store.
Button: React Native's simple built-in button with a `title` and `onPress`. It's quick to use but can't be styled much, so styled buttons use `Pressable`.

C

CameraView: The expo-camera component that shows the live camera picture. It can also scan QR codes through `barcodeScannerSettings` and `onBarcodeScanned`.
canAskAgain: A field of a permission object that says whether the app may ask the user again. When it's `false`, only the phone's Settings app can change the answer.
Config plugin: An entry in the `plugins` list of `app.json` that changes the native iOS and Android project when the app is built, for example to write the camera permission text. Changing plugins means making a new build.
Constants (expo-constants): A package that gives your running app access to its `app.json` settings, such as the EAS project ID.
Content-Type header: An HTTP header telling the receiver what kind of data the body is. For orders, `application/json` says the body is JSON text.
contentContainerStyle: A prop on `ScrollView`, `FlatList` and similar that styles the inner content (for example its padding), while `style` styles the scrolling frame itself.
Context: A way for a component high in the tree to offer a value that any component below it can read directly, however deep. Kettle & Crane uses it to share the cart between all screens.
Core components: The components built into React Native and imported from `react-native`, such as `View` and `Text`. Each becomes the matching native view on the phone.
Credentials: The signing keys and push keys that EAS keeps safe for your app. `eas credentials` shows and manages them.
curl: A command-line tool for sending HTTP requests to a server. For example, a server can use `curl` to send a JSON push message to Expo's push service, which passes it on to the phone.
Custom hook: Your own function whose name starts with `use` and that calls other hooks. `useCart()` wraps `useContext` and throws a clear error when used outside the provider.

D

Density-independent pixels (dp): React Native's size unit, written as plain numbers like `padding: 16`. It looks the same size on every phone however sharp its screen.
Development build: Your own version of Expo Go: your app with exactly the native code it needs plus Expo's developer tools. You rebuild only when the native side changes.
Development server: The program started by `npx expo start` on your computer that sends your code to the phone, with Metro bundling the files.
Dynamic route: A route file with a name in square brackets, such as `product/[sku].tsx`, matching any value there like `/product/ESP-12`. `useLocalSearchParams` reads the value.

E

EAS, EAS CLI: Expo Application Services builds your app on Expo's servers, so you don't need a Mac for iPhone apps. EAS CLI is its command-line tool, used through commands like `eas login` and `eas build`.
eas.json: The file written by `eas build:configure` that holds your build profiles.
Environment variable: A setting given to a program from outside its code. Expo reads them from a `.env` file, such as `EXPO_PUBLIC_API_URL` holding your computer's address.
Expo: A framework and set of tools on top of React Native that creates projects, runs them on your phone and supplies ready-made packages for the camera, storage and more.
Expo Go: A free store app that runs your Expo project on your phone over Wi-Fi, without building your own app. It only contains a fixed set of native code.
Expo push token: A string like `ExponentPushToken[xxxx]` that addresses one app on one phone for Expo's push service.
Expo Router: Expo's file-based navigation system: each file in `src/app` becomes a screen with an address.
Expo SDK: A numbered set of Expo packages that are tested to work together. The Expo Go app on a phone must support the SDK version your project uses, or the project won't open in it.
EXPO_PUBLIC_: The prefix an environment variable's name needs for Expo to paste its value into your app's code. Anyone can dig those values out of a finished app, so never put secrets there.
extends: A TypeScript keyword for an interface that includes everything from another interface plus more fields, as `NewOrder extends PickupDetails`.

F

Fast Refresh: Shows your saved code changes in the running app within a second or two, without losing your place.
FCM (Firebase Cloud Messaging): Google's service that delivers push notifications to Android phones. Expo's push service talks to it for you, using credentials set up through Firebase.
fetch: The built-in function for making HTTP requests. `res.ok` is false for answers like 404 or 500, so the app checks it and throws an error with a friendly message.
File-based routing: Navigation where every file in `src/app` is a screen with its own address, such as `src/app/cart.tsx` being `/cart`.
FlatList: A list component that stays fast however long the list is, because it draws only the rows near the screen. It takes `data`, `renderItem` and `keyExtractor`.
Flexbox: The layout system for every `View`. Children stack in a column by default; `flexDirection`, `justifyContent`, `alignItems` and `flex: 1` control direction, placement and filling space.

H

headerRight: A screen option that is a function returning what to show on the right of the header, such as Kettle & Crane's Scan link.
Hermes: The JavaScript engine that ships inside the app and runs your components.
HTTP status codes: Numbers a server sends back to say how a request went: 200 OK (it worked), 201 Created (the order was made), 400 Bad Request (a problem with what was sent), 404 Not Found and 500 Server Error (the app treats these as failures via `res.ok`).

I

Image: The core component that shows a picture. Use `require(...)` for a file in your project, or `{ uri: "https://..." }` with a `width` and `height` for a picture from the web.
import type: An import that brings in only a TypeScript type. TypeScript checks it, but it leaves no code in the app.
Info.plist, manifest: The iOS file (Info.plist) and Android file (manifest) that hold an app's permission settings. In Expo you don't edit them; config plugins write them at build time.
Internal distribution: A way of installing a build from a link that EAS gives you, without going through a store.

J

JSON.stringify / JSON.parse: `JSON.stringify` turns an object into text and `JSON.parse` turns the text back into an object. They are used to store the cart in AsyncStorage and to send orders to the server.

K

KeyboardAvoidingView: A component that moves its content up when the on-screen keyboard appears, so the keyboard doesn't cover the fields. On iOS it uses `behavior="padding"`.
keyboardType: `TextInput` props that tune typing: `keyboardType` picks the on-screen keyboard (such as `phone-pad`), and others control capitalizing, autofill, hidden passwords, several lines and the Enter key label.
keyExtractor: A list prop: a function that returns each item's unique key, like the `key` prop used with `map`.
Keystore: Holds the key that signs your Android app, proving updates come from you. EAS can generate and keep it for you.

L

Layout: A `_layout.tsx` file is not a screen: it wraps the routes in its folder and decides how you move between them, for example with a Stack or Tabs.
Link: An Expo Router component that is tappable text going to another route, like an `<a>` tag, e.g. `<Link href="/cart">`.
Linking.openSettings: A React Native function that opens your app's page in the phone's Settings app, used when the user denied a permission and the app can't ask again.
List extra props (separator, empty, header, footer): Props that `FlatList` and `SectionList` accept: `ItemSeparatorComponent` draws something between rows, `ListEmptyComponent` shows when there's nothing to list, and `ListHeaderComponent` and `ListFooterComponent` show above the first row and below the last.
Local notification, push notification: A local notification is scheduled by the app itself on the phone and works in Expo Go. A push notification is sent from a server so it arrives even when the app is closed, and needs a development build.
localhost: The name for "this computer". On a phone it means the phone itself, so the phone must use your computer's Wi-Fi address instead; the Android emulator reaches your computer at `10.0.2.2`.

M

Metro: The bundler inside the development server that packs your files into one bundle for the phone, on port 8081.

N

Native views: The phone's own real buttons, text and scrolling lists, which your React Native components turn into.
New Architecture: React Native's current internal design, which is on by default so there's nothing for you to set up.
Notification channel: An Android group of notifications that the user can turn off one by one. Android needs a channel before it shows the permission question.
npx expo install: A command that installs a package at the version matching your Expo SDK, and adds its config plugin to `app.json` if it has one.
npx expo start: Starts the development server and shows a QR code; keys like `w`, `a`, `i` and `r` open the web, Android and iOS apps or reload. `--tunnel` connects through the internet when your phone can't reach your computer on Wi-Fi.

P

Permission: The user's yes or no to a protected feature such as the camera or notifications. The system, not your app, shows the question.
Platform.OS, Platform.select: `Platform.OS` is `"ios"`, `"android"` or `"web"`; `Platform.select` picks a value for the current platform, used for things like shadows.
POST request: An HTTP request that sends data to a server, like Kettle & Crane's order, with a `method`, a `Content-Type` header and a body. The server answers with a status code.
Pressable: A component that wraps anything you want to tap. `onPress` runs when the tap ends, and `style` can be a function receiving `{ pressed }`.
Provider: The component that gives a context its value; everything inside it can read that value. `CartProvider` wraps the Stack so every screen can use the cart.
Pull to refresh: Dragging a list down to load it again, enabled with the `refreshing` and `onRefresh` props.

Q

QR code (Quick Response code): A square barcode holding text. Kettle & Crane's bags carry a QR code holding their sku, which the scan screen reads to open the product.

R

React Native: React for real iPhone and Android apps: your components turn into native views instead of HTML, with one set of code for both platforms.
ReactNode: React's TypeScript type for "anything you can put between tags", used to type a provider's `children`.
Redbox: The red error screen shown in development with the message and the file and line.
Ref: A box from `useRef` whose `.current` value survives redraws like state, but changing it doesn't redraw the screen. The scan screen uses one to open the product page only once.
Route, route group: A route is a screen with its own address. A route group is a folder in parentheses, like `(tabs)`, that groups files under one layout without adding anything to the address.
router: Expo Router's object for moving from code: `push` opens a screen on top, `back` goes back, and `replace` swaps the current screen so Back doesn't return to it.

S

Safe area: The part of the screen clear of the notch and home bar. `SafeAreaView` adds padding so content stays inside it, and its `edges` prop picks the sides.
ScrollView: A component whose content can scroll. It draws everything inside at once, so it suits short screens but not long lists.
SectionList: A `FlatList` split into groups, each with a header. It takes `sections` (each with a `title` and `data`) and `renderSectionHeader`.
SecureStore: Encrypted storage for small secrets such as sign-in tokens, kept in the iPhone's Keychain or Android's Keystore. It works on phones only.
Simulator, emulator: A pretend phone on your computer: the iOS Simulator (Mac only) and the Android emulator.
SKU (Stock Keeping Unit): A short unique code that identifies a product, such as `ESP-12` for House Espresso. In the Kettle & Crane app it serves as the list key, the route parameter and the text in a product's QR code.
slug: A short ID for your app used by Expo's services, set in `app.json`.
Spread (...): The three dots copy an object's or array's properties into a new one, such as `{ ...line, qty: 2 }` or `...Platform.select(...)`.
Stack, Tabs: A Stack piles screens on top of each other with a back button; Tabs show a bottom tab bar with one tab per screen. `Stack.Screen` and `Tabs.Screen` set options for one route.
StatusBar: A component from expo-status-bar that sets the clock and battery icons at the top of the screen, e.g. `style="dark"` for a light screen.
Style array: A list of styles in one `style` prop, like `[styles.stock, soldOut && styles.soldOut]`. Later styles win and `false` is skipped.
StyleSheet: React Native's way to collect a screen's styles in one checked object instead of CSS files. `StyleSheet.absoluteFill` is a ready-made style that stretches a component over its whole parent.
Switch: The phone's on/off toggle. It works like a checkbox: `value` is a boolean and `onValueChange` receives the new one.

T

Text: The only component that can show text; a bare string inside a `View` is an error. `Text` can nest inside `Text` to style a few words.
TextInput: The component for typing text. It's controlled like an `<input>`, but `onChangeText` gives you the new text itself rather than an event.
try / catch / finally: JavaScript's way to handle failures: code in `try` runs, `catch` runs if it throws (for example to show a friendly message), and `finally` runs either way, such as to turn a loading flag off.
Typed routes: A template feature where TypeScript knows every route in `src/app`, so VS Code underlines an `href` with a typo like `"/crat"`.

U

useLocalSearchParams: An Expo Router hook that gives you the part of the address in square brackets, such as `sku` from `/product/ESP-12`.
useWindowDimensions: A hook giving the current screen `width` and `height` in dp, updating when the phone turns. The related `useColorScheme()` tells you whether the phone is set to light or dark.

V

View: React Native's box component, like a `<div>`, that holds other components and lays them out with flexbox.
Virtualization: Drawing only the list rows on or near the screen and drawing more as you scroll, so long lists stay fast and use little memory.