React Native makes it possible to build mobile applications for Android and iOS using JavaScript and React.
If you are new to mobile app development, Expo is one of the easiest ways to start learning React Native because it simplifies the initial project setup and allows you to test your application quickly on a real mobile device.
In this beginner-friendly tutorial, we will create our first React Native application using Expo and understand the basic concepts you need before moving to larger mobile app projects.
By the end of this tutorial, you will learn how to:
- Install the required development tools
- Create a React Native application using Expo
- Understand the basic Expo project structure
- Use React Native components
- Add text, images and buttons
- Style a React Native mobile screen
- Run the application on a real mobile device
- Understand where to continue learning next
What Is React Native?
React Native is a framework used to build mobile applications using JavaScript and React concepts.
With traditional mobile development, developers may create separate applications for Android and iOS. React Native allows a large part of the application code to be shared between both platforms.
If you already know HTML, CSS or JavaScript, some React Native concepts will feel familiar.
For example, in HTML we might write:
<div>
<h1>Hello World</h1>
</div>
In React Native, we use mobile-specific components:
<View>
<Text>Hello World</Text>
</View>
Some commonly used React Native components include:
View
Text
Image
Pressable
TextInput
ScrollView
FlatList
SafeAreaView
What Is Expo?
Expo is a collection of tools and services that makes React Native development easier.
It is especially useful for beginners because Expo helps you:
- Create React Native projects quickly
- Run applications without complicated initial native configuration
- Test applications on Android and iOS devices
- Access common mobile features
- Install compatible React Native libraries
- Develop and preview changes quickly
For learning React Native and building prototypes, Expo provides a very convenient starting point.
Requirements
Before creating the application, make sure you have the following:
- A Windows, macOS or Linux computer
- Node.js installed
- Internet connection
- A code editor such as Visual Studio Code
- An Android or iOS mobile device for testing
- Expo Go installed on the mobile device
Step 1 – Install Node.js
React Native and Expo require Node.js.
After installing Node.js, open Command Prompt, PowerShell or Terminal and check the installed version:
node --version
Also check npm:
npm --version
If both commands display version numbers, Node.js and npm are available on your computer.
Step 2 – Create Your First Expo Project
Open your terminal and run:
npx create-expo-app@latest MyFirstApp
This command creates a new Expo React Native project named:
MyFirstApp
After the installation completes, move into the project directory:
cd MyFirstApp
Now start the Expo development server:
npx expo start
You should see the Expo development interface and a QR code.
Step 3 – Run the App on Your Mobile Phone
Install Expo Go on your Android or iOS phone.
Make sure your computer and phone are connected to a suitable network for local development.
Open Expo Go and scan the QR code shown by the Expo development server.
Your React Native application should now open on the phone.
One useful React Native development feature is Fast Refresh.
When you modify the application code and save the file, the updated screen can appear on the phone almost immediately.
Understanding the Expo Project Structure
A modern Expo project may contain files and folders similar to:
MyFirstApp/
│
├── app/
├── assets/
├── node_modules/
├── package.json
├── app.json
└── ...
The exact files can vary depending on the Expo template and version.
Modern Expo applications commonly use Expo Router, where application screens are placed inside the app directory.
For example:
app/
index.tsx
or:
app/
index.jsx
The index file can represent the first screen displayed when the application starts.
Step 4 – Create Your First React Native Screen
Replace the starter screen with the following code:
import {
View,
Text,
StyleSheet
} from 'react-native';
export default function HomeScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>
My First React Native App
</Text>
<Text style={styles.subtitle}>
Built using React Native and Expo
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 24,
backgroundColor: '#f4f7fb',
},
title: {
fontSize: 28,
fontWeight: '700',
textAlign: 'center',
color: '#102a43',
},
subtitle: {
marginTop: 12,
fontSize: 16,
textAlign: 'center',
color: '#627d98',
},
});
Save the file.
Your application should refresh automatically and show the new interface.
Understanding the View Component
View is one of the most commonly used React Native components.
<View>
...
</View>
It is generally used as a container for other components.
A View can contain:
- Text
- Images
- Buttons
- Forms
- Lists
- Other Views
Understanding the Text Component
Text displayed inside a React Native application should normally be placed inside a Text component.
Example:
<Text>
Welcome to React Native
</Text>
This is different from normal HTML.
The following is incorrect React Native code:
<View>
Hello World
</View>
Instead use:
<View>
<Text>Hello World</Text>
</View>
Understanding React Native Styling
React Native does not use traditional CSS files in exactly the same way as standard websites.
One common approach is to create styles using:
StyleSheet.create()
Example:
const styles = StyleSheet.create({
title: {
fontSize: 28,
fontWeight: '700',
color: '#102a43',
},
});
We apply that style using:
<Text style={styles.title}>
Learn React Native
</Text>
Step 5 – Add an Image
React Native provides an Image component.
First import it:
import {
View,
Text,
Image,
StyleSheet
} from 'react-native';
Now add the image:
<Image
source={{
uri: 'https://picsum.photos/300'
}}
style={styles.image}
/>
Add the image styling:
image: {
width: 180,
height: 180,
borderRadius: 24,
marginBottom: 24,
},
React Native images normally need width and height values.
Step 6 – Add a Button
React Native provides several methods for creating interactive buttons.
For this example we will use Pressable.
Import it:
import {
View,
Text,
Image,
Pressable,
StyleSheet
} from 'react-native';
Add the button:
<Pressable
style={styles.button}
onPress={() => {
console.log('Button pressed');
}}
>
<Text style={styles.buttonText}>
Get Started
</Text>
</Pressable>
Add the button styles:
button: {
marginTop: 24,
backgroundColor: '#00a6b8',
paddingVertical: 14,
paddingHorizontal: 28,
borderRadius: 12,
},
buttonText: {
color: '#ffffff',
fontSize: 16,
fontWeight: '700',
},
Complete React Native Example
Now combine everything into a complete screen:
import {
View,
Text,
Image,
Pressable,
StyleSheet
} from 'react-native';
export default function HomeScreen() {
const handlePress = () => {
console.log('Welcome to React Native');
};
return (
<View style={styles.container}>
<Image
source={{
uri: 'https://picsum.photos/300'
}}
style={styles.image}
/>
<Text style={styles.title}>
Learn React Native
</Text>
<Text style={styles.subtitle}>
Build mobile applications for
Android and iOS using JavaScript.
</Text>
<Pressable
style={styles.button}
onPress={handlePress}
>
<Text style={styles.buttonText}>
Get Started
</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 24,
backgroundColor: '#f5f8fc',
},
image: {
width: 180,
height: 180,
borderRadius: 24,
marginBottom: 24,
},
title: {
fontSize: 30,
fontWeight: '700',
color: '#102a43',
},
subtitle: {
marginTop: 12,
fontSize: 16,
lineHeight: 24,
textAlign: 'center',
color: '#627d98',
maxWidth: 320,
},
button: {
marginTop: 28,
backgroundColor: '#00a6b8',
paddingVertical: 14,
paddingHorizontal: 30,
borderRadius: 12,
},
buttonText: {
color: '#ffffff',
fontSize: 16,
fontWeight: '700',
},
});
Expected Output
When the application runs, the mobile screen will contain:
- An image
- A heading saying Learn React Native
- A short description
- A teal Get Started button
The content will appear in the centre of the mobile screen.
React Native vs HTML
| Web Development | React Native |
|---|---|
| <div> | View |
| <p> | Text |
| <img> | Image |
| <button> | Pressable |
| CSS | StyleSheet / Style Objects |
| Browser | Mobile Application |
Important React Native Concepts to Learn Next
After learning basic components, continue with these concepts:
- Components
- Props
- State
- useState
- useEffect
- Event handling
- Conditional rendering
- Lists
- Forms
- API integration
Common Beginner Errors
1. Text Outside the Text Component
Incorrect:
<View>
Hello React Native
</View>
Correct:
<View>
<Text>
Hello React Native
</Text>
</View>
2. Forgetting flex: 1
If a main container needs to fill the screen, it commonly uses:
flex: 1
3. Image Not Showing
Make sure your image has dimensions:
image: {
width: 200,
height: 200,
}
4. Expo Go Cannot Connect
If the application does not open on your mobile device:
- Check that the Expo development server is running
- Check the network connection
- Check firewall restrictions
- Restart Expo
- Try another Expo connection option if required
Mini Project Challenge
Now modify the application and create a basic personal profile app.
Add:
- Your name
- Your profile picture
- Your job title
- A short biography
- A View Projects button
- A Contact Me button
Your mobile screen might look like:
Hi, I'm Arun
React Native Developer
I enjoy building mobile applications
using JavaScript and React Native.
[ View Projects ]
[ Contact Me ]
This small challenge will help you practise:
- React Native components
- Layout
- Styling
- Images
- Buttons
What Should You Build Next?
After completing your first React Native application, try these projects:
- Login Screen
- Registration Screen
- Profile Screen
- To-Do Application
- Notes Application
- Weather Application
- Expense Tracker
- QR Scanner
- Contact Manager
- API-Based Mobile App
React Native Learning Roadmap
A beginner can follow this learning order:
- JavaScript Fundamentals
- React Fundamentals
- React Native Components
- React Native Styling
- State and Hooks
- Forms and Validation
- Navigation
- FlatList and Data Display
- REST API Integration
- AsyncStorage
- Authentication
- Device APIs
- Android and iOS Builds
Frequently Asked Questions
Is React Native good for beginners?
Yes. React Native is especially suitable for students who already understand basic JavaScript or React.
Do I need Android Studio to learn React Native?
Not necessarily for your first Expo Go project. Native Android development tools become more important when you move into emulators, native modules, debugging and application release workflows.
Can React Native create Android and iOS applications?
Yes. React Native allows developers to share a large amount of application code between Android and iOS while still supporting platform-specific behaviour where necessary.
Should I learn React before React Native?
Learning basic React concepts first is very helpful.
You should understand:
- Components
- Props
- State
- Hooks
- Event handling
Can Expo be used for real applications?
Yes. Expo is used for production React Native development as well as learning and prototyping. The exact development and build workflow depends on the requirements of the application.
Conclusion
You have now learned how to create your first React Native mobile application using Expo.
In this tutorial we covered:
- React Native fundamentals
- Expo project creation
- Running an app on a mobile device
- View and Text components
- React Native styling
- Images
- Pressable buttons
- Basic project structure
The best way to learn React Native is to keep building small applications.
Do not try to learn every feature before starting a project.
Learn one concept, build something with it, test the application, fix your mistakes and then introduce the next concept.
Start Learning React Native with Madras Academy
Want to learn mobile app development practically?
At Madras Academy, students can learn how to build real Android and iOS applications using modern technologies such as React Native, JavaScript and APIs.
You can progress from beginner-level mobile screens to complete applications involving:
- User authentication
- REST APIs
- Offline storage
- Navigation
- Camera and QR scanning
- Push notifications
- Maps
- Mobile app deployment
Learn. Build. Test. Launch.