From Web apps to Mobile apps

As a web developer, your first reaction to mobile development might be a mix of curiosity and hesitation. You might be asking yourself, "Why do I need to learn a whole new stack?" or "Where do I even begin?" If those thoughts are running through your mind, don't worry you aren't alone, and you’re in the right place.

The tech world moves at breakneck speed, and in this industry, "time waits for no man." While web development is a powerful foundation, there comes a point in every developer's career where the routine can start to feel repetitive. You might find yourself craving a new challenge or a different way to solve problems.

Why Make the Leap?

Transitioning into mobile development isn't just about learning a new skill; it’s about future-proofing your career. By expanding your toolkit to include mobile, you gain:

• A Competitive Edge: In a crowded market, being a "Full-Stack" developer who can also ship native-quality mobile apps makes you an invaluable asset.

• Deepened Expertise: Understanding how APIs and state management differ between a desktop browser and a handheld device will actually make you a better web developer.

• New Horizons: Mobile allows you to explore hardware integrations like cameras, GPS, and biometrics that offer a more intimate user experience than the web.

You don't have to start from scratch. Whether it’s leveraging your JavaScript skills through React Native or exploring the performance of Flutter, the bridge from web to mobile is shorter than you think.

Why React Native?

If you’re coming from a React background, you’ve already won half the battle. But the real power of React Native isn't just that it "looks like React", it’s how it fundamentally changes your output as a developer.

1. One Codebase, Double the Impact

   In the web world, we worry about browser compatibility (Chrome vs. Safari). In mobile, it’s iOS vs. Android. Normally, this requires two different teams using two different languages (Swift and Kotlin). With React Native, you write your logic once in JavaScript or TypeScript. This "Single Codebase" approach allows you to ship to both the App Store and Google Play simultaneously, cutting your development time and maintenance costs by nearly 50%.

2. It’s Native UI, Not a "Web Wrapper"

   One of the biggest myths is that React Native just shows a website inside an app. That is incorrect. When you use a <View> or a <Text> component in React Native, you aren't rendering a <div> or a <p> tag. Instead, React Native invokes the actual Native UI components of the phone.

   • On iOS, your <Text> becomes a UITextView.

   • On Android, it becomes a TextView.

This means your buttons have the exact haptic feedback, shadows, and "feel" that users expect from a premium app, because they are native components.

Where to Start

As a web developer, you’re used to create-react-app or Next.js. In the mobile world, you have two primary ways to spin up a project. Think of it as the difference between a managed service and a custom-built rig.

1. Expo

   It removes the headache of setting up complex Android/iOS tools initially.

   • The Setup: You don’t need Xcode or Android Studio installed to start. You can literally write code on a Windows laptop and test it on an iPhone.

   • Expo Go: It’s an app you download from the App Store. Scan a QR code in your terminal, and boom, your project is running on your physical phone with Hot Reloading.

   • The Power of EAS: Expo Application Services (EAS) handles the "scary" stuff like generating certificates and submitting your app to the Apple/Google stores entirely in the cloud.

2. React Native CLI: For the “Control Enthusiasts”

   If you’re working on an app that requires deep, custom native integrations (like high-frequency Bluetooth signal processing or specialized security encryption), you might reach for the CLI.

   • Full Control: You have direct access to the ios and android folders

   • The Trade-off: You must manage your own build environment. This means keeping Xcode, Android Studio, CocoaPods, and Java versions perfectly in sync.

Since we’re coming from a web background, we’ll be using Expo. It’s the closest thing to a 'Next.js' experience for mobile, allowing us to focus on building features rather than wrestling with complex native configurations and It removes the friction of setting up heavy Android or iOS environments, letting you see your code live on your physical device in seconds.

What exactly are these "Dependencies"?

In simple terms, dependencies are tools created by other developers that we "depend" on to make our app better and faster. Instead of building a steering wheel from scratch, we’re installing the best one available.

The Breakdown

The Setup: Step-by-Step

