← Back to Chapters

What Is React Native

⚛️ What Is React Native?

? Quick Overview

React Native is a popular JavaScript framework used to build mobile applications for Android and iOS using a single codebase. It allows developers to create real native mobile apps using familiar technologies like JavaScript and React.

? Key Concepts

  • Uses JavaScript and React concepts
  • Builds real native mobile apps
  • Single codebase for Android and iOS
  • Uses native components instead of web components

? Syntax / Theory

React Native applications are written using functional components. Instead of HTML tags, React Native uses components like View, Text, and Button which map directly to native UI elements.

? View Code Example
// Basic React Native component
import React from "react";
import { View, Text } from "react-native";

export default function App() {
return (
<View>
<Text>Hello React Native</Text>
</View>
);
}

? Live Output / Explanation

The above code renders a simple mobile screen displaying the text “Hello React Native”. The View acts as a container and Text displays readable content on the screen.

? Interactive Example

The following demonstrates how changing state updates UI instantly.

LIVE MOBILE SIMULATION
Count: 0
? View Code Example
// Interactive counter example
import React, { useState } from "react";
import { View, Text, Button } from "react-native";

export default function App() {
const [count, setCount] = useState(0);

return (
<View>
<Text>Count: {count}</Text>
<Button title="Increase" onPress={() => setCount(count + 1)} />
</View>
);
}

? Use Cases

  • Building cross-platform mobile apps
  • Rapid mobile app development
  • Apps requiring native performance
  • Startups needing faster MVP delivery

? Tips & Best Practices

  • Use functional components with hooks
  • Keep components small and reusable
  • Use StyleSheet for consistent styling
  • Test on both Android and iOS devices

? Try It Yourself

  • Create a screen with two Text components
  • Add a Button to change text color
  • Build a simple counter app
  • Experiment with StyleSheet styling