Building a React Native Application with TypeScript: A Complete Guide

In today’s digital era, mobile applications have become essential for businesses and individuals. React Native stands as a popular choice for building cross-platform mobile apps due to its efficiency and reusability of code across iOS and Android. Adding TypeScript into the mix brings type safety, improved developer experience, and enhanced code maintainability. In this guide, we’ll walk through how to build a React Native app with TypeScript and demonstrate how to connect it to APIs.

Why Use React Native with TypeScript?

React Native and TypeScript are a powerful combination. Here are some reasons why developers prefer them together:

• Type Safety: TypeScript ensures that variables and functions are used correctly by adding static types, reducing the chances of runtime errors.
• Better Tooling: IDEs like VSCode provide features like autocompletion and real-time error checking, making development faster and smoother.
• Scalability: TypeScript makes refactoring code easier, making the app more scalable over time as you add more features.
• Cross-Platform: React Native allows you to write one codebase for iOS and Android, significantly reducing development time.

Prerequisites

Before starting, you should have the following tools and knowledge:

• Node.js and npm (or yarn/pnpm) installed
• React Native CLI or Expo CLI (for quicker setup)
• Basic knowledge of TypeScript and React Native

Step 1: Setting Up a React Native Project with TypeScript

You can start a new React Native project with TypeScript in two ways:

1. Using React Native CLI

For more flexibility, the React Native CLI is recommended.

npx react-native init MyApp --template react-native-template-typescript

This will create a new React Native project using TypeScript.

2. Using Expo

If you prefer a simpler setup, Expo is a great choice.

npx create-expo-app MyApp -t expo-template-blank-typescript

With Expo, you get access to an environment that handles many complexities like app signing, push notifications, and image optimization out of the box.

Step 2: Configuring TypeScript

Both Expo and React Native CLI automatically configure TypeScript, so you'll already have a tsconfig.json file in your project root. If not, create one with this basic configuration:

{
  "compilerOptions": {
    "target": "esnext",
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Project Structure

Here's a common folder structure for React Native projects using TypeScript:

MyApp/
├── src/
│   ├── components/
│   ├── screens/
│   ├── services/
│   └── types/
├── App.tsx
├── tsconfig.json
├── package.json
└── node_modules/

• components/: Reusable UI components.
• screens/: Screens or views of your app.
• services/: API logic and data fetching.
• types/: Type definitions.

Step 3: Creating Components and Screens

Creating a Simple Component

In src/components/HelloWorld.tsx, let's create a basic TypeScript component.

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

interface Props {
  name: string;
}

const HelloWorld: React.FC<Props> = ({ name }) => {
  return (
    <View style={styles.container}>
      <Text>Hello, {name}!</Text>
    </View>
  );
};

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

export default HelloWorld;

Here, we define a functional component HelloWorld using TypeScript. The Props interface specifies that the component expects a name prop of type string.

Using the Component in a Screen

In src/screens/HomeScreen.tsx, you can use the HelloWorld component:

import React from 'react';
import { SafeAreaView } from 'react-native';
import HelloWorld from '../components/HelloWorld';

const HomeScreen: React.FC = () => {
  return (
    <SafeAreaView>
      <HelloWorld name="React Native" />
    </SafeAreaView>
  );
};

export default HomeScreen;

Step 4: Connecting to APIs

One of the core features of any modern app is integrating with external APIs to fetch data. In React Native, you can use fetch or any third-party libraries like Axios to handle API requests.

Using fetch for API Calls

Here’s a simple example to fetch data from a public API using the built-in fetch method.

import React, { useEffect, useState } from 'react';
import { Text, View, ActivityIndicator } from 'react-native';

const ApiExample: React.FC = () => {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View>
      <Text>{data.title}</Text>
      <Text>{data.body}</Text>
    </View>
  );
};

export default ApiExample;

Using Axios for API Calls

You can also use Axios, a popular HTTP client, to simplify API requests.

1. First, install Axios:

npm install axios

2. Create a service file to handle API requests.

// src/services/api.ts
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

export const getPost = (id: number) => {
  return api.get(`/posts/${id}`);
};

3. Now, consume this service in a component:

import React, { useEffect, useState } from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
import { getPost } from '../services/api';

const ApiExample: React.FC = () => {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    getPost(1)
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View>
      <Text>{data.title}</Text>
      <Text>{data.body}</Text>
    </View>
  );
};

export default ApiExample;

Step 5: State Management (Optional)

As your app grows, managing state becomes crucial. While React’s built-in useState and useReducer hooks work well for smaller apps, larger applications might require state management libraries like:

• Redux Toolkit: A predictable state container.
• React Context: Suitable for smaller apps where you need to pass data between many components.

Here’s a simple example using React Context for global state management.

import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext(null);

export const AppProvider: React.FC = ({ children }) => {
  const [state, setState] = useState('Hello, Context!');

  return (
    <AppContext.Provider value={{ state, setState }}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

Now, wrap your main component with AppProvider, and use the useAppContext hook to access global state.

Conclusion

Building a React Native application with TypeScript not only improves your app’s robustness but also enhances the overall development experience. In this guide, we covered setting up a React Native app with TypeScript, building components, connecting to APIs, and briefly touched on state management. As your project grows, consider adding testing frameworks like Jest and using React Navigation for handling app routes.

By integrating API calls using Axios or the native fetch method, you can create dynamic, data-driven applications efficiently.