React vs React Native

If you’ve built a React website and want to expand your reach to mobile users, React Native is the perfect next step. This guide will walk you through the process of Convert your React web app into a React Native mobile app, leveraging your existing knowledge while addressing key differences. Let’s dive

What is React Native?

React Native is built on two pillars:

1. React’s component-based architecture for structuring UI.
2. Native platform APIs for rendering platform-specific elements.

React vs. React Native: Differences and Similarities

Similarities

1. JSX Syntax: Both use JSX to define UI components.
2. State Management: Tools like useState or Redux work similarly.
3. Component Lifecycle: Hooks like useEffect behave the same way.

Differences

React (Web)	React Native
div, p, span	View, Text, Pressable
CSS for styling	JavaScript styles or Tailwind (Nativewind)
Browser DOM	Native mobile components
react-router	@react-navigation

Example of a component in both frameworks:

// React (Web)  
function Button() {  
  return <button className="bg-blue-500">Click Me</button>;  
}  

// React Native  
import { Pressable, Text } from 'react-native';  

function Button() {  
  return (  
    <Pressable className="bg-blue-500">  
      <Text>Click Me</Text>  
    </Pressable>  
  );  
}

Setting Up a New React Native App with Expo

Expo simplifies React Native development by abstracting complex native configurations. Here’s how to start:

Step 1: Install Expo CLI

npm install -g expo-cli

Step 2: Create a New Project

npx create-expo-app MyApp --template

Choose TypeScript or JavaScript when prompted.

Step 3: Install Dependencies

If you want to use Tailwind (via nativewind):

npm install nativewind  
npm install --dev tailwindcss postcss autoprefixer

Configure tailwind.config.js:

module.exports = {  
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],  
  theme: { extend: {} },  
  plugins: [],  
};

Update babel.config.js:

module.exports = function (api) {  
  api.cache(true);  
  return {  
    plugins: ["nativewind/babel"],  
  };  
};

Running Expo Apps: Emulators and Expo Go

Option 1: Expo Go (Real Device)

1. Install Expo Go on your iOS/Android device.
2. Start your project:

npx expo start  

3. Scan the QR code with your device’s camera.

Option 2: Simulators/Emulators

• iOS: Install Xcode and run:

npx expo run:ios

• Android: Install Android Studio and run:

npx expo run:android

Turning React Code into React Native

Reusing Styles

3. Plain CSS: Convert CSS to React Native’s StyleSheet:

// React  
<div style={{ padding: 20 }} />  

// React Native  
<View style={{ padding: 20 }} />

3. Tailwind: Use nativewind (already configured earlier):

<Text className="text-lg text-blue-500">Hello World</Text>

Web Component	React Native Component
div	View
button	Pressable or Button
img	Image
input	TextInput

Reusing Hooks

Hooks like useState, useEffect, or custom hooks not relying on web APIs (e.g., window) can be reused directly:

// Shared custom hook  
function useCounter() {  
  const [count, setCount] = useState(0);  
  const increment = () => setCount(c => c + 1);  
  return { count, increment };  
}  

// Works in both React and React Native!  

For hooks using localStorage, replace them with React Native’s AsyncStorage:

import AsyncStorage from '@react-native-async-storage/async-storage';  
const useStorage = (key) => {  
  const [data, setData] = useState();  
  useEffect(() => {  
    AsyncStorage.getItem(key).then(setData);  
  }, []);  
  return data;  
};  

Conclusion

If you already know React, transitioning to React Native is a logical step to enter mobile development. With Expo, you can focus on code instead of complex native setups, and by reusing styles, components, and hooks, you’ll save significant time. While there are differences in components and navigation, the core principles remain the same, making React Native an excellent choice for React developers looking to go mobile.

Start small, experiment with Expo Go, and gradually port your app’s features—your React skills will carry you further than you can imagine.

— Cheers