Creating a Typescript, Tailwind and Expo Go App in 2 minutes

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.

1. First run this command

npx create-expo-app myApp \
&& rm -rf myApp/.git \
&& mv myApp/* . && mv myApp/.* . \
&& rm -rf myApp \
&& npx expo install react-dom react-native-web @expo/webpack-config \
&& rm package-lock.json \
&& yarn add nativewind  \
&& yarn add --dev tailwindcss \
&& 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 \
&& sleep 1 \
&& mv App.js App.tsx \
&& echo '/// <reference types="nativewind/types" />' > my-app.d.ts

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
5. Adds TypeScript
6. Sets up Tailwind and TypyeScript so you're ready to go!

2. Now edit the tailwind.config.js file to add the following:

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Now edit babel.config.js and add plugins: ["nativewind/babel"]

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
  };
};

4. Edit the App.tsx file to look like this:

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!
        </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;

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