From React to React Native

If you visit the React Native documentation, you'll see the following definition:

“React Native is an open-source framework for building Android and iOS applications using React and the app platform’s native capabilities.”

In simple terms, React Native is a JavaScript framework that allows us to build mobile applications for both ios and Android using the same codebase, similar to how we use React to build web applications.
Back in web development, we had to write code with different browsers in mind, but over time, tools like transpilers (e.g., Babel) helped bridge the gap between different environments. React Native does something similar for mobile: it lets developers write JavaScript that runs across different mobile platforms while rendering native components under the hood.

Performance Evolution:
In its early days, React Native had limitations — it was relatively slow and couldn’t communicate directly with the native (machine-level) code. However, newer technologies have significantly improved its performance:

JSI (JavaScript Interface): Allows direct communication between JavaScript and native code. This gives better performance and unlocks access to native features.

Fabric Renderer: Optimizes rendering to make the UI faster and closer in performance to true native apps.

Hot Reloading: Automatically updates code changes in real-time without rebuilding the app, improving development speed.

Expo: The Toolchain for React Native
Expo is the recommended tool for working with React Native. It acts like Vite or Create React App, but for mobile. It simplifies setup and offers built-in access to APIs like camera, location, and notifications — without needing native code configuration.

React vs. React Native

Similarities:
React Native shares many concepts with React:

JSX Syntax: You still write UI components using JSX.

Component-Based Architecture: You build your UI with reusable components.

JavaScript & Hooks: Logic and state management are the same.

Differences:

The key difference lies in core components. Instead of HTML elements like

`<div>`

or

`<button>`

, you use mobile-native components such as:

Common React Native Core Components
View: Basic container, similar to <div>
Text: Displays text, like <p>
Image: Display an image
ImageBackground: A container with a background image
TextInput: User input field
ScrollView: Scrollable container(renders all children)-(which can cause performance issues for long lists)
FlatList: Optimized list for large data sets (renders lazily)-(For large lists, use FlatList — it renders only visible items.)
Switch: Toggle switch(boolean on/off)
TouchableOpacity: A pressable component that reduces opacity on touch.
SafeAreaView: Ensures content fits within the safe area boundaries.

Styling in React Native

React Native does not use CSS files. Instead, styles are written in JavaScript using a special syntax:

Two main ways to style:

1. Inline styles:

`<View style={{ backgroundColor: 'blue', padding: 10 }} />`

2.StyleSheet API:

`const styles = StyleSheet.create({
  box: { backgroundColor: 'blue', padding: 10 }
});`

You can also use libraries like nativewind to write Tailwind-like utility classes in React Native(NativeWind is a library that brings Tailwind CSS utility classes to React Native. It lets you style your components using class names (e.g., className="bg-blue-500 p-4"). It's built on top of the [StyleSheet API] and works well with Expo.)

Routing in React Native:
React Native does not use traditional HTML routing (). Instead, it uses a library called react-navigation, which lets you manage navigation stacks like screens or tabs.
react-navigation, lets you define screen stacks (like web routes) using Stack.Navigator, Tab.Navigator, etc. Each screen is a component, and you use navigation.navigate('ScreenName') to move between them.