Installing and Initializing Projects

1. Installing Expo CLI

The Expo Command Line Interface (CLI) is the primary tool for creating, building, and managing Expo projects.

expo --version

2. Creating New Project

expo init MyApp

3. Choosing Project Template

When initializing a new Expo project, you can choose from several project templates to suit your development needs.

expo init --template tabs MyTabsApp

4. Installing Dependencies

Expo projects use npm or yarn to manage dependencies. You can install packages using the Expo CLI or directly with your package manager.

expo install react-native-vector-icons

npm install react-native-vector-icons

5. Understanding Project Structure

// app/App.tsx
import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, Expo!</Text>
    </View>
  );
}

6. Initializing Git Repository

# Initialize a new Git repository
git init

# Add all files to staging
git add .

# Commit the initial state
git commit -m "Initial commit"

7. Setting Up TypeScript

Expo supports TypeScript out of the box. You can either create a new project with TypeScript or add it to an existing JavaScript project.

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["es2020", "dom"],
    "types": ["node"]
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

8. Configuring Metro Bundler

const config = {
  resolver: {
    assetExts: ['png', 'jpg', 'webp'],
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'mjs']
  },
  server: {
    port: 8082
  }
};

module.exports = config;

9. Installing Expo Go App

The Expo Go app is required to run Expo projects on physical devices. It allows you to preview your app, scan QR codes, and interact with your project in real-time.

10. Understanding Managed vs Bare Workflow

11. Using Expo Snacks

Expo Snack is a web-based development environment that allows you to write, run, and share Expo projects directly in the browser. It's a great way to prototype ideas or experiment with new features without setting up a local development environment.

// Import necessary modules
import React from 'react';
import { View, Text } from 'react-native';

// Create a basic component
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello from Expo Snack!</Text>
    </View>
  );
}

12. Upgrading Expo SDK Version

Upgrading the Expo SDK version involves updating your project's dependencies and making necessary code adjustments to align with the new SDK features and breaking changes.