React Native allows you to build real mobile applications using JavaScript and React. Instead of rendering HTML elements like a web app, React Native converts your components into actual native UI elements such as Android Views and iOS UIViews.
React Native uses React concepts such as components, props, and state. When your component renders, React Native creates a Virtual DOM tree. Changes in state trigger a diffing process, and only the changed parts are sent to the native layer for rendering.
// Basic React Native component structure
import React from "react";
import { Text, View } from "react-native";
export default function App() {
return (
<View>
<Text>Hello React Native</Text>
</View>
);
}
The Text component renders native text on the device. The View component acts like a container similar to a div, but it maps directly to native layout elements.
// Simple interactive counter logic
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<View>
<Text>Count: {count}</Text>
<Button onPress={() => setCount(count + 1)} />
</View>
);
}
Counter Value: 0
Note: In a real app, this "Increase" click triggers a message across the "Bridge" to update the Native UI.
FlatList