step by step create a react‐native typescript project with expo - arnabutilities/rbac-frontend GitHub Wiki

Creating a React Native project using TypeScript with Expo involves several steps. Below is a step-by-step guide to get you started.

Ensure you have Node.js installed on your machine, which includes npm (Node Package Manager). You can download it from Node.js official website.

Expo CLI is a command-line tool to build and manage your React Native projects. Install it globally using npm or yarn.

npm install -g expo-cli

or

yarn global add expo-cli

Use the Expo CLI to create a new project. Add the --template flag to specify the TypeScript template.

expo init my-react-native-ts-app --template expo-template-blank-typescript

Navigate into your project directory:

cd my-react-native-ts-app

Start the Expo development server to ensure everything is set up correctly.

expo start

Open the project in your code editor (e.g., Visual Studio Code).

You should see a tsconfig.json file in your project root. This file configures TypeScript for your project. You should also see files with .tsx extensions, indicating they are TypeScript files.

Your App.tsx file should look something like this:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Ensure that you have the necessary type definitions for React Native and other dependencies.

npm install @types/react @types/react-native

You can now run the project on an emulator or a physical device. Use the Expo app on your device to scan the QR code displayed in the terminal or use an emulator for iOS or Android.

expo start

If you need additional libraries, you can install them using npm or yarn. For example, to add React Navigation:

npm install @react-navigation/native
npm install @react-navigation/stack
expo install react-native-screens react-native-safe-area-context

Then, configure it in your project. For example:

// App.tsx
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet, Text, View } from 'react-native';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Continue developing your app by adding new components, screens, and functionality. Use TypeScript to enforce type checking and improve code quality.

By following these steps, you should have a fully functioning React Native project set up with TypeScript using Expo. This setup will allow you to leverage the powerful features of TypeScript while enjoying the streamlined development experience provided by Expo.