Ignite Cookbook

https://ignitecookbook.com/docs/
Admin
Ignite Cookbook is a collection of recipes and patterns for building React Native applications using...
Tokens:80,432
Snippets:403
Trust Score:6.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start the application

Source: https://ignitecookbook.com/docs/recipes/SwitchBetweenExpoGoCNG

Starts the application and provides commands to launch it on iOS or Android simulators/devices via Expo Go. Requires yarn to be installed.

```bash
yarn start

tap i or a in terminal to launch iOS or Android respectively in Expo Go.
```

--------------------------------

### Install Maestro

Source: https://ignitecookbook.com/docs/recipes/MaestroSetup

Installs Maestro, a tool for end-to-end testing, using a curl command. It also includes the installation of Facebook's IDB Companion tool via Homebrew.

```bash
curl -Ls "https://get.maestro.mobile.dev" | bash
```

```bash
brew tap facebook/fb
brew install idb-companion
```

--------------------------------

### Setting up Yarn Monorepo with Ignite

Source: https://ignitecookbook.com/docs/tags/yarn

This guide explains how to establish a Yarn monorepo project utilizing the Ignite framework. It covers the initial setup and integration of shared utilities within the monorepo structure.

```Bash
yarn create ignite-app --template monorepo
cd ./your-monorepo-name
yarn install
```

--------------------------------

### Install Dependencies and Setup Apollo Client for Ignite

Source: https://ignitecookbook.com/docs/recipes/ApolloClientCache

Installs necessary Apollo Client packages and sets up the Apollo Client instance in an Ignite project. This involves creating a client with an in-memory cache and a GraphQL endpoint.

```bash
npx ignite-cli@latest new ignite-apollo-cmds --yes  
cd ignite-apollo-cmds  
npx expo install @apollo/client graphql  
mkdir app/stores/apollo  
touch app/stores/apollo/index.tsx  
```

--------------------------------

### Example EAS Build Configuration (eas.json)

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Provides an example structure for 'eas.json', defining build profiles for development, preview, and production.

```json
{
  "cli": {
    "version": ">= 0.60.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "developmentClient": true,
      "ios": {
        "simulator": true
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

```

--------------------------------

### Install EAS CLI

Source: https://ignitecookbook.com/docs/recipes/EASUpdate

Installs the EAS CLI globally, a prerequisite for using EAS Update and other EAS services. Ensure Node.js and npm are installed.

```bash
npm install -g eas-cli  
```

--------------------------------

### Install Supabase SDK

Source: https://ignitecookbook.com/docs/recipes/LocalFirstDataWithPowerSync

Installs the Supabase JavaScript SDK using the Expo package manager.

```bash
npx expo install @supabase/supabase-js  

```

--------------------------------

### Fastlane Setup in Fastfile

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

This snippet shows how to integrate CircleCI setup commands before all Fastlane tasks and defines a 'beta' lane for building and deploying iOS apps to TestFlight. It includes incrementing the build number, using match for code signing, building the app, uploading to TestFlight, and committing the version bump.

```ruby
before_all do
  setup_circle_ci
end

lane :beta do
  increment_build_number(xcodeproj: "./#{XCODE_PROJECT}")
  match(type: "appstore")
  build_ios_app(
    scheme: PROJECT,
    workspace: "./YourProject.xcworkspace",
    xcargs: "-UseNewBuildSystem=NO -allowProvisioningUpdates",
    export_method: "app-store"
  )
  # Ship it!
  upload_to_testflight(
    skip_waiting_for_build_processing: true
  )
  commit_version_bump(
    xcodeproj: "./#{XCODE_PROJECT}",
    ignore: /tvOS/,
    force: true,
    message: "[skip ci] Version bump"
  )
end
```

--------------------------------

### Install Ignite CLI and Create Project

Source: https://ignitecookbook.com/docs/recipes/ReactNativeVisionCamera

This snippet shows the commands to install the latest Ignite CLI and create a new React Native project with specific configurations. It's the initial step for setting up the development environment.

```bash
npx ignite-cli@latest new PizzaApp --remove-demo --workflow=cng --yes
cd PizzaApp
```

--------------------------------

### Install Project Dependencies

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Navigates to the project root directory and runs 'yarn install' to install all project dependencies. This command ensures that all necessary packages for the React Native application are downloaded and set up.

