Building Your First React Native App with Expo: A Step-by-Step Guide

-

 

Building Your First React Native App with Expo: A Step-by-Step Guide

After setting up React Native with Expo, it's time to build your first functional app. In this guide, we'll explore the project structure and understand how different files contribute to the development workflow.

1. Understanding the Project Structure

When you create a new Expo project, you'll see a folder structure like this:


myApp/
├── App.js
├── package.json
├── node_modules/
├── assets/
├── babel.config.js
└── app.json

Key Files and Their Purpose

  • App.js – The main entry point of your app.
  • package.json – Contains dependencies and project metadata.
  • node_modules/ – Stores installed dependencies.
  • assets/ – Holds static files like images and fonts.
  • babel.config.js – Configures Babel for JavaScript transformations.
  • app.json – Configures Expo-specific settings.

2. Creating Screens and Navigation

Most apps require multiple screens. You can use react-navigation to navigate between screens.

Install React Navigation

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/stack

Set Up Navigation in App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

3. Creating Screens

Inside the screens/ directory, create HomeScreen.js:

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

export default function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Welcome to Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

And DetailsScreen.js:

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

export default function DetailsScreen() {
  return (
    <View>
      <Text>This is the Details Screen</Text>
    </View>
  );
}

4. Running Your App

Run your project with:

npx expo start

Scan the QR code in Expo Go to test your app with navigation.

Conclusion

Now you have a basic React Native app with multiple screens using Expo. In the next tutorial, we will explore state management and API integration. Happy coding! 🚀

Comments

Post a Comment

Popular posts from this blog

Fetching Data from an API in React Native with Expo

-
Image
Fetching data from an API is a fundamental part of building dynamic mobile applications. In this guide, we will explore how to fetch data in a React Native Expo project using the built-in fetch API and Axios. 1. Setting Up the Project Ensure you have a React Native Expo project set up. If not, create one using: npx create-expo-app myApp cd myApp npm start 2. Fetching Data with Fetch API The fetch API is a simple way to request data from a server. Let’s create a component that fetches and displays data from a public API. Creating a Data Fetching Component import React, { useState, useEffect } from 'react'; import { View, Text, FlatList, ActivityIndicator } from 'react-native'; export default function FetchData() { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => { ...
Read more

State Management in React Native with Expo: A Beginner’s Guide

-
Image
  State management is an essential part of building scalable and maintainable React Native applications. In this guide, we will explore different ways to manage state in a React Native Expo project, from using the built-in useState hook to more advanced solutions like Context API and Redux. 1. Understanding State in React Native State represents the dynamic data in your application. React provides the useState hook to manage state within functional components. Using useState Hook import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; export default function Counter() { const [count, setCount] = useState(0); return ( <View> <Text>Count: {count}</Text> <Button title="Increase" onPress={() => setCount(count + 1)} /> </View> ); } Pros: Simple and built into React. Great for managing component-level state. 2. Using Context API for Global State The Contex...
Read more

How to Set Up React Native with Expo 🚀

-
How to Set Up React Native with Expo 🚀 React Native with Expo makes it easy to build mobile applications using JavaScript and React. Expo provides a managed workflow, eliminating the need to install native dependencies manually. In this guide, you'll learn how to set up React Native with Expo step by step. 1. Install Node.js and npm Before setting up Expo, ensure that you have Node.js installed on your system. You can download it from: https://nodejs.org/ Once installed, verify the installation by running: node -v # Check Node.js version npm -v # Check npm version 2. Install Expo CLI Expo CLI is the command-line tool used to manage your Expo projects. Install it globally using npm or yarn: npm install -g expo-cli OR yarn global add expo-cli 3. Create a New Expo Project Now, create a new React Native project using Expo: npx create-expo-app myApp Navigate to the project folder: cd myApp 4. Start the Development Server To start the Expo development server, run: ...
Read more