Languages

How to Run React Native Apps with Typescript

React Native runs on JavaScript by default. However, it is possible to set up a React Native app to run entirely on TypeScript.  This tutorial will introduce the reader to running React Native apps with TypeScript. We will discuss the advantages of running React Native apps with TypeScript, as well as how to set it up.

In the end, we will create a simple blog application that uses TypeScript.

Prerequisites
Initializing your first React Native project with TypeScript
Setting up a TypeScript blog app using React Native
Creating application components
Adding posts
Fetching posts
Fetching a single post
Conclusion
Further reading

Prerequisites

To follow along with this tutorial, you'll need the following:

Some knowledge of TypeScript, React.js, and React Native
Expo Go and Node.js installed.

Initializing your first React Native project with TypeScript

To get the project running, use the Expo CLI, a command-line tool that supports a variety of use-cases.

The first step is to download and install Expo CLI. Go ahead and run the following command:

npm install --global expo-cli

The --global flag installs Expo globally so that any project across your operating system can access it.

You can check if Expo CLI was successfully installed by running the below command in your terminal:

expo whoami

If Expo CLI was correctly installed, the installed version will be logged on to your terminal.

To create our React Native project using TypeScript, navigate to the directory where you want your project to live and run the following command:

expo init -t expo-template-blank-typescript react-native-blog-app

Our application will be bootstrapped with a blank TypeScript application template. You can now navigate to the project folder, as shown below:

cd react-native-blog-app

Let's install the following packages to improve the navigation between different React Native screens:

npm install @react-navigation/native @react-navigation/native-stack

Install the peer dependencies of the above packages using Expo:

expo install react-native-screens react-native-safe-area-context

Then run your project by using the commands below:

npm run android # for android
npm run ios # for ios

Scan the QR code logged on your terminal using the Expo Go application on your device. The application will automatically load.

default-landing-screen

Setting up a TypeScript blog app using React Native

Now that a basic TypeScript React Native app is set, let's extend this and create a handly application.

In this guide, we will create a blog app using TypeScript and React Native.

Creating application components

Create a directory inside the project folder and name it components. Inside the components directory, create two files:

Posts.tsx: For rendering multiple posts.
Post.tsx: For rendering a single post.

Add the following code to your Posts.tsx:

import {Text,View} from "react-native";

export default function Posts(){
    return(
        <View>
            <Text>Posts content will be here</Text>
        </View>
    )
}

Add the following code to your Post.tsx:

import {Text,View} from "react-native";

export default function Post(){
    return(
        <View>
            <Text>Post content will be here</Text>
        </View>
    )
}

In your App.tsx, import the navigation packages as follows:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Next, import the two screens:

import Posts from './components/Posts';
import Post from './components/Post';

Create the stack navigator:

const Stack = createNativeStackNavigator();

We need to return a view containing the screens to be displayed:

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Posts" component={Posts} options={{
                    title: 'Posts',
                }} />
                <Stack.Screen name="Post" component={Post} options={{
                    title: 'Post',
                }} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

The screens are inside the NavigationContainer and the Stack.Navigator. When we navigate from one screen to the other, the app will use the name of that particular screen.

Your application should now change the text displayed since the app is calling the Posts component.

skeleton-posts-screen

Adding posts

This article will use static posts stored in the application. Create a lib directory inside the project folder. Inside lib, create a posts.ts file to host the posts. Edit posts.ts as follows:

export default [
    {
        id: 1,
        title: 'Dummy title for the first post.',
        excerpt: "Dummy excerpt for the first post.",
        content: "Dummy content here for the first post."
    },
    {
        id: 2,
        title: 'Dummy title for the second post.',
        excerpt: 'Dummy excerpt for second post.',
        content: 'Dummy content here for the second post.'
    },
    {
        id: 3,
        title: 'Dummy title for the third post',
        excerpt: 'Dummy excerpt for third post.',
        content: 'Dummy content here for the third post.'
    },
    {
        id: 4,
        title: 'Dummy title for the fourth post',
        excerpt: 'Dummy excerpt for the fourth post',
        content: 'Dummy content here for the fourth post.'
    },
    {
        id: 5,
        title: 'Dummy title for the fifth post',
        excerpt: 'Dummy excerpt for the fifth post',
        content: 'Dummy content here for the fifth post.'
    }
]

In this case, we're exporting a list of posts. Each post contains the following data:

id: A unique integer value.
title: The post's title.
excerpt: Small description of the title.
content: Dummy article content.

Fetching posts

To fetch posts, navigate to your components/Posts.tsx file. First;

Import StyleSheet and the dummy posts:

import {StyleSheet,Button} from 'react-native';
import {NavigationProp} from '@react-navigation/native';
import posts from '../lib/posts';

Then define a post's structure:

interface Post {
    id: number;
    title: string;
    excerpt: string;
    content: string;
}

Define the structure of the props:

interface Props{
    navigation:NavigationProp<any>;
}

Map the posts to the view:

const Posts:React.FC<Props> = ({navigation}) => {
    return(
        <View>
            {
                posts.map((post:Post)=>{
                    return (
                        <View key={post.id} style={styles.postCard}> 
                            <Text style={styles.postTitle}>{post.title}</Text>
                            <Text style={styles.postExcerpt}>{post.excerpt}</Text>
                            <Button title="Read more" onPress={()=>navigation.navigate('Post',{post:item})} />
                        </View>
                    )
            })}
        </View>
    )
}

export default Posts;

Each post has title, excerpt, and a read more button handled by its onPress listener. Append the CSS styles as follows:

const styles = StyleSheet.create({
    postCard:{
        width:'100%',
        padding:10,
    },
    postTitle:{
        fontSize:18,
        fontWeight:'bold',
    },
    postExcerpt:{
        fontSize:15,
        color:'#666',
    }
});

In App.tsx, edit the styles and remove the center alignment:

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

Your posts should now be shown on your screen:

posts-screen

Fetching a single post

To fetch a single post, navigate to the components/Post.tsx file and import navigation and view utilities:

import {Text,View} from "react-native";
import {NativeStackScreenProps} from '@react-navigation/native-stack';

Implement the Interface for a PostItem:

interface PostItem {
    id:number;
    title:string;
    excerpt:string;
    content:string;
}

Define the type of post:

type Post =  {
    PostDetails:PostItem
}

Define the route prop structure:

type Props  ={
    route: NativeStackScreenProps<Post,'PostDetails'>
}

Obtain the post item from the route and display it on the view:

const Post: React.FC<Props> = ({ route }) => {
    const post: PostItem = route.params.post;
    return (
        <View>
            <Text>{post.title}</Text>
            <Text>{post.excerpt}</Text>
            <Text>{post.content}</Text>
        </View>
    )
}
export default Post;

When you click on a post, you will be redirected to a specific page showing the post's content:

post-screen-example