```bash
cd ..
yarn install
```

--------------------------------

### Install PowerSync SDK and Dependencies

Source: https://ignitecookbook.com/docs/recipes/LocalFirstDataWithPowerSync

Installs the PowerSync SDK and its primary dependency, react-native-quick-sqlite, using the Expo package manager.

```bash
npx expo install \ 
  @powersync/react-native \ 
  @journeyapps/react-native-quick-sqlite   

```

--------------------------------

### Install Expo Updates and Configure EAS

Source: https://ignitecookbook.com/docs/recipes/EASUpdate

Installs the expo-updates package and configures the project for EAS. This sets up the necessary files like app.json and eas.json.

```bash
npx expo install expo-updates  
eas build:configure  
```

--------------------------------

### Install Dependencies (Yarn)

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Installs all project dependencies using Yarn, ensuring all necessary packages are available.

```shell
yarn
```

--------------------------------

### Fetch and Install CocoaPods

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

Fetches CocoaPods specifications from S3 and then installs the project's CocoaPods dependencies within the 'ios' directory. This is essential for iOS projects that use CocoaPods for dependency management.

```yaml
- run:
    name: Fetch CocoaPods Specs
    command: |
      curl https://cocoapods-specs.circleci.com/fetch-cocoapods-repo-from-s3.sh | bash -s cf
- run:
    working_directory: ios
    name: Install CocoaPods
    command: pod install --verbose
```

--------------------------------

### Restore and Install Ruby Gems

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

Restores previously installed Ruby gems from a cache using a key based on the Gemfile.lock checksum and architecture. It then executes 'bundle install' within the 'ios' directory to install the necessary gems.

```yaml
- restore_cache:
    name: Restore gems
    key: bundle-v1-{{ checksum "ios/Gemfile.lock" }}-{{ arch }}
- run:
    name: Bundle Install
    command: bundle install
    working_directory: ios
```

--------------------------------

### Update Start Script for Dev Client

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Modifies the 'start' script in 'package.json' to use the '--dev-client' flag for launching the development client.

```diff
--start": "expo start"
++"start": "expo start --dev-client"

```

--------------------------------

### Restore and Install Node.js Dependencies

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

Restores Node.js modules from a cache based on the package.json checksum and then installs dependencies using Yarn. It includes a fallback to the latest cache if an exact match isn't found.

```yaml
- restore_cache:
    name: Restore node modules
    keys:
      - v1-dependencies-mac-{{ checksum "package.json" }}
      # fallback to using the latest cache if no exact match is found
      - v1-dependencies-mac-
- run:
    name: Install dependencies
    command: NOYARNPOSTINSTALL=1 yarn install
```

--------------------------------

### Install iOS Dependencies

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Installs necessary dependencies for building iOS applications, including CocoaPods and Fastlane.

```bash
brew install cocoapods fastlane  

```

--------------------------------

### package.json Script for CI Setup

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

This JSON snippet demonstrates how to add a 'ci:setup' script to the 'package.json' file. This script is intended to prepare the project for building in a CI environment, such as creating a '.env' file with environment variables. It's noted that 'react-native-dotenv' requires a '.env' file to be present.

```json
{
  "scripts": {
    "ci:setup": "touch .env && echo \"ENV_VAR=\"$ENV_VAR\" >> .env"
  }
}
```

--------------------------------

### CircleCI YAML Configuration for Ignite Project

Source: https://ignitecookbook.com/docs/recipes/SampleYAMLCircleCI

This is a comprehensive CircleCI configuration file written in YAML. It defines build jobs for setup, tests, and publishing, utilizing Docker containers with Node.js. It manages dependencies with caching and executes project-specific commands like 'yarn install', 'yarn ci:test', and 'yarn ci:publish'. It also configures workflow orchestration and branch filtering for deployment to the 'master' branch.

