React Native with Typescript - The Practical Guide (2022)

Install node.js and vscode, set up the terminal, and initialize a blank expo react native project with typescript to begin development.

Launch and test your React Native app across web, iOS simulator, and Android Studio emulators by running npm start, viewing on localhost:19006, and selecting device presets like iPhone X.

Explore how JavaScript messages pass through a breach layer to the native domain in React Native, and learn about tsx and TypeScript files, TypeScript configuration, and npm install for setup.

Create and wire two screens, the home screen and planner screen, in a React Native app using TSX, wrapping content in view components and styling via a stylesheet.

Set up a native stack navigator in a React Native with TypeScript app to connect home and planner screens, and navigate by pushing and popping within a navigation container.

Learn to navigate between screens in a React Native app with TypeScript by pushing and popping screens on the navigation stack, passing navigation props, and using a planner screen flow.

Master the difference between push and navigate in react native with typescript, learning how stack navigation pushes screens or pops to the home screen without re-rendering.

Explore how native stack header props in React Native with TypeScript reveal navigation methods like navigate, push, and pop, and how to type navigation with NativeStackHeaderProps.

Master building a bottom tab navigator in React Native with TypeScript, configuring a navigation container and stack navigator to move between the home screen and additional screens.

Explore how stack and bottom tab navigators in React Native handle navigate and push, and examine mounting and unmounting of home, plan, and test screens.

Configure headers and navigation options in react navigation for stack and tab screens, hiding headers, customizing header text, and handling mounting and blur behavior on home, stock, and plan screens.

Add icons to the home, planner, and planet screens by configuring the bottom tab bar using expo vector icons or font awesome, with dynamic size and color via navigation options.

Import a data.json into the react native with typescript app and render workouts on the home screen, including each workout’s sequence and timer details.

Display structured data on the home screen with the flat list component in React Native, using data arrays, keyExtractor, renderItem, and workout properties such as name, duration, and difficulty.

Define precise TypeScript types for a workout data model, including an interface for workout, difficulty type aliases, and sequence items, replacing any usage with specific types.

Export a dedicated workout item component in React Native with TypeScript and render its name and difficulty from a workout item prop on the home screen.

Create a dedicated workout item component in a React Native project, wiring duration and difficulty data, and implement a focused style sheet for container, name, duration, and difficulty.

Set the workout item background to a light color and add a header bar for new workouts; use flex styling to fill the screen height.

Define and use a useCachedResources hook to load fonts and data asynchronously before app startup, updating a loading state with useEffect to flip to true after resources finish loading.

Learn to load custom fonts in a React Native with Typescript project by downloading Montserrat from Google Fonts, placing it in assets/fonts, and using loadAsync with try-catch.

Load and display the monserrat font in a React Native with TypeScript app, compare monserrat bold with the system font, and handle font loading with loadAsync to render once loaded.

Create a Montserrat text component as a wrapper for React Native text, providing a Montserrat font family and rendering children for workouts.

Explore building a Montserrat text wrapper in React Native with TypeScript, defining a typed children prop, and passing text props and styles to customize font family and size.

Learn to transform workout durations from seconds to minutes in a React Native with TypeScript app by building a seconds-to-minutes utility and integrating it into the workout item duration display.

Convert seconds to a readable minutes and seconds format in a React Native with Typescript course, using division by 60, modulo 60, and template strings.

Create a display for minutes and seconds by composing minute text, second text, and a connector, then join them into a final string that correctly handles zero values.

Learn how to make workout items pressable in a React Native with Typescript app, handling onPress to navigate to a detail page and pass item data through renderItem.

Implement a workout detail screen in a React Native with TypeScript project and wire navigation from the home screen using the Press Abela wrapper, updating the navigation index accordingly.

Learn to customize the workout detail screen in a React Native navigation stack by hiding the header or giving it an empty title, and renaming it to a custom label.

Explore typing navigation parameters in React Native with TypeScript, defining a detail screen's params, overriding native stack props, and extracting reusable prop types for clean navigation.

Implement async storage in a React Native app by building a storage module to store and retrieve JSON data with keys like workouts, including error handling and initial data loading.

Learn how to manage persistent data in a React Native app with TypeScript by implementing contains key, get data, and safe storage to prevent crashes and overwriting existing workouts.

Refactor workout storage in a React Native project by using a contents key to guard data and conditionally store workouts.

Learn to manage data in a React Native app by implementing a generic async storage with get and remove item, then apply it to clear workouts data.

Learn how to fetch workouts from storage using React Native with TypeScript, initialize the home screen with useEffect and useState, and render the data in a flat list.

Create a use workouts hook to manage home screen workout state, fetch data with use effect, and expose get workouts for display in a flat list.

Discover how to use the useIsFocused hook with useEffect to fetch fresh data when returning to a screen, and prevent unnecessary requests on navigation.

Retrieve a single workout from storage by slug on the details screen, using a filter function to locate the matching workout and return its data.

Implement useWorkoutBySlug to fetch a single workout by slug, store it in state, and guard against undefined with a safe operator. Integrate with the details screen.

Guard against undefined data in a React Native with TypeScript app by using a safe operator and optional chaining to conditionally render content when workout data is unavailable.

navigate the workout details screen by tapping an underlined pressable text to open a modal that displays the workout sequence, including push-ups, breaks, and stretches.

Refactor into a reusable pressable text component in React Native with Typescript, pass text as a prop, delegate on-press events, and integrate with the workout details screen.

Explore how to implement a React Native modal, importing the modal component, controlling visibility with the visible prop, and toggling transparency and animation type to display content as an overlay.

Control modal visibility in a React Native with TypeScript app using useState, passing visibility and a setter to the modal, with options for fade or slide animations.

Improve the stylings of the modal by wrapping content, centering the view with a flex layout, and using justify content and align items to support open and close interactions.

Learn to extract a reusable modal component in React Native with TypeScript, manage its visibility via shared state, and integrate it into the details screen.

Create a more reusable model by introducing an activator prop that can pass a component to open the model, allowing per-model customization of text and behavior.

Learn to implement a reusable activator in React Native with TypeScript, typing the activator prop, and pass a handleOpen function with a default opener for models.

Explore how a model component renders a detail screen and uses a functional activator to receive and pass props, including handleOpen, through on-press events.

Pass props to modals using opening and closing elements and an activator, creating a reusable modal. Render different content with children and custom props in each modal.

Display the workout sequence in a modal by mapping the workout.sequence into items with name and formatted duration, ensuring each item has a unique key prop.

Implement sequence improvements in React Native with TypeScript by adding down arrows between items, wrapping content in a view, and hiding the last arrow based on index, using Font Awesome.

Extend the workout item component in React Native with TypeScript to accept optional children and a style prop, enabling margins and future play icon and timer.