Creating a Typescript, Tailwind and Expo Go App in 2 minutes (Updated for 2024)

Updated for 2024

You can find the old version of this blog article here Creating a Typescript, Tailwind and Expo Go App in 2 minutes (2022 version) - this new version does everything included in the old version in a single command line to get your Expo Go Tailwind app running in no time at all.

Expo Go - A Quicker Setup

Using Expo for building apps is a better experience (in my opinion) than using a bare bones React Native setup. I find the Expo Go App great for getting your self up and running quickly and being able to see something on a device quickly is just awesome. The purpose of this page is to try and get it up and running even quicker.

Simply Run this command in a VS Code Workspace

APP_NAME="my-awesome-app"
mkdir $APP_NAME \
&& cd $APP_NAME \
&& npx create-expo-app . --template blank \
&& rm -rf .git \
&& sed -i '' "s/\"name\": \"myapp\"/\"name\": \"$APP_NAME\"/" app.json \
&& sed -i '' "s/\"name\": \"myapp\"/\"name\": \"$APP_NAME\"/" package.json \
&& npx expo install react-dom react-native-web @expo/metro-runtime \
&& rm package-lock.json \
&& yarn add nativewind \
&& yarn add -D tailwindcss@3.3.2 \
&& yarn add typescript @types/react @types/react-native \
&& yarn add @react-navigation/native @react-navigation/native-stack \
&& yarn add react-native-screens react-native-safe-area-context \
&& echo '{\n\t"extends": "expo/tsconfig.base",\n\t"compilerOptions": {}\n}' > tsconfig.json \
&& npx tailwindcss init \
&& sed -i '' "s/content: \[\],/content: \[\".\/App.{js,jsx,ts,tsx}\", \".\/src\/**\/*.{js,jsx,ts,tsx}\"\],/" tailwind.config.js \
&& sed -i '' "/presets: \['babel-preset-expo'\],/a\\
plugins: \[\"nativewind\/babel\"\]," babel.config.js \
&& sleep 1 \
&& mv App.js App.tsx \
&& echo '/// <reference types="nativewind/types" />' > my-app.d.ts \
&& code . --add \
&& cat > App.tsx <<EOL
import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StatusBar } from 'expo-status-bar';

function HomeScreen() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <View className="bg-cyan-100 py-2 px-7 rounded-lg border border-cyan-300">
        <Text className="text-cyan-700 text-lg">
            I am a Tailwind Expo Go app! $APP_NAME
        </Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;
EOL

# Start expo after the file is written
npx expo start

This does the following:

1. Creates an Expo app
2. Moves it back into the root or the project
3. Installs additional dependencies
4. Adds NativeWind and Tailwind (uses version 3.2.2)
5. Adds TypeScript
6. Sets up Tailwind and TypeScript so you're ready to go!
7. Changes the App.js to App.tsx (If you're not using TypeScript then you can remove this line, but you really should be!)
8. Adds a reference to the NativeWind types in a new file called my-app.d.ts
9. Opens the project in VS Code - the --add flag means if you're using the command in an existing workspace it will add the new project to the workspace
10. Adds a new App.tsx file with a simple HomeScreen component that uses Tailwind classes, and prints back the App name
11. Starts the Expo Go app

...there you go a good blank starting template for your next Expo Go app. Enjoy