```YAML
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#

defaults: &defaults
  docker:
    # Choose the version of Node you want here
    - image: circleci/node:10.11
  working_directory: ~/repo

version: 2
jobs:
  setup:
    <<: *defaults
    steps:
      - checkout
      - restore_cache:
          name: Restore node modules
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-
      - run:
          name: Install dependencies
          command: |
            yarn install
      - save_cache:
          name: Save node modules
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

  tests:
    <<: *defaults
    steps:
      - checkout
      - restore_cache:
          name: Restore node modules
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-
      - run:
          name: Install React Native CLI and Ignite CLI
          command: |
            sudo npm i -g ignite-cli react-native-cli
      - run:
          name: Run tests
          command: yarn ci:test # this command will be added to/found in your package.json scripts

  publish:
    <<: *defaults
    steps:
      - checkout
      - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
      - restore_cache:
          name: Restore node modules
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-
      # Run semantic-release after all the above is set.
      - run:
          name: Publish to NPM
          command: yarn ci:publish # this will be added to your package.json scripts

workflows:
  version: 2
  test_and_release:
    jobs:
      - setup
      - tests:
          requires:
            - setup
      - publish:
          requires:
            - tests
          filters:
            branches:
              only: master

```

--------------------------------

### CircleCI config.yml for Continuous Integration

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

This configuration file sets up CircleCI jobs for installing Node.js dependencies and running tests in a React Native project. It utilizes Docker for environment consistency and caching for faster builds. Ensure 'yarn install' and 'yarn ci:test' commands are available in your project.

```yaml
defaults:
  docker:
    # Choose the version of Node you want here
    - image: circleci/node:10.11
  working_directory: ~/repo

version: 2
jobs:
  setup:
    <<: *defaults
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-node-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-node-  
      - run:
          name: Install dependencies
          command: yarn install
      - save_cache:
          name: Save node modules
          paths:
            - node_modules
          key: v1-dependencies-node-{{ checksum "package.json" }}

  tests:
    <<: *defaults
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-node-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-node-  
      - run:
          name: Run tests
          command: yarn ci:test # this command will be added to/found in your package.json scripts

workflows:
  version: 2
  test_and_release:
    jobs:
      - setup
      - tests:
          requires:
            - setup

```

--------------------------------

### Install EAS CLI Globally

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Installs the EAS CLI tool globally, which is required for interacting with EAS Build services.

```bash
npm install -g eas-cli  

```

--------------------------------

### Execute Project Setup Script

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

Runs a custom setup script defined as 'ci:setup' within the project. This script likely handles environment-specific configurations or pre-build tasks.

```yaml
- run:
    name: Misc setup
    command: yarn ci:setup
```

--------------------------------

### Install Supabase and MMKV Dependencies

Source: https://ignitecookbook.com/docs/recipes/Authentication

Installs the necessary packages for Supabase integration and local key-value storage using react-native-mmkv. These are fundamental for authentication and session management.

```bash
bunx expo install @supabase/supabase-js react-native-mmkv
```

--------------------------------

### Install AsyncStorage for Supabase Session

Source: https://ignitecookbook.com/docs/recipes/LocalFirstDataWithPowerSync

Installs the AsyncStorage module, which is required by the Supabase SDK for persisting user sessions.

```bash
npx expo install @react-native-async-storage/async-storage  

```

--------------------------------

### Install redux-persist

Source: https://ignitecookbook.com/docs/recipes/Redux

Install the redux-persist package using Yarn to enable state persistence for your Redux store. This is the initial step in setting up persistence.

```bash
yarn add redux-persist
```

--------------------------------

### Install babel-plugin-root-import

Source: https://ignitecookbook.com/docs/recipes/TypeScriptBaseURL

Installs the babel-plugin-root-import package as a development dependency, which is used to enable root path imports.

```bash
yarn add -D babel-plugin-root-import
```

--------------------------------

### Install Dependencies for Encrypted Storage

Source: https://ignitecookbook.com/docs/recipes/Authentication

Installs necessary Expo libraries for secure storage and cryptography, which are required for encrypting session data.

```bash
bunx expo install expo-secure-store expo-crypto
```

--------------------------------

### CircleCI Workflow Configuration

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

Defines the CircleCI workflow named 'test_and_release'. It specifies a sequence of jobs ('setup', 'tests', 'deploy_ios') and their dependencies, including a filter for deploying only from the 'master' branch.

```yaml
workflows:
  version: 2
  test_and_release:
    jobs:
      - setup
      - tests:
          requires:
            - setup
      - deploy_ios:
          filters:
            branches:
              only: master
```

