React Native in 2024: Expo vs CLI and Getting Started

"Should I use Expo or React Native CLI?" This is the most common question in mobile development. The answer has changed drastically in 2024.

The Short Answer

Use Expo. Seriously. Unless you are building a specific native module that absolutely requires direct linking (which is rare now), Expo is the way to go.

Why Expo Won

1. CNG (Continuous Native Generation): Generate native folders on demand.
2. Expo Router: File-based routing like Next.js for mobile.
3. OTA Updates: Push bug fixes without App Store review.
4. Dev Client: Test native code without compiling every time.

Setting Up Your First App

# Create project
npx create-expo-app@latest my-app

# Start server
npx expo start

Scan the QR code with your phone (Expo Go app) and you are live.

Navigation with Expo Router

If you know Next.js, you know Expo Router.

app/
├── index.js      # Home screen
├── _layout.js    # Layout (Tabs/Stack)
└── details.js    # Details screen

Linking to pages

import { Link } from 'expo-router';

export default function Home() {
  return (
    <Link href="/details">Go to Details</Link>
  );
}

Styling

You can use NativeWind (Tailwind for React Native) or StyleSheet.

import { StyleSheet, View, Text } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  }
});

Accessing Native Features

Expo SDK covers 95% of what you need: Camera, Location, Sensors, Notifications.

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.canceled) {
    setImage(result.assets[0].uri);
  }
};

Building for Production

EAS (Expo Application Services) makes building trivial:

npm install -g eas-cli
eas login
eas build

This builds .ipa and .apk files in the cloud. No need for a Mac to build iOS apps!

Performance Tips

1. Use FlatList for long lists
2. Memoize components with React.memo
3. Avoid anonymous functions in render
4. Use Hermes engine (enabled by default now)

React Native is no longer the "second best" option. It's a first-class way to build mobile apps.