Learn Android, P5 and Yarn

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

How to add an app icon to your Android app.

For the foreground, you will need an image with a transparent background.

If you wan to create one, you can use [Figma](https://www.figma.com/) which is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc.

[Android Studio](https://developer.android.com/studio) - is the IDE for android development. To open you React Native project in Android studio, launch Android Studio, choose "Open an Existing Android Studio Project" and open the /android directory. 

Add a Custom App Icon to Your React Native Android App with Android Asset Studio

Fast, reliable, and secure dependency management.

yarn

Yarn 2 is workspace aware. When you need to upgrade a package in one workspace, yarn will ask you if you want to resolve the version of the package to a version you use in a different package.

In this lesson, we go over `yarn up -i` to upgrade a package with an old version.

Use yarn up to Update Dependencies In A Yarn Workspace

`yarn dlx` can be used to run packages without installing them. This is useful for packages like `create-react-app` and `gatsby` that scaffold out apps for you, so you don't have to keep updating your global versions.



Use Yarn dlx to Execute Packages without Installing Them

This lesson goes over how to install yarn 2 through npm.

To install yarn 2 globally, we use `npm install -g yarn@berry`. 

To install yarn 2 to a specific project, we use `yarn policies set-version berry`. This creates a `.yarnrc` file and a `.yarn/` directory. `.yarnrc` that sets the path to our yarn instance in the created `.yarn/` directory that holds our new yarn version.

Install Yarn 2

Yarn PnP is a new feature set on **by default** with yarn 2. PnP gets rid of your projects `node_modules` in favor of a `.pnp.js` file.

This `.pnp.js` file maps all of the packages installed in your project to where Yarn has placed them on your disk. This enables faster, more reliable installs because you don't have to write to disk as often.

WTF is Yarn Plug'n'Play (PnP)?

Yarn 2 (Berry) has finally [released a stable version](https://dev.to/arcanis/introducing-yarn-2-4eh1)! 

The yarn team has been working on this release for over 2 years. 

This collection goes over: 

- What yarn pnp is and how it tries to solve the `node_modules` problem
- How to install yarn globally and locally inside of a single project
- How to use `yarn dlx`
- How to use `yarn up` to manage yarn workspace dependencies



Yarn 2 AKA Berry

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The fastest way to create a robust, cross-platform compatible Node.js CLI (optionally typed with TypeScript) is by running `npx oclif single mycli`. Here we explain what this means and how and why to integrate this with Yarn Workspaces for an ideal developer experience.

Create a Single-Command Node.js CLI with Oclif, TypeScript and Yarn Workspaces

There are different steps to build an app for the iOS and Android app stores, so here we’ll look at how to build our completed app for Android.  We’ll look at how to build a release for either ad-hoc installation, or for uploading to the Google Play Store.

Build an Android React Native App for the Google Play Store or for Ad Hoc Distribution

For Android, we can connect a physical device that will be autodetected by `react-native run-android`, just like the emulator.  Make sure to shut down the emulator first however - so that only one adb device is connected at a time.

Run a React Native App on an Android Device

Once navigation is setup, we’ll pass data between screens using params.  

Pass Data Between Screens when Navigating with StackNavigator

React Native uses Flexbox to layout most components, which makes it easy to run your app on devices of many different screen sizes.  We’ll learn the basics of Flexbox in React Native, and how to use it to build a flexible screen layout.  We’ll also look at some differences between flexbox on the web and on mobile.

Layout React Native Components with Flexbox

In this lesson we’ll use `fetch` to get data from an HTTP server, and store it in state in our React Native application. `fetch` works almost identically on the web and React Native - with the possible exception of how it handles cookies.  We’ll also take a look at `axios` - which is an alternative to `fetch`.

Fetch Data from an HTTP Server in a React Native Application using fetch or axios

React Navigation’s StackNavigator has a default header, which you may or may not want for your application.  We’ll look at how to totally disable the header, as well as how to customize the default header on a per-screen basis.

Customize the StackNavigator Header with React Navigation in a React Native App

We’ll use React Navigation to add a modal screen to our app, which will pop up from the bottom, and cover the entire screen. 

Add a Modal Screen that Pops Up from the Bottom with React Navigation

If a Text Input is on the bottom half of the screen, then it will get covered by the on screen keyboard when a user selects that input.  We’ll show two ways to automatically avoid this by using `KeyboardAvoidingView` or `keyboard-aware-scroll-view`

Ensure Text Fields Don't Get Covered by the On Screen Keyboard

Once the user submits the form, we’ll take all the information in the text inputs and the camera image, and upload it to our HTTP server.  While the data is uploading, we’ll show the native spinner, and disable the submit button so the user cannot click submit multiple times.

Show a Spinner while Submitting a Form in React Native with ActivityIndicator

We’ll use `AsyncStorage` to save and load simple text data on the device.  `AsyncStorage` is built into React Native (so it’s easy to get working), but it’s text only, it’s global to your app, and it isn’t built to handle large or complex data.  However - it’s perfect for saving and loading small bits of data like settings and configuration values.

Save and Retrieve Data on the Device in a React Native App with AsyncStorage

We’ll replace the default React Native app splash screen with a custom splash screen image on Android.  We’ll also use the `react-native-splash-screen` module to help with the configuration.

Change the Splash Screen for Android Apps built with React Native

One way to style React Native components is with a `StyleSheet`, which was designed to be similar to css.  We’ll go over the differences between React Native styles and web styles, and we’ll create a new StyleSheet, and use it to change the style of components in our app.

Style Components in a React Native App with StyleSheet

Touchable buttons are all over mobile applications, so we’ll look at how to make a few different styles of buttons in React Native.  Unlike on the web, not every component type accepts an `onPress` prop, so we’ll look at how to wrap other components in a `Touchable` element in order to make a button.

Make a Touchable Button in React Native

We’ll replace the default App Icon on Android with a custom app icon image.  

Change the App Icon for React Native Apps on Android

Creating powerful and context-aware tools for Cursor IDE becomes straightforward when leveraging information directly from your current project. In this lesson, you'll learn how to build a custom MCP (model context protocol) tool that intelligently requests essential details—such as the current project path and conversation summaries—from your Cursor project.

Workflow demonstrated in this lesson:

- Define MCP tool parameters to request specific project details.
- Pass project path and conversation summaries into your MCP tool.
- Automatically write or update files within your current project using these parameters.

Key benefits:

- Automate tasks with precision based on your active project's context.
- Simplify interactions by creating AI-driven CLI commands tailored to your needs.
- Open endless possibilities for integrating external APIs and advanced automation.

Through this practical demonstration, you'll gain a versatile technique for enhancing your development workflow in Cursor IDE.

[https://github.com/johnlindquist/mcp-cursor-tool-starter](https://github.com/johnlindquist/mcp-cursor-tool-starter)

John Lindquist

Build MCP Tools Using Project Context for Custom Cursor IDE Automation

Setting up custom MCP (Machine Command Protocol) servers in Cursor can involve tedious steps, such as configuring node paths or referencing additional commands. This lesson shows how to streamline this process by bundling your MCP server directly into a standalone executable.

Workflow demonstrated in this lesson:

- Use a simple MCP server project starter.
- Run a single bundling command to create an executable.
- Right-click the generated executable, copy its full path, and add that directly to your Cursor settings.

Key benefits:

- Eliminates the need for complex node path configurations.
- Simplifies the setup and integration of custom MCP servers into Cursor.
- Makes the server executable instantly accessible within your Cursor environment.

By following this streamlined approach, you can quickly and easily integrate custom MCP servers into Cursor, making your development workflow cleaner and more efficient.

[https://github.com/johnlindquist/mcp-cursor-tool-starter]()

Easy MCP Server Setup in Cursor IDE with Bundled Executables

TanStack Router is the foundation for TanStack Start, which is gaining significant attention due to its innovative approach to application development.

This course focuses on getting effective TanStack Router, a modern and scalable routing solution for React applications. You will learn how to:
- set up and scaffold new applications,
- use file-based routing
- create nested routes
- manage dynamic route parameters and more.

The course covers advanced features like route loaders, caching strategies, and lifecycle hooks, which are crucial for enhancing application performance and user experience.

By understanding TanStack Router, you can build more efficient, type-safe, and maintainable applications, leveraging its integration with data fetching libraries like TanStack Query.

This knowledge is essential for developers looking to improve their routing skills and stay ahead in the field.

Tomasz Ducin

Up and Running with Tanstack Router and React

Learn TanStack Router for React: set up apps, use file-based routing, manage routes, and boost app performance.


In this lesson, we explore how TanStack Router integrates with the [native browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History) to manage navigation.

As we navigate through different routes, the URL changes are stored in the browser's history, allowing users to use the forward and backward buttons to traverse their navigation history.

This functionality also **enables permalinks**, meaning users can copy and paste URLs to access specific routes directly.

Additionally, we learn how to programmatically interact with the history object to move forward or backward through the navigation stack, enhancing the user experience by providing full control over navigation actions.

This compatibility with the native history API ensures that TanStack Router applications behave similarly to traditional websites, offering a seamless and intuitive user experience.

Browse History in Tanstack Router

Browse history in TanStack React Router using the native history API for seamless navigation

In this lesson, we explore how to hook into TanStack Router's lifecycle hooks to execute custom logic during route changes.

The hooks we'll look into are: `onEnter`, `onStay`, and `onLeave`, which are triggered when entering, staying within, or leaving a route, respectively.

All hooks receive a detailed match parameter, providing information about the route's path, ID, and tons of other details.

This allows for the implementation of features like animations or logging when navigating between routes.

We also learn how to use these hooks to track and manage state changes as users interact with the application, making it easier to implement complex behaviors based on route transitions.

Hook into Route Lifecycle Hooks in Tanstack Router

Hook into TanStack React Router's lifecycle hooks for custom route logic and animations.

In this lesson, we learn how to handle not found errors in TanStack Router by using the `notFoundComponent` at both nested and global levels.

To trigger the display of a `notFoundComponent`, we must throw a specific error using the `notFound` function within a loader or other lifecycle method of a route. This approach allows us to provide custom error messages for specific routes or globally across the application.

We explore how to define a notFoundComponent within a specific route's configuration and how to set a `defaultNotFoundComponent` at the router global level, which applies to all routes unless overridden locally. This flexibility ensures that users receive meaningful feedback when encountering non-existent routes.

Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router

Handle notFound errors in TanStack Router with notFoundComponent at nested or global levels.



In this lesson, we learn how to access dynamic route parameters using the `useParams` hook in TanStack Router.

When used with a specific `Route` object, `useParams` provides type-safe access to route parameters, ensuring that TypeScript knows the exact types of these parameters.

This approach eliminates the possibility of undefined/optional values, making it safer for accessing parameters like `employeeId`.

However, when using `useParams` globally without specifying a route, it requires an options object with `{ strict: false }`, which reduces type safety.

In this case, the hook can access parameters from any route in the application, but it does not guarantee their existence or type. This flexibility allows components to be reused across different routes, but it requires careful handling of potential errors.



Access Dynamic Route Parameters with useParams in Tanstack Router

Access dynamic route parameters with useParams in TanStack React Router for type-safe routing.

In this lesson, we learn how to reorganize file-based routes in TanStack Router to accommodate nested routing structures.

We explore how to create additional nested routes by converting files into directories, allowing for further nesting.

For example, to create a nested route like `/employees/$employeeId/edit`, we can create a **directory** (!) named `$employeeId` and place an `index.tsx` file inside it to define the route component for this nested route.

This approach provides flexibility in organizing files while maintaining the convention that file names and locations align with route paths. We also see how to adapt existing components and loaders to work with these reorganized routes, enabling features like edit forms or delete actions (or whatever) within nested routes.


Reorganize File-Based Routes in Tanstack Router

Reorganize file-based routes in TanStack Router for flexible nested routing.



In this lesson, we learn how to parametrize the loader for a nested route in TanStack Router.

We focus on a nested route like `/employees/$employeeId`, where the `$employeeId` is a **dynamic parameter**.

To fetch data for this route, we use a `loader` function that accesses the `$employeeId` parameter. This is achieved by using the params object available in the `loader` function, which contains the dynamic segments of the URL. We then use this parameter to call a function like `getEmployeeById`, which fetches specific employee details from an API.

We highlights that TanStack Router **automatically infers types** for these parameters, ensuring type safety for nested routes.

Parametrize Route Loader for Nested Route in Tanstack Router

Parametrize nested route loaders in TanStack Router using path parameters

In this lesson, we learn how to create nested routes and outlets in TanStack Router using file-based routing.

We start by creating a new `employees` directory and files to represent nested routes, such as `/employees/$employeeId`. The `$` symbol is used to denote dynamic parameters.

We then use the `<Link>` component from TanStack Router to create links to these nested routes, passing necessary parameters.

To render the nested content, we use the `<Outlet>` component (nested), which automatically renders child routes. This approach allows us to dynamically display stuff under a nested route.

All the time, the TanStack Router generator automatically updates the route tree based on file changes - our routing configuration remains consistent 🔥



Create Nested Route and Nested Outlets in Tanstack Router

Create nested routes and outlets in TanStack Router using file-based routing

Search

Search Results