📱 Introduction
Welcome to your first mobile app development tutorial using React Native and Expo! This step-by-step guide is ideal for beginners who want to create Android and iOS apps using just JavaScript.
🛠️ Step 1: Install Node.js & Expo CLI
Make sure you have Node.js installed. Then, install Expo CLI globally:
|
1 |
npm install -g expo-cli |
🚀 Step 2: Create a New React Native App
|
1 |
npx create-expo-app my-first-app |
Choose the blank template (JavaScript).
Navigate to your app folder:
|
1 |
cd my-first-app |
📱 Step 3: Run the App
|
1 |
npx expo start |
This will open the Expo DevTools in your browser. Scan the QR code with your phone using the Expo Go app (available on Play Store/App Store).
🖼️ Step 4: Modify the Home Screen
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// App.js import { Text, View, StyleSheet } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text style={styles.heading}>Welcome to My First App!</Text> <Text>This app is built with React Native and Expo.</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', padding: 20, }, heading: { fontSize: 24, fontWeight: 'bold', marginBottom: 10, }, }); |
🧭 Step 5: Add Navigation
Install React Navigation:
|
1 |
npx expo install @react-navigation/native |
|
1 |
npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated |
|
1 |
npm install @react-navigation/native-stack |
Create a folder screens with two files: HomeScreen.js and AboutScreen.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// screens/HomeScreen.js import { View, Text, Button } from 'react-native'; export default function HomeScreen({ navigation }) { return ( <View style={{ padding: 20 }}> <Text>This is the Home Screen</Text> <Button title="Go to About" onPress={() => navigation.navigate('About')} /> </View> ); } |
|
1 2 3 4 5 6 7 8 9 10 11 |
// screens/AboutScreen.js import { View, Text } from 'react-native'; export default function AboutScreen() { return ( <View style={{ padding: 20 }}> <Text>This is the About Screen</Text> </View> ); } |
🧩 Step 6: Setup Navigation in App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from './screens/HomeScreen'; import AboutScreen from './screens/AboutScreen'; const Stack = createNativeStackNavigator(); export default function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="About" component={AboutScreen} /> </Stack.Navigator> </NavigationContainer> ); } |
🎉 Final Thoughts
You’ve now built your first React Native app with navigation! With just JavaScript and Expo, you created a working mobile app that runs on both Android and iOS.
Next, you can add more features like images, lists, API integration, and Firebase!
Happy Coding! 🚀