--------------------------------

### Install react-native-vision-camera with Expo

Source: https://ignitecookbook.com/docs/recipes/ReactNativeVisionCamera

Installs the `react-native-vision-camera` library using Expo's package management. This command ensures the library is compatible with an Expo-managed workflow.

```bash
npx expo install react-native-vision-camera
```

--------------------------------

### Install ESLint and TypeScript Dependencies

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Installs ESLint, TypeScript parser and plugins, and other recommended packages for React and React Native development as development dependencies using Yarn.

```bash
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-native eslint-plugin-reactotron eslint-config-standard eslint-config-prettier --dev
```

--------------------------------

### Start the Expo application

Source: https://ignitecookbook.com/docs/recipes/TypeScriptBaseURL

Starts the Expo development server. If module resolution errors occur, a '--clear' flag can be used to clear the bundler cache.

```bash
yarn expo:start
```

```bash
yarn expo:start --clear
```

--------------------------------

### Install Redux Toolkit and React Redux dependencies

Source: https://ignitecookbook.com/docs/recipes/Redux

Installs the necessary libraries for Redux state management in a React Native application. `redux-toolkit` provides a streamlined way to write Redux code, and `react-redux` offers bindings for React components.

```bash
yarn add @reduxjs/toolkit  
yarn add react-redux  

```

--------------------------------

### Update package.json Scripts for Expo

Source: https://ignitecookbook.com/docs/archive/PristineExpoProject

Modifies the `scripts` section of `package.json` to align with Expo commands. This includes setting the main entry point to Expo's `AppEntry.js` and defining scripts for starting the Expo application on different platforms (`start`, `android`, `ios`, `web`).

```json
{
  "name": "ignite-eas",
  "version": "0.0.1",
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "compile": "tsc --noEmit -p . --pretty",
    "format": "prettier --write \"app/**/*.{js,jsx,json,md,ts,tsx}\"",
    "lint": "eslint App.js app test --fix --ext .js,.ts,.tsx && npm run format",
    "patch": "patch-package",
    "test": "jest",
    "test:watch": "jest --watch",
    "adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
    "postinstall": "node ./bin/postInstall",
    "clean": "npx react-native-clean-project",
    "clean-all": "npx react-native clean-project-auto",
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }
  // ... more config ...
}
```

--------------------------------

### Install styled-components with Yarn, npm, or pnpm

Source: https://ignitecookbook.com/docs/recipes/Theming-StyledComponents

Commands to add the styled-components library to your project using different package managers.

```shell
yarn add styled-components
```

```shell
npm install styled-components
```

```shell
pnpm install styled-components
```

--------------------------------

### Install UI components package dependencies

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Installs core dependencies like React, React Native, and TypeScript as peer dependencies, and development dependencies for type definitions.

```shell
yarn add react react-native typescript --peer
yarn add @types/react @types/react-native --dev
```

--------------------------------

### Initialize Ignite Project

Source: https://ignitecookbook.com/docs/archive/PristineExpoProject

Creates a new React Native project using the Ignite CLI with the `--yes` flag for default configurations. It then navigates into the newly created project directory. This is the first step in setting up your project.

```bash
npx ignite-cli new PizzaApp --yes
cd PizzaApp
```

--------------------------------

### Swap Storage Packages

Source: https://ignitecookbook.com/docs/recipes/SwitchBetweenExpoGoCNG

Commands to remove the 'react-native-mmkv' package and install '@react-native-async-storage/async-storage', often performed when moving from Expo CNG to Expo Go.

```bash
yarn remove react-native-mmkv
```

```bash
npx expo install @react-native-async-storage/async-storage
```

--------------------------------

### Initialize Yarn monorepo and create package.json

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Initializes a new directory for the monorepo, navigates into it, and creates a new package.json file with default settings using Yarn.

```bash
mkdir monorepo-example
cd monorepo-example
yarn init -y

```

--------------------------------

### Save Node.js Modules Cache

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

Saves the installed Node.js modules to a cache using a key derived from the package.json checksum. This speeds up subsequent builds by avoiding redundant installations.

```yaml
- save_cache:
    name: Save node modules
    paths:
      - node_modules
    key: v1-dependencies-mac-{{ checksum "package.json" }}
```

