Getting Started with React Native and Expo

React Native uses React’s component model and hooks to build mobile interfaces. Its primitives differ from the web: View and Text replace elements such as div and span. Expo provides tools for creating a project, running it on a device, and accessing native features.

What You Need Before You Start

• A Node.js LTS version supported by your Expo SDK
• A code editor, such as VS Code with the Expo Tools extension
• A smartphone — iOS or Android — with the Expo Go app installed from your app store

You do not need Xcode or Android Studio to get started. Expo Go handles the development client on your device while you iterate.

Creating Your First React Native Project with Expo

Use the project-local Expo CLI through npx expo. The older example below includes a global expo-cli install; skip that first line. It selects the blank TypeScript template, which is the basis for the App.tsx examples in this article. See Expo’s current setup instructions for a new project.

npm install -g expo-cli
npx create-expo-app MyFirstApp --template blank-typescript
cd MyFirstApp
npx expo start

After running npx expo start, a QR code appears in your terminal. Scan it with the Camera app on iOS or the Expo Go app on Android. Your app will open on your device and live-reload every time you save a file.

Understanding the Project Structure

The blank TypeScript template used here has this structure:

• app.json — your app's configuration: name, bundle identifier, icon, splash screen, permissions
• App.tsx — the root component that renders first
• assets/ — images, fonts, and other static files
• node_modules/ — dependencies

As this blank-template app grows, add directories for screens, components, hooks, and utilities. Router-based projects have their own route-directory conventions.

Writing Your First Screen

Open App.tsx. The default file renders a simple view with text. Here is a slightly more structured version to understand the core primitives:

import { StyleSheet, Text, View, TouchableOpacity, Alert } from 'react-native';
 
export default function App() {
  const handlePress = () => {
    Alert.alert('Hello', 'You tapped the button.');
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>My First App</Text>
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Tap me</Text>
      </TouchableOpacity>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  heading: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#000',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontWeight: '500',
  },
});

Notice StyleSheet.create instead of CSS. React Native uses a subset of CSS properties in a JavaScript object. Flexbox is the default layout model for View. flex: 1 means "take all available space."

Navigation Between Screens

For a multi-screen app, Expo Router provides file-based navigation. It is included in the default template, but not in the blank template shown above. Follow the current Expo tutorial or install and configure Router before using the routing example below.

Expo Router uses file-based routing — the same pattern as Next.js. A file at app/profile.tsx becomes the /profile route. A link between screens looks like:

import { Link } from 'expo-router';
 
// Inside your component
<Link href="/profile">Go to Profile</Link>

If you are on an older template using React Navigation directly, the setup is more manual but the concept is the same: a Stack, Tab, or Drawer navigator wraps your screens and manages the history.

Accessing Device Capabilities with Expo SDK

The Expo SDK provides pre-built modules for common native capabilities. You do not need to write native code to access them:

• expo-camera — camera and QR scanning
• expo-location — GPS and geolocation
• expo-notifications — push and local notifications
• expo-image-picker — photo library and camera roll
• expo-secure-store — encrypted key-value storage for tokens
• expo-haptics — haptic feedback

Install them with npx expo install expo-camera (use expo install rather than npm install — it picks the correct version for your Expo SDK version).

What to Learn Next, In Order

1. React Native layout and Flexbox The layout system is close to CSS Flexbox but not identical. Spend a session with the React Native layout docs and the Yoga playground.

2. Managing state If you know React state and context, start there. If shared state becomes difficult to manage, evaluate a state library such as Zustand against your app’s needs.

3. Data fetching TanStack Query works on React Native and handles caching, loading states, and background refetching reliably. Consider it when you need those features across multiple screens.

4. Navigation patterns Work through the Expo Router documentation. Understand stack navigation, tab navigation, and how to pass parameters between screens.

5. Building for device Use EAS Build to create a real device build early. The development experience in Expo Go is fast but incomplete — some native modules only work in a real build. Getting comfortable with the build process before your deadline is important.

Common Beginner Mistakes

• Using <View> where <ScrollView> is needed — content will be clipped at the screen edge rather than scrolling
• Forgetting that StyleSheet properties are in camelCase, not kebab-case
• Mutating state directly instead of through setState — same issue as in React web
• Running an emulator and a physical device at the same time and confusing which one has the latest build

Check the React Native and Expo documentation for the versions your project uses when setup or device behavior differs from this example.

Discuss a React Native project with LinkIT.