React Native & Expo

Mobile apps with React

React Native and Expo let you create iOS and Android apps with React.

Expo vs React Native CLI

Expo installation

npx create-expo-app my-app
cd my-app
npx expo start

Scan the QR with the Expo Go app.

Mobile components

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello Mobile!</Text>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Press</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: 'bold' },
  button: { backgroundColor: '#3b82f6', padding: 12, borderRadius: 8 },
  buttonText: { color: 'white' },
})

Navigation

import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

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

Practice

→ Mobile App with Expo