How to build a React Native app with Expo and TypeScript (the easy way)

Ingredients

• Device to test your app:
  A web app can be tested directly on your computer. Mobile app testing options include:

  • Using the Expo Go mobile application on your phone
  • Using an Android device simulator from Android Studio
  • Using an iOS device simulator from Xcode if you have macOS

• Node.js:
  At the time of writing, the LTS version is v22.12.0. To install a specific version of Node.js, go to Node.js website

• Code editor: I will use VS Code.

• Your computer with a terminal window open (or you can use the one built into VS Code).

This setup is inspired by the official Expo documentation.

Procedure

To initialize a new Expo app, you can use create-expo-app. Run the following in your terminal:

npx create-expo-app@3.3.0 AnimationApp

👉 This command uses npx to run version 3.3.0 of the create-expo-app package, creating a new Expo project named AnimationApp.

cd AnimationApp

👉 This moves your terminal into the newly created AnimationApp project directory so you can work inside it.

npx expo start

👉 This starts the Expo development server, launching a local environment where you can run and preview your app on the web or a simulator.

To see the web version go to http://localhost:8081. If you have a running mobile simulator npx will automatically detect it. If you are using the Expo Go app, make sure your phone and computer are connected to the same Wi-Fi router before scanning the code with your phone.

Now let's explore the app and modify it a little bit.

You will see that the project has the following structure.

As the first change, you will edit the background color and the title:

• Go to /app/(tabs)/index.tsx

• Change the headerBackgroundColor in the ParallaxScrollView component.

• To change the title of the page, locate the ThemedText component and replace the “Welcome” string with something you would like to see instead.

export default function HomeScreen() {
  return (
    <ParallaxScrollView
      // changed light color from #A1CEDC to #E7C2FB and dark color from #1D3D47 to #31014B
      headerBackgroundColor={{ light: "##E7C2FB", dark: "#31014B" }}  
      headerImage={
        <Image
          source={require("@/assets/images/partial-react-logo.png")}
          style={styles.reactLogo}
        />
      }
    >
      <ThemedView style={styles.titleContainer}>
      {/* changed title */}
        <ThemedText type="title">Welcome to my first application!</ThemedText>  
        <HelloWave />
      </ThemedView>
      ...
  )}

Save the file and check the changes in your simulator or web browser. You should see the new title and background color.

And that’s it! 🎉

📚 References & further reading

This guide is based on the official Expo Documentation