--------------------------------

### Create and Navigate to Ignite Project

Source: https://ignitecookbook.com/docs/recipes/UniversalE2ETesting

Commands to create a new Ignite project named 'PizzaApp' and navigate into its directory. Assumes npx is available.

```bash
npx ignite-cli@latest new PizzaApp
cd PizzaApp

```

--------------------------------

### Run EAS Build (Preview Profile)

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Initiates an EAS build using the 'preview' profile on EAS build servers.

```bash
eas build --profile preview  

```

--------------------------------

### Save Ruby Gems Cache

Source: https://ignitecookbook.com/docs/recipes/CircleCIRNSetup

Saves the installed Ruby gems to a cache. The cache key is generated using the Gemfile.lock checksum and system architecture, enabling faster dependency installation in future builds.

```yaml
- save_cache:
    key: bundle-v1-{{ checksum "ios/Gemfile.lock" }}-{{ arch }}
    paths:
      - vendor/bundle
```

--------------------------------

### Run EAS Build Locally (Preview Profile)

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Initiates an EAS build using the 'preview' profile locally on your machine.

```bash
eas build --profile preview --local  

```

--------------------------------

### Theme Switching Button

Source: https://ignitecookbook.com/docs/recipes/Theming-Unistyles

Provides an example of a button that allows users to switch between 'light' and 'dark' themes. It uses `useAppTheme` to get and set the current theme.

```typescript
const { setThemeContextOverride, themeContext } = useAppTheme();

return (
  <Button
    onPress={() => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
    }}
    text={`Switch Theme: ${themeContext}`}
  />
);
```

--------------------------------

### EAS Build Configuration (eas.json)

Source: https://ignitecookbook.com/docs/recipes/EASUpdate

Defines build profiles for EAS. This example shows configurations for 'development', 'preview' (using APK for Android), and 'production'.

```json
{
  "cli": {
    "version": ">= 3.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "channel": "preview",
      "android": { "buildType": "apk" },
      "ios": { "simulator": false }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

```

--------------------------------

### Run Maestro Test

Source: https://ignitecookbook.com/docs/recipes/MaestroSetup

Executes a Maestro test flow by navigating to the `.maestro` directory and running the `maestro test` command with the specified YAML file.

```bash
cd .maestro
maestro test Login.yaml
```

--------------------------------

### Modify Header Text in Login Screen

Source: https://ignitecookbook.com/docs/recipes/EASUpdate

Example of modifying the header text in the LoginScreen.tsx file for an OTA update. This change is made in the React Native component.

```tsx
<Text testID="login-heading" tx="loginScreen.signIn" preset="heading" style={$signIn} />  
<Text testID="login-heading" text="Welcome! Please sign in" preset="heading" style={$signIn} />  
```

--------------------------------

### Switch application theme dynamically

Source: https://ignitecookbook.com/docs/recipes/Theming-StyledComponents

An example of how to implement a theme-switching functionality using a button. It demonstrates using the `useAppTheme` hook to get the current theme context and toggle between 'light' and 'dark' themes, with a visual animation for the transition.

```typescriptreact
const { setThemeContextOverride, themeContext } = useAppTheme();

return (
  <Button
    onPress={() => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
    }}
    text={`Switch Theme: ${themeContext}`}
  />
);

```

--------------------------------

### Yarn Audit: Check for Security Vulnerabilities

Source: https://ignitecookbook.com/docs/recipes/UpdatingDependencies

Audits installed project packages for known security vulnerabilities. Run this command from your project's root directory to get a list of identified issues.

```bash
yarn audit
```

--------------------------------

### Create New Ignite App with Prebuild Workflow

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Initializes a new Ignite application with the 'prebuild' workflow, preparing it for native code integration.

```bash
npx ignite-cli@latest new PizzaApp --workflow=prebuild --yes  

```

--------------------------------

### Run New Project on iOS Simulator

Source: https://ignitecookbook.com/docs/recipes/Authentication

This command navigates into the newly created 'AuthRecipe' project directory and then executes the command to run the application on an iOS simulator using bun.

```bash
cd AuthRecipe  
bun run ios  

```

--------------------------------

