React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Learn React-native

Use Expo Orbit to install past builds from EAS as well as from your local machine.

You can also use Orbit to easily view and launch all your connected simulators, emulators and physical devices.

🔗 [Expo Orbit](https://docs.expo.dev/build/orbit/)

Use Expo Orbit to Install Past Builds

Reconfigure your eas.json and app.json so you can install the development, preview and production builds all on the same device.

An app on your phone is uniquely identified by the bundle identifier on iOS and the package on Android, so to make the builds unique we have to make these IDs different based on the build profile.

📖 [Docs](https://docs.expo.dev/build-reference/variants/)

Install Multiple Variants of Your iOS and Android Apps on the Same Device

Set up credentials to upload your Android build to Google Play automatically.

For automatic uploads, you'll need to set up all the app metadata on your Google Play account, including setting up app assets. You'll also need to configure and set up a Google Service Account.

📝 [Create a Google Service Account](https://github.com/expo/fyi/blob/main/creating-google-service-account.md) 
📝 [Store Assets](https://docs.expo.dev/guides/store-assets/)
📝 [EAS Submit Docs](https://docs.expo.dev/submit/introduction/)

Upload an Android App to the Google Play Store Automatically using Expo Publish

Set the build number to increment automatically and learn when to increment version numbers.

While you’re developing your app, when you submit an app with a specific version + version code to the App or Play Store, you cannot submit another app with the same values.

The best practice is to set the build number to increment automatically.

The version number can be incremented manually after each store release.

📖 [Docs](https://docs.expo.dev/build-reference/app-versions/)

Increment Version and Build Numbers for iOS and Android apps using EAS

Create the app on the Google Play Store, create the first production build on EAS, upload it to Google Play, and publish it to an internal testing group.

For sharing apps via Google Play, you will need a paid Google Play developer account. It is preferable to have an organisation account if you're looking to monetise your app (you'll need to verify your organisation before you can create apps). But if you you are building apps as an individual developer, you can use the individual developer account. 

When creating an individual developer account, you have some additional restrictions:
1. You must submit proof of ID and home address to create the account
2. If you want to monetise your apps, your home address will be shown on the Google Play developer page
3. You will need 20 testers to test your app for 14 days before you can apply for production access

🎮 [Google Play Console](https://play.google.com/console)

🔗  [Register for a Google Play Developer account](https://support.google.com/googleplay/android-developer/answer/6112435)

🔗 [Required information to create a Play Console developer account](https://support.google.com/googleplay/android-developer/answer/13628312?hl=en-GB)

🔗 [QR Code Generator](https://www.qr-code-generator.com/)


Create an Android Release Build with EAS and Upload to Google Play Store

Create an Internal Distribution (Preview) build for sharing your app in internally in production mode.

This can be used to share your build with your team or testers without submitting it to Google Play.

📝 [Docs](https://docs.expo.dev/build/internal-distribution/)

Create an Internal Distribution Build for Android with EAS

Create a Development Build that runs on Android Emulator or Device.

This build can be used for local development on Android. You can use the same apk (the build artifact) on both an Emulator (that you can install via Android Studio) or on a real android device.

🔗 [Expo Website](https://expo.dev/)

📝 [Docs](https://docs.expo.dev/build/introduction/)

🔗 [Android Studio](https://developer.android.com/studio)

Create a Development Build for Android with EAS

Submit your Production Build to the Apple App Store and install it via TestFlight.

When submitting a build to Apple with EAS Submit (or otherwise), it will first get added to TestFlight which is essentially a pre-prod environment for Apple. This will allow you to install and share the actual production build to testers before releasing it to users.

App names on the Apple App Store must be globally unique. So if you've chosen a name for your app that is already taken - like Plants - you will have to choose a different name for the App Store Listing page. Note that this is only the case for the app name on the App Store listing page, and you can still use your preferred name elsewhere.

**TestFlight Internal Testing** - as soon as you upload your build to App Store Connect and it finished processing, it is available for internal testing. You can add users to the internal testing group by email, and the users must be registered on your Apple Developer account.

**TestFlight External Testing** - this is a separate testing group that allows you to share the build with anyone either by sending them an email invite or using an invite URL. Before you can share the build, you must first submit a build for external testing and wait for it to be approved by Apple, which usually takes a couple of hours.

**Release** - in order for the build to actually show up on the Apple App Store, you will need to create a Release on App Store connect and submit it for review. This review usually takes about a day.

🔗 [TestFlight](https://developer.apple.com/testflight/)

📝 [EAS Submit Docs](https://docs.expo.dev/submit/introduction/)

📝 [App Store Assets Docs](https://docs.expo.dev/guides/store-assets/)

Submit an iOS App to the Apple App Store and TestFlight using EAS

Create an iOS Release build for distribution.

This build gets submitted to the Apple and can only be installed via TestFlight or the App Store.

Create an iOS Release Build for the Apple App Store with EAS

Create an Internal Distribution (Preview) build for sharing your app in internally in production mode.

This is the only way to share your iPhone app without submitting it to TestFlight and is often used for QA testing or internal demos.

📝 [Docs](https://docs.expo.dev/build/internal-distribution/)

Create an Internal Distribution Build for iPhone with EAS

Create a build to run on your physical iPhone device that can also be used for local development.

📝 [Enabling Developer Mode](https://docs.expo.dev/guides/ios-developer-mode/)

📖 Further reading: [Push Notifications Docs](https://docs.expo.dev/push-notifications/overview/)

Create a Development Build for iPhone With EAS

Set up a Distribution certificate and an Ad Hoc provisioning profile for iOS internal distribution builds.

Here we learn how to sign Apple app builds to make them installable on Apple devices.

In order to install your own app on any Apple device, you need an Apple Developer account and a subscription to the Apple Developer Program.

🔗 [Apple Developer Program](https://developer.apple.com/programs/)

⚙️ [Code Signing Illustration](https://www.linkedin.com/posts/kadi-kraman_an-illustration-of-what-code-signing-with-activity-7132420058076581888-s6TM)

Use the EAS CLI to Configure App Store Credentials for Internal Distribution Builds

Create an iOS build for developing locally on a Simulator.

This is the only native iOS build you can do on EAS without having an Apple Developer account and being enrolled in the Apple Developer Program.

It can be used for local development on an iOS simulator, so you can only do this on a Mac, because you must be able to install Xcode to get access to the iOS simulators.

⚙️ [Xcode](https://apps.apple.com/us/app/xcode/id497799835)

🔗 [Expo Website](https://expo.dev/)

📝 [Docs](https://docs.expo.dev/build/introduction/)

Create a Development Build for iOS Simulator with EAS

Set up an existing Expo Go project to use Development Builds.

Expo Go is a Sandbox Environment designed for learning prototyping and getting started with mobile development quickly. The major limitation of Expo Go is that you are completely unable to add or edit any native code in your app. This might be a trivial limitation at the start of your project when you're prototyping and experimenting, but most production quality apps will eventually need to have more control over their native app bundles.

This is where development builds come in. A development build is basically your own customised version of Expo Go: you build the native side of your app yourself and get to have all the control over what libraries and configurations are included.

Thanks to CNG (with prebuild) the native projects are generated automatically based off of your app config and package.json.

📝 [Expo Go](https://docs.expo.dev/get-started/expo-go/)

📝 [Development Builds](https://docs.expo.dev/develop/development-builds/introduction/)

📝 [Continuous Native Generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/)

Set Up Your Expo Go Project to Use Development Builds

Create a new React Native project using the Expo CLI.

You can use any of the supported package managers: **npm**, **yarn**, **pnpm** or **bun**. In the video (and throughout the course) we use **yarn**.

You can also choose a template to use for your project. In this video we choose the blank TypeScript template, but you can choose a different template if you prefer.

📝 [Docs](https://docs.expo.dev/get-started/installation/)

Create a React Native App With Expo CLI

Expo Application Services ([EAS](https://expo.dev/eas)) is a cloud build service used to build and publish React Native apps.

This course will show you how to create the common types of builds for iOS and Android on EAS. We'll cover Development builds for local development, Preview builds for internal testing, and Production builds for release.

Additionally, you'll learn about:
- app versioning
- automatic store uploads
- setting up store listing pages
- installing multiple app variants on the same device
- installing past builds with [Expo Orbit](https://docs.expo.dev/build/orbit/)

## iOS

An overview of build signing, and why an Apple Developer account needed in order to install builds on a real device.

How to create:
- an iOS simulator build
- a build to use on your device for local development
- a build to share with your team without uploading it to App Store Connect
- a release build to use on the App Store

You will also learn how to upload your build to App Store Connect, share it on TestFlight and create a Release.

## Android

How to create:
- a build to use for development on an emulator or a device
- a build to share with your team without uploading it to Google Play
- a release build to use ob Google Play

We'll cover what is needed to create a new Google Play account, and the current restrictions for individual accounts.

You will also learn how to set up auto-submit on Google Play.

Build and Deploy React Native Apps with Expo EAS

Start with a plain React Native app initialised using the React Native TypeScript template.

We will install and configure urql, use urql's useQuery hook to fetch all stories from the locally running graphQL API, and render them in a FlatList.

**Resources:**
- React Native TypeScript template: https://reactnative.dev/docs/typescript
- urql docs: https://formidable.com/open-source/urql/docs/

**Android:**
- run the app with `yarn android`
- use `http://10.0.2.2:3000/graphql` instead of `http://localhost:3000/graphql` for the API endpoint

**Checkpoint:**
- [Initial commit (create from template)](https://github.com/kadikraman/news-flash/commit/a04dccad8fa090b07fdf8a94f904ba7551448ead)
- [Add initial project (remove template UI code)](https://github.com/kadikraman/news-flash/commit/08a6d0f078b36f9e35a28f6a71175b8c2dd260ad) <-- video starts from here
- [Add urql and useQuery](https://github.com/kadikraman/news-flash/commit/66d6fcfb5b797da98456d4ff6e433ab6990207de)

Add urql to a React Native Project and Fetch Data With the useQuery Hook

Install React Navigation v6 and use the Bottom Tabs navigator to add two tabs to the app: the Home tab and the Bookmarks tab.

To do this, we'll wrap our app in a `NavigationContainer` component and set up the two tabs in that tab navigator. In the process, we'll convert our `Stories` component to be the `Home` page of our app.

**Resources:**
- React Navigation: https://reactnavigation.org/
- Bottom Tabs Navigator: https://reactnavigation.org/docs/bottom-tab-navigator/

**Expo:**
- If installing on an Expo managed project, install the dependencies with `expo install react-native-screens react-native-safe-area-context` - [read more](https://reactnavigation.org/docs/getting-started#installing-dependencies-into-an-expo-managed-project)

** Android:**
- If using plain React Native without Expo need to add some native code before rebuilding the app as described [here](https://reactnavigation.org/docs/getting-started#installing-dependencies-into-a-bare-react-native-project)
- Then rebuild the app with `yarn android`

**Checkpoint:** [Add a bottom tabs navigator](https://github.com/kadikraman/news-flash/commit/443cc44108a0bd9f6a00952191a2d9bdd892b6ea)

Add Bottom Tabs to a React Native App with React Navigation v6

We'll use the Stack Navigator from React Navigation v6 to display a modal for the story details page.

Then add TypeScript types for the navigation state to ensure correct typing.

**Resources:**
- React Navigation: https://reactnavigation.org/
- Stack Navigator: https://reactnavigation.org/docs/stack-navigator/

**Checkpoint:** [Add a story details modal](https://github.com/kadikraman/news-flash/commit/2eecf76fcb536cf6affe597e87c3b05d1ffe2bf2)

Add a Modal with Typed Navigation to a React Native App with React Navigation v6

We will update the TypeScript types to support passing variables between screens. Pass the story ID and title to the modal screen. Display the story title on the modal title. Use the ID from the screen params to fetch the full story details in the story details modal.

**Resources:**
- urql `useQuery` hook: https://formidable.com/open-source/urql/docs/api/urql/#usequery

**Checkpoint:** [Fetch story details](https://github.com/kadikraman/news-flash/commit/caabca1bf9e7e6e33276e636f9cdd5bd63fc583c)

Add GraphQL Query Args with urql's useQuery Hook

We'll refactor the Story out to a separate component, create a fragment for the story fields and reuse the fragment in the bookmarks query.

We'll see how using Fragments makes it easy to query for data throughout our application.


Fragments: https://graphql.org/learn/queries/#fragments

Use GraphQL Fragments to Query Same Fields on Multiple Queries in React Native

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

React Native

Search Results