React Native Explained — Cross-Platform Mobile Development

React Native is a cross-platform framework by Meta that lets you build native mobile apps for iOS and Android using JavaScript and React, sharing up to 95% of code between platforms.

What You’ll Learn

You’ll understand React Native’s component model, manage state and props, handle navigation between screens, and build a cross-platform app with JavaScript and JSX code examples.

Why React Native Matters

React Native powers apps like Instagram, Shopify, and Discord. At DodaTech, we’re evaluating React Native for our mobile security dashboard because it lets our web developers (who already know JavaScript) build mobile apps without learning Kotlin or Swift separately. One team, two platforms.

React Native Learning Path

    flowchart LR
  A[JavaScript & React Basics] --> B[React Native]
  B --> C[Components & Props]
  C --> D[State & Events]
  D --> E[Navigation]
  E --> F[Networking & APIs]
  F --> G[Device Features]
  G --> H[App Store & Play Store]
  B:::current

  classDef current fill:#f90,color:#fff,stroke:#333,stroke-width:2px
  

How React Native Works

Think of React Native as a translator. You write components in JavaScript and JSX, and React Native converts them into native UI widgets — real Android TextView and iOS UILabel under the hood.

This is different from hybrid approaches like Cordova, which wrap web content in a browser view. React Native calls native APIs directly, so your app feels and performs like a native app.

    flowchart LR
  A[Your JavaScript Code] --> B[React Native Bridge]
  B --> C[Native iOS UI]
  B --> D[Native Android UI]
  C --> E[iPhone]
  D --> F[Android Phone]
  

Core Concepts: Components, Props, and State

Components

Everything in React Native is a component. Components are reusable building blocks that describe a piece of UI.

// A simple component that shows a greeting
import { Text, View, StyleSheet } from 'react-native';

function Greeting() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello from DodaTech!</Text>
    </View>
  );
}

Notice there are no <div> or <span> tags. In React Native, you use native components:

Props

Props (short for “properties”) are read-only inputs passed to a component, like function arguments.

// Greeting now accepts a 'name' prop
function Greeting(props) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, {props.name}!</Text>
    </View>
  );
}

// Usage
<Greeting name="Alex" />
<Greeting name="Maria" />

Why “props”? Think of them like the settings on a vending machine. You put in your choices (props), and the machine (component) dispenses the result. The machine doesn’t change your choices — props are read-only.

State

State is data that can change over time, usually in response to user actions. Unlike props (which are passed from outside), state is internal to a component.

import React, { useState } from 'react';
import { Text, View, TextInput, Button, StyleSheet } from 'react-native';

function GreetingApp() {
  // Declare a state variable 'name' with initial value ''
  const [name, setName] = useState('');
  const [greeting, setGreeting] = useState('');

  const handleGreet = () => {
    if (name.trim() === '') {
      setGreeting('Please enter a name!');
    } else {
      setGreeting(`Hello, ${name}!`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Greeting App</Text>
      
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
      />
      
      <Button title="Greet Me" onPress={handleGreet} />
      
      {greeting !== '' && (
        <Text style={styles.greeting}>{greeting}</Text>
      )}
    </View>
  );
}

What’s happening here?

• useState('') creates a state variable and a function to update it. The initial value is an empty string
• const [name, setName] = useState('') — this is called array destructuring. name is the current value, setName is the function that changes it
• value={name} ties the TextInput’s displayed text to our state
• onChangeText={setName} updates name every time the user types
• The {greeting !== '' && (...)} pattern is conditional rendering. If greeting is empty, nothing shows. If it has a value, the greeting text appears

Building a Multi-Screen App with Navigation

Real apps have multiple screens. Let’s add navigation using React Navigation, the most popular navigation library.

First install it:

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

Now create two screens:

// screens/HomeScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

export default function HomeScreen({ navigation }) {
  const [name, setName] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to DodaTech</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
      />
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile', { userName: name })}
      />
    </View>
  );
}

// screens/ProfileScreen.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileScreen({ route }) {
  // Extract the parameter passed from HomeScreen
  const { userName } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Your Profile</Text>
      <Text style={styles.greeting}>
        {userName ? `Hello, ${userName}!` : 'Welcome, Guest!'}
      </Text>
    </View>
  );
}

Now connect them in your main app file:

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createNativeStackNavigator();

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

Understanding Navigation:

• NavigationContainer wraps your entire navigation tree. It manages the navigation state
• Stack.Navigator creates a stack-based navigation (like a deck of cards — when you push a new screen, it slides on top)
• Stack.Screen registers each screen with a name and component
• navigation.navigate('Profile', { userName: name }) navigates to the Profile screen and passes data
• route.params in ProfileScreen reads the passed data

Expected Output

When you run the app with npx expo start:

1. A home screen shows “Welcome to DodaTech” with a text input and button
2. User types their name and taps “Go to Profile”
3. Profile screen slides in showing “Hello, [Name]!”
4. The back button (in the navigation header) returns to the home screen

Security Angle: Handling User Input Safely

In React Native, user input from TextInput is just JavaScript strings. But that doesn’t mean it’s safe:

• Sanitize text before displaying: If user input is rendered directly, a user could input special characters that break your layout
• Never store sensitive data in AsyncStorage without encryption: Use expo-secure-store or react-native-keychain for tokens and passwords
• Use HTTPS for all network requests: Add https:// prefix checking before making API calls
• Validate input length: Set maxLength on TextInput to prevent buffer overflow attempts
• Use environment variables for API keys (via .env files with react-native-dotenv), never hardcode them

Durga Antivirus Pro uses similar input validation when scanning file names for malware patterns.

Common Mistakes Beginners Make

1. Forgetting the export default: Your component won’t be importable. Always export your components.
2. Mutating state directly: name = "Alex" doesn’t trigger a re-render. Always use setName("Alex").
3. Not using key props in lists: When rendering arrays with .map(), each element needs a unique key prop for efficient updates.
4. Blocking the UI thread: Heavy computations should use InteractionManager.runAfterInteractions() or move to a web worker.
5. Assuming pixel values are the same on all devices: Use Dimensions.get('window') or flex layouts for responsive design.
6. Forgetting to handle the keyboard: Use KeyboardAvoidingView to prevent the keyboard from covering inputs.
7. Not cleaning up subscriptions: If you add event listeners in useEffect, return a cleanup function to remove them.

Practice Questions

1. What is the difference between props and state in React Native?
2. What does useState return?
3. How do you navigate between screens in React Navigation?
4. What does the route.params object contain?
5. Why should you use key props in list rendering?

Answers:

1. Props are read-only inputs passed from parent components; state is mutable data managed within a component.
2. It returns an array with two elements: the current state value and a function to update it.
3. Call navigation.navigate('ScreenName', { params }) to navigate and pass data.
4. It contains the parameters passed when navigating to that screen.
5. Keys help React efficiently update only changed items in a list instead of re-rendering everything.

Challenge

Add a third screen called “Settings” that lets the user toggle dark mode. Pass a function from App.js that toggles a isDarkMode state variable. When dark mode is on, change background colors to dark gray and text to white.

Real-World Task

Build a simple “Notes” app with React Native. The home screen should show a list of notes (titles and previews). Tapping a note navigates to a detail screen where the full note is displayed. Include an “Add Note” button that creates a new empty note and navigates to the editor. Store notes using AsyncStorage.

Featured Snippet

What is React Native?

React Native is a cross-platform mobile framework by Meta that allows developers to build native iOS and Android apps using JavaScript and React, sharing the majority of code between platforms while delivering native performance.

FAQ

Try It Yourself

What’s Next

What’s Next

Congratulations on completing this React Native tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!