### Create ESLint Config Package and Initialize

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Commands to create a new directory for the ESLint configuration package and initialize it with a package.json file using Yarn.

```bash
mkdir packages/eslint-config
cd packages/eslint-config
```

```bash
yarn init -y
```

--------------------------------

### Ignite CLI: Create New Project with CNG Workflow

Source: https://ignitecookbook.com/docs/recipes/Authentication

This command initializes a new Ignite CLI project named 'AuthRecipe'. It specifies the 'cng' (Continuous Native Generation) workflow, removes demo features, initializes a git repository, installs dependencies using bun, and sets bun as the packager.

```bash
bunx ignite-cli@latest new AuthRecipe --workflow=cng --remove-demo --git --install-deps --packager=bun  

```

--------------------------------

### Create monorepo directory structure

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Creates the 'apps' and 'packages' directories within the monorepo, which will be used to house the applications and shared utility packages respectively.

```bash
mkdir apps packages

```

--------------------------------

### Create New Ignite App

Source: https://ignitecookbook.com/docs/recipes/Zustand

This command initializes a new Ignite project named 'ZustandApp'. The '--yes' flag accepts all default prompts, creating a project with the specified configuration.

```bash
npx ignite-cli new ZustandApp --yes  

```

--------------------------------

### Create a new Ignite project

Source: https://ignitecookbook.com/docs/recipes/Redux

Initializes a new Ignite CLI project with options to skip the demo and accept defaults. This command sets up the basic project structure for migration.

```bash
npx ignite-cli new ReduxApp --yes --removeDemo  

```

--------------------------------

### Initialize EAS Project

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Initializes a new EAS project, linking it to your Expo account and setting up project configurations. This may prompt for account selection and project creation.

```bash
eas init  

```

--------------------------------

### Add react-native-unistyles with npm

Source: https://ignitecookbook.com/docs/recipes/Theming-Unistyles

Installs the react-native-unistyles package using npm. This command is an alternative to using Yarn for package installation.

```bash
npm install react-native-unistyles
```

--------------------------------

### Prebuild and Run Android App

Source: https://ignitecookbook.com/docs/recipes/ReactNativeVisionCamera

Commands to prebuild the Expo project for native code execution and then start the Android application. Prebuilding is necessary for native dependencies like VisionCamera to work correctly.

```bash
npx expo prebuild
yarn android
```

--------------------------------

### Install dotenv and babel-plugin-inline-dotenv

Source: https://ignitecookbook.com/docs/recipes/EnvironmentVariables

Installs the necessary packages for managing environment variables using dotenv and babel-plugin-inline-dotenv. This is a development dependency.

```bash
yarn add -D dotenv babel-plugin-inline-dotenv
```

--------------------------------

### Run Login Flow and Favorite Podcast in Maestro

Source: https://ignitecookbook.com/docs/recipes/MaestroSetup

This Maestro flow executes a login sequence, navigates to a podcast list, favorites a specific podcast, and then filters the list to show only favorites. It utilizes environment variables for dynamic content.

```yaml
appId: com.maestroapp
env:
  TITLE: "RNR 257 - META RESPONDS! How can we improve React Native, part 2"
  FAVORITES_TEXT: "Switch on to only show favorites"

---
- runFlow: Login.yaml
- tapOn: "Podcast, tab, 3 of 4"
- assertVisible: "React Native Radio episodes"
- tapOn:
    text: ${FAVORITES_TEXT}
- assertVisible: "This looks a bit empty"
- tapOn:
    text: ${FAVORITES_TEXT}
- scrollUntilVisible:
    element:
      text: ${TITLE}
    direction: DOWN
    timeout: 50000
    speed: 40
    visibilityPercentage: 100
- longPressOn: ${TITLE}
- scrollUntilVisible:
    element:
      text: ${FAVORITES_TEXT}
    direction: UP
    timeout: 50000
    speed: 40
    visibilityPercentage: 100
- tapOn:
    text: ${FAVORITES_TEXT}
- assertVisible: ${TITLE}
```

--------------------------------

### Navigate to Project Root (Shell)

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Navigates the command line interface to the root directory of the project.

```shell
cd ../..
```

--------------------------------

### Maestro Basic Login Flow

Source: https://ignitecookbook.com/docs/recipes/MaestroSetup

