Expo

Introduction

• Expo is a platform and framework that simplifies React Native development. It provides a set of tools, libraries, and services that make it easier to build, deploy, and manage React Native applications.

• It provides file-based routing, a standard library of native modules, and much more.

Development Flow

# Install the native module and make sure version compatibility
npx expo install package-name

# Compile the react-native code into native Code
# link the native dependencies and rebuild ios and android directory (native code)
# Build an new app into simulator / device
npx expo run:ios --device

# Start Metro Bunder to bundle typescript code
# Enable hot reload and create local development server
# Mainly for development purpose
npx expo start

File-based Routing

• Expo Router is a routing framework for React Native and web applications. It allows you to manage navigation between screens in your app and use the same components on multiple platforms (Android, iOS and web). It uses a file-based method to determine routes inside your app.

• It also provides native navigation and is built on top of React Navigation.

• On the layout, It share the same header setting, but also declare the path of the page

app/_layout.tsx

export default function RootLayout() {
  return (
    <Stack
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}>
      <Stack.Screen name="index" />
      <Stack.Screen name="details" />
      // Config a model instead of the screen
      <Stack.Screen
        name="edit_icon_model"
        options={{
          title: t("edit_icon"),
          presentation: "modal",
          contentStyle: {
            minHeight: 250,
            position: "absolute",
            bottom: 0,
            left: 0,
            right: 0,
            borderRadius: 12,
          },
        }}
      />
    </Stack>
  );
}

• Here are the examples of dynamic pages and static page

app/details.tsx

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

export default function DetailsScreen() {
  return (
    <View style={styles.container}>
      <Text>Details</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

app/[id].tsx

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

export default function DetailsScreen() {
  const { id } = useLocalSearchParams();

  return (
    <View style={styles.container}>
      <Text>Details of user {id} </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});