Step 1: Build the "House" (Scaffolding)

Once you’ve created your folder, we need to build the house by running the command first. It creates the folder and the basic files.

npx create-expo-app@latest my-pro-app -t tabs

This downloads the latest Expo template. The -t tabs flag is the "Pro" choice because it sets up the Expo Router and a bottom navigation bar for you.

Step 2: Walk Inside (Navigation)

This is the step beginners often forget! You must move your terminal into the new folder.

cd my-pro-app

If you try to install dependencies before doing this, they will install in your "home" folder instead of your project folder, and your app won't find them.

Step 3: Install the "Pro" Gear (Dependencies)

Now that you are inside the project, run the big install command:

npx expo install nativewind tailwindcss react-native-reanimated react-native-worklets @shopify/flash-list react-native-mmkv @tanstack/react-query zustand lucide-react-native expo-dev-client

Why we use npx expo install instead of npm install

In the web world, we use npm install. In the professional React Native world, we use npx expo install.

The Reason: Expo knows which versions of these libraries (like Reanimated or MMKV) are compatible with your specific version of Expo. It acts like a "Smart Assistant" that prevents your app from crashing due to version conflicts.

After you run these three steps, the project is "prepped," but Tailwind isn't active yet. You still need to do the 3 configuration files (tailwind.config.js, metro.config.js, and global.css).

How to Initialize Tailwind (NativeWind)

As a web dev, this is the part you'll love most. Here is how you "connect" Tailwind to your mobile app in 3 simple steps:

Step 1: Create the Config

Run this to create your tailwind.config.js:

npx tailwindcss init

Open that file and tell it where your components are:

// tailwind.config.js
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: { extend: {} },
  plugins: [],
};

Step 2: The "Glue" (Metro Config)

Mobile apps use a bundler called Metro (like Webpack or Vite). We need to tell it to use NativeWind. Create or open metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });

Step 3: The Global Styles

Create a file named global.css in your root folder and add these lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, import this at the very top of your app/_layout.tsx:

import "./global.css";

Why the Extra Setup?

You might be wondering: "Why go through all these configuration steps just to initialize a project?" It’s a fair question. In standard React Native, you style components using a StyleSheet object (which feels very much like writing CSS-in-JS). However, the modern industry standard has shifted toward NativeWind.

If you are coming from the web, NativeWind is your "Superpower." It allows you to use your existing Tailwind CSS knowledge to style mobile apps.

The Comparison: See the Difference

Look at how much cleaner and more readable your codebase becomes when you move away from manual styling objects:

Standard React Native (Inline Styles):

This requires you to think in JavaScript objects, remembering camelCase properties for every single element.

<View style={{ backgroundColor: '#3b82f6', padding: 20, borderRadius: 12 }}>
  <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 18 }}>
    Hello Pro!
  </Text>
</View>

With NativeWind (Tailwind Classes):

This uses the exact same utility classes you use in Next.js or React web apps. It’s faster to write, easier to maintain, and highly readable.

<View className="bg-blue-500 p-5 rounded-xl">
  <Text className="text-white font-bold text-lg">
    Hello Pro!
  </Text>
</View>

Why Pros Choose This Path:

1. Developer Velocity: You don't have to jump back and forth between your UI logic and a const styles = StyleSheet.create({}) block at the bottom of your file.

2. Shared Language: If your company has a web app and a mobile app, your design tokens (colors, spacing, shadows) can now be exactly the same across both platforms.

3. No Performance Penalty: NativeWind v4+ pre-compiles these classes into standard native styles, meaning your app stays lightning-fast.

Don't build with a hammer when you can use a power tool. Setting up NativeWind is the ultimate shortcut to professional mobile styling, bringing the utility-first workflow we love on the web straight to the palm of your hand.

This is just the beginning of my 'Web-to-Mobile' series. I’m documenting every lesson, shortcut, and challenge I encounter as I transition between these two worlds.

Ready to build with me? Check out the full series here and make sure to run the setup today. Let’s build something great together.