Defines a basic Maestro test flow in YAML to launch an app, perform a login sequence by tapping specific text elements, and assert the visibility of subsequent screen texts.

```yaml
#flow: Login
#intent:
# Open up our app and use the default credentials to login
# and navigate to the demo screen

appId: com.maestroapp # the app id of the app we want to test
# You can find the appId of an Ignite app in the `app.json` file
# as the "package" under the "android" section and "bundleIdentifier" under the "ios" section
---
- clearState # clears the state of our app (navigation and authentication)
- launchApp # launches the app
- assertVisible: "Sign In"
- tapOn:
    text: "Tap to sign in!"
- assertVisible: "Your app, almost ready for launch!"
- tapOn:
    text: "Let's go!"
- assertVisible: "Components to jump start your project!"
```

--------------------------------

### Install react-native-bottom-sheet

Source: https://ignitecookbook.com/docs/recipes/SelectFieldWithBottomSheet

Installs the core `react-native-bottom-sheet` library using Yarn. This is the primary dependency for creating the select field's options panel.

```bash
yarn add @gorhom/bottom-sheet@^4
```

--------------------------------

### Navigate to packages directory

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Navigates the command line to the 'packages' directory within the project structure.

```shell
cd ../../packages
```

--------------------------------

### Install react-native-gesture-handler and react-native-reanimated

Source: https://ignitecookbook.com/docs/recipes/SelectFieldWithBottomSheet

Installs essential dependencies for animations and gesture handling required by `react-native-bottom-sheet`. These are typically included in newer Ignite boilerplate versions.

```bash
yarn add react-native-reanimated react-native-gesture-handler
```

```bash
expo install react-native-reanimated react-native-gesture-handler
```

--------------------------------

### Create and navigate to UI components package directory

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Creates a new directory named 'ui-components' for the shared UI package and then changes the current directory into it.

```shell
mkdir ui-components
cd ui-components
```

--------------------------------

### Add Expo Dev Client

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Adds the 'expo-dev-client' package to the project, enabling custom development builds.

```bash
yarn add expo-dev-client  

```

--------------------------------

### Install Expo Vector Icons Dependency

Source: https://ignitecookbook.com/docs/communityRecipes/CustomVectorIcons

Installs the necessary `@expo/vector-icons` package for handling vector icons in a React Native project.

```bash
npx expo install @expo/vector-icons
```

--------------------------------

### Generate Sign In Screen with Ignite CLI

Source: https://ignitecookbook.com/docs/recipes/Authentication

This command uses the Ignite CLI to generate a new screen component named 'SignIn'. The `bunx` command ensures the latest version of ignite-cli is used, automatically installing it if needed.

```bash
bunx ignite-cli@latest generate screen SignIn
```

--------------------------------

### Initialize package.json with Yarn

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Initializes a new Node.js package with a default 'package.json' file using Yarn.

```shell
yarn init -y
```

--------------------------------

### Install Prettier Import Order Plugin

Source: https://ignitecookbook.com/docs/recipes/EnforcingImportOrder

Installs the @serverless-guru/prettier-plugin-import-order plugin as a development dependency. This plugin is essential for enforcing custom import ordering rules.

```bash
yarn add --dev @serverless-guru/prettier-plugin-import-order
```

--------------------------------

### Install Expo Router Dependencies

Source: https://ignitecookbook.com/docs/recipes/ExpoRouter

Installs the necessary expo-router and expo-constants packages for Expo Router integration. These are essential for enabling file-based routing in your React Native application.

```bash
npx expo install expo-router expo-constants
```

--------------------------------

### Run EAS Build Locally with Custom Artifact Directory

Source: https://ignitecookbook.com/docs/recipes/PrepForEASBuild

Initiates a local EAS build and specifies a custom directory to save the build artifacts (APK or TAR.GZ).

```bash
EAS_LOCAL_BUILD_ARTIFACTS_DIR=build eas build --profile preview --local  

```

--------------------------------

### Install Ignite CLI Globally

Source: https://ignitecookbook.com/docs/recipes/SettingUpYarnMonorepo

Installs the latest version of the Ignite CLI globally using npx. This command is prerequisite for generating new React Native projects with Ignite.

```bash
npx ignite-cli@latest
```
Tokens:
Raw