New project

Package managers

The instructor will be using node@20 and yarn@1.22.22.

All modern package managers are supported: npm, yarn classic, yarn modern, pnpm and bun. Small differences in configuration may exist. Check the documentation for details if using a different package manager than the instructor.

The command to create a new React Native project with Expo is npx create-expo-app.

In your terminal, run:

npx create-expo-app --help

to check what options you can pass in. Two things to note here:

• the --template flag lets us choose a specific template instead of using the default one
• you can run this command with different package managers if you won't want to use npm

In your terminal run (one of) the following:

## if using yarn
yarn create expo-app plantly -t

## if using npm
npm create expo-app -- plantly --template
## or
npx create-expo-app plantly --template

## if using pnpm
pnpm create expo-app plantly -t

## if using bun
bun create expo-app plantly --template

... to create a new project called plantly. When prompted, choose the blank TypeScript template.

Do I have to use TypeScript?

I'd very much recommend it. Most modern software projects use TypeScript and it's become the industry standard for JavaScript projects.

But if you really don't want to, choose the blank JavaScript template instead. I will be using TypeScript throughout the course, but because TypeScript is additive, you can still follow along if you omit any type info:

• instead of ts and tsx, use js in and jsx in file names.
• omit any type declarations in functions
  • before: const myFunc = (value: string): void => {};
  • after const myFunc = value => {};
• omit any type declarations in hooks
  • before: const [value, setValue] = useState<string>();
  • after: const [value, setValue] = useState();

Set up linting (optional)

ESLint and Prettier just make life easier.

In your project's root directory, run:

npx expo lint

Then add prettier the no unused styles eslint plugin

# if using yarn
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-native

# if using other package managers
npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-native

and update your .eslintrc.js as follows:

module.exports = {
  extends: ["expo", "prettier"],
  plugins: ["prettier", "react-native"],
  rules: {
    "prettier/prettier": "error",
    "react-native/no-unused-styles": "error",
  },
};

Finally, a quick lint fix to tidy up the project:

yarn lint --fix

Checkpoint

Android	iOS

Checkpoint

✔️ Initial commit

✔️ Set up eslint and prettier