### 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 (