? First React Native App

? Quick Overview

React Native allows you to build mobile applications using JavaScript and React. Your first React Native app demonstrates how a single codebase can create native Android and iOS applications.

? Key Concepts

• Component-based architecture
• JSX syntax
• Native components instead of HTML
• Hot reloading for faster development

? Syntax / Theory

A React Native app starts with a main component (usually App) which returns UI using JSX. Instead of HTML tags, React Native uses components like View, Text, and StyleSheet.

? Code Example

// Import core React Native components
import React from "react";
import { View, Text, StyleSheet } from "react-native";

// Main App component
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
}

// Styling using StyleSheet API
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
text: {
fontSize: 22,
fontWeight: "bold"
}
});

? Live Output / Explanation

? Interactive Example

Simulate the React Native "Hot Reload" feature. Change the props below to instantly update the native mobile view.

? Use Cases

• Cross-platform mobile apps
• Startup MVP development
• Rapid UI prototyping
• Apps with shared Android & iOS logic