Understanding React Native Components: Building a Mobile App from Scratch

React Native has revolutionized mobile app development by allowing developers to create cross-platform apps using JavaScript and React. By using native components under the hood, React Native enables the development of high-performance apps for both iOS and Android from a single codebase.

In this article, we’ll explore the fundamental concepts of React Native components, understand how they differ from React web components, and walk you through the process of building a simple mobile app from scratch.

What is React Native?

React Native is an open-source framework developed by Meta (formerly Facebook). It allows developers to create mobile applications for iOS and Android using React’s component-based approach. The key advantage is “learn once, write anywhere”, as you write JavaScript/TypeScript code that works on multiple platforms.

Why Use React Native?

1. Cross-Platform Development: Write one codebase that works for both iOS and Android.
2. Native-Like Performance: Uses native components, not web views, for optimal performance.
3. Hot Reloading: View code changes instantly during development.
4. Large Community and Libraries: React Native has a vast ecosystem of libraries, tutorials, and community support.

What are React Native Components?

React Native components are building blocks for creating user interfaces in mobile apps. They are similar to HTML elements (like <div>, <button>, etc.) but are platform-agnostic and designed to work on both Android and iOS.

Types of React Native Components

1. Basic Components: These components are the foundation of any React Native app.
   Examples:
   • View (like <div>)
   • Text (like <p>)
   • Image (like <img>)
   • TextInput (like an <input> field)
   • Button (like an HTML <button>)
2. User Interaction Components: Used for touch interactions.
   Examples:
   • TouchableOpacity: A button with customizable opacity on press.
   • TouchableHighlight: Changes the background color when pressed.
   • Pressable: More advanced control over press interactions.
3. List Components: Used to display scrollable content.
   Examples:
   • ScrollView: Scrolls the entire screen.
   • FlatList: Optimized for large lists of items.
   • SectionList: Displays grouped lists with section headers.
4. Layout Components: Help arrange child components.
   Examples:
   • View: Acts like a container (similar to a <div>).
   • SafeAreaView: Ensures content avoids notches, status bars, and screen cutouts.
5. Native-Specific Components: Components that are platform-specific.
   Examples:
   • StatusBar: Controls the app’s status bar (battery, time, etc.).
   • Modal: Displays a modal dialog (like a popup).

How to Build a React Native Mobile App from Scratch

Here’s a step-by-step process to create a basic React Native mobile app.

Step 1: Set Up Your Development Environment

To start building with React Native, you need to set up your development environment.

1. Install Node.js and npm

Download and install Node.js from Node.js Official Website. It comes with npm (Node Package Manager), which you’ll use to install dependencies.

2. Install Expo CLI (Optional)

Expo is a toolchain built around React Native that makes it easy to develop, build, and test mobile apps. You can install Expo CLI using:

3. Create a New Project

Run the following command to create a new React Native project using Expo:

Alternatively, you can use React Native CLI to create the app if you need more control:

Step 2: Understand the Folder Structure

A typical React Native project has the following folder structure:

The most important file to focus on initially is App.js, where the main component logic resides.

Step 3: Build Your First Component

Open App.js and replace the default content with the following code to create a simple “Hello World” app.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (

Hello, World!

);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
title: {
fontSize: 24,
fontWeight: 'bold',
color: '#333',
},
});

Explanation

• View: Works like a container (like <div> in web development).
• Text: Displays text (like <p> in HTML).
• StyleSheet: Used to create CSS-like styles for components.

Step 4: Add Interactivity with Buttons and Inputs

Now, let’s add a button and an input field to the app. Update App.js as follows:

import React, { useState } from 'react';
import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
export default function App() {
const [name, setName] = useState('');
return (
    <View style={styles.container}>
    <Text style={styles.title}>Welcome, {name ? name : 'Guest'}!</Text>

    <TextInput 
        style={styles.input} 
        placeholder="Enter your name" 
        onChangeText={(text) => setName(text)} 
    />

    <Button 
        title="Greet Me" 
        onPress={() => alert(`Hello, ${name}!`)} 
    />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
title: {
fontSize: 24,
fontWeight: 'bold',
color: '#333',
marginBottom: 20,
},
input: {
height: 40,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
width: '80%',
marginBottom: 20,
paddingHorizontal: 10,
},
});

Explanation

• useState: Hook to manage state for the name input field.
• TextInput: Used to get user input (like <input> in HTML).
• Button: Handles user interaction. Clicking the button triggers the alert() function.

Step 5: Run the App

To run the app on your device or emulator, run the following command:

This opens an Expo development server. You can view your app in the Expo Go app on your phone by scanning the QR code.

If you used the React Native CLI, run:

or

Additional Tips for Building a React Native Mobile App

1. Use Third-Party Libraries: Libraries like React Navigation for routing and Redux for state management can save you time.
2. Responsive Design: Use Flexbox to create responsive layouts.
3. Animations: Use Animated API or libraries like React Native Reanimated for smooth animations.
4. Testing: Test your app on both iOS and Android to ensure compatibility.

Conclusion

React Native components form the foundation of every mobile app you create. By mastering components like View, Text, Button, and FlatList, you can build interactive, cross-platform mobile apps from scratch.

With Expo, development becomes even more accessible, enabling live previewing of your app on any device. As you grow more comfortable with React Native components, you’ll be ready to create complex, feature-rich apps for both iOS and Android.

So what are you waiting for? Fire up your code editor and start building your first React Native mobile app today! 🚀