DEV Community: Flovet-stack

React Native Isn't React: Why Web Developers Struggle with Mobile

Flovet-stack — Sat, 22 Nov 2025 20:34:31 +0000

The "write once, run anywhere" promise? It only works in ONE direction. And web developers keep getting the short end of the stick.

I spent two months learning React Native, coming from a solid React background. Beyond the learning curve, there's a fundamental architectural asymmetry in cross-platform development.

The Flutter Paradox

Flutter developers can build web apps with one command:

flutter build web

React developers trying to go mobile?

npm install react-native
# Welcome to a parallel universe (Hell)

This isn't about tooling. It's about fundamental architecture.

React Native ≠ React

React Native isn't "React for mobile." It's React-flavored syntax wrapped around an entirely different system:

Different components: <View> vs <div>, <Text> vs <span>
Different styling: StyleSheet objects (not CSS)
Different everything: Metro bundler, React Navigation, native rendering

You're not writing CSS, you are writing JavaScript objects that look like CSS but behave differently. You're essentially learning a new framework that happens to use JSX.

The One-Way Street Pattern

After comparing frameworks, I noticed a clear pattern:

Mobile-First Frameworks: Web as a Bonus ✅

Flutter, Kotlin Multiplatform, and SwiftUI treat web as an output target—a compilation step, not a rearchitecture.

Web-First Frameworks: Mobile as Punishment ❌

React, Vue, and Angular require learning parallel frameworks (React Native, NativeScript) with different components, styling, navigation, and tooling.

Why This Asymmetry Exists

Mobile is harder. It demands:

True native performance (60fps, instant touch response)
Platform conventions (iOS feels like iOS, Android like Android)
Gesture handling, runtime optimization, app store requirements
Native API access (camera, GPS, sensors)

You can't just "port" web code and expect native feel.

Web is easier. Forgiving browsers, no gatekeepers, standardized APIs. When you build mobile-first, web becomes a compilation target—not a rearchitecture.

The WebView Trap

"Why not wrap my React app in a WebView?"

Tools like Ionic and Capacitor do this. But you sacrifice native performance and platform conventions—the very things users expect from mobile apps.

My Reality Check

"This is just React with different components, right?" Wrong.
"Why doesn't CSS work?" Rewrote all styling.
"Navigation is completely different?" Learned React Navigation from scratch.
I finally accepted the reality that "I'm learning a new framework."

The syntax similarity is almost a trap—it makes you think it'll be easier than it is.

Three Paths Forward

Option 1: Go Mobile-First

Learn Flutter, Swift/Kotlin, or native development. Web becomes your bonus output.

Pros: True native performance, web as a compilation target

Cons: New language, temporarily leaving web skills behind

Option 2: Embrace The Parallel Universe

Learn React Native as a separate framework, not "React for mobile."

Pros: Leverage some React knowledge, large community

Cons: Still a new framework, performance compromises vs native

Option 3: Wait For Web-First To Catch Up

Hope React adds --platform mobile that compiles to native.

Reality: Doesn't exist. May never exist (architectural constraints).

Practical Recommendations

For React devs considering mobile:

Try Flutter first—similar learning curve, native performance AND web
If using React Native: Use Expo, accept it's a new framework, budget 2-3 months
Consider PWAs for simple use cases

For teams choosing a stack:

Mobile-first users? Choose mobile-first frameworks (Flutter, native)
Web-first users? Build great web, then decide if you need native
Equal importance? Flutter with web output

The Bottom Line

Cross-platform has a one-way street problem:

Mobile → Web: ✅ Easy (compilation target)
Web → Mobile: ❌ Hard (rearchitecture)

Until React treats mobile as a true compilation target, web developers will face this asymmetry.

My advice: Choose your starting point wisely. If mobile is primary, start there. Web will be easier to add.

If web is primary? Make sure you need native mobile before committing to the React Native journey.

Your Turn

Have you made the jump from web to mobile? What was your experience?

Drop a comment, I'd love to hear your cross-platform war stories.

Follow me for more honest takes on modern development:

X/Twitter: @Flovet45
LinkedIn: Flovet Asong

About The Author

Full-stack designer and developer specializing in building products that actually ship. Currently exploring the messy reality of cross-platform development so you don't have to.

Follow for more: X/Twitter | LinkedIn

10 Visual studio code extensions to ease your web development

Flovet-stack — Sat, 19 Dec 2020 03:42:37 +0000

Visual studio code is the most used source-code editor in web development and I will recommend it to anyone.

It's in-built functionality and preinstalled plugins make it one the best tool to use for web dev its features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

That being said here are a few extensions that will take its utility a step further in turn increasing your web development skills.

1. Live Server

This is an essential extension for any web developer, it enables you to launch a development local Server with a live reload feature for static & dynamic pages.

Click to get Live Server for vscode

2. Auto Rename Tag

This extension helps you to rename the opening and closing tags of an element simultaneously.

Get auto rename tag here

3. Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

get Bracket pair colorizer here

4. Path Intellisense

Visual Studio Code plugin that autocompletes filenames. This will defiantly come in handy when working on a project with many files.

get path intellisense here

5. ESLint

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.

Get ESLint here

6. JavaScript (ES6) code snippets

Code snippets for JavaScript in ES6 syntax.

get javascript (ES6) code snippets here

7. Debugger for Chrome

Debug your JavaScript code in the Chrome browser or any other target that supports the Chrome Debugger protocol.

Get debugger for chrome here

8. GitLens — Git supercharged

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

get gitlens here

9. Prettier - Code formatter

If you are one who likes beautiful code well prettier is here for you it is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Get prettier here

10. Live Share

Real-time collaborative development from the comfort of your favorite tools.
Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you're using or app types you're building.
This extension is fun to use and will help you develop your collaborative skills.

Get live share here

Thanks for reading and I hope this information will take you one step closer to becoming a better web developer.

6 Best Practices for Responsive UI design

Flovet-stack — Tue, 15 Dec 2020 11:58:52 +0000

Creating responsive web designs is a routine for professional web developers therefore mastering the skill is very important.

today I will give you tips that will get your front-end skills to another level.

By the end of this article you will:

Build layouts that adapt to any screen size, creating a frustration-free user experience.
Unlock the power of breakpoints for a seamless transition between different devices.
Design text that scales beautifully, ensuring readability on any platform.
Embrace the mobile-first approach for a user-centric design experience.

1. Relative Units

using relative units is a very useful and efficient way to simplify your responsive web dev workload. as it permits you to define property values once for different screen sizes.

2. Breakpoints

Essentially, breakpoints are pixel values that a developer/designer can define in CSS.

When a website reaches those pixel values, a transformation occurs so that the website offers an optimal user experience.

Knowing the standard breakpoints for every screen size is essential in responsive web design.

3. Nested HTML Objects

Using nested HTML elements allow you to easily position the as one body other than individually as can be seen on the card in the image above.

4. Bitmap vs Vector graphic images

Bitmaps are made of pixels, while vector images are software-created and based on mathematical calculations which allows them to grow or shrink to any size without a loss in the definition of the image.

5. CSS Clamp for Fine-Tuning Typography ✨

CSS clamp allows you to define a minimum, preferred, and maximum font size for a specific element. The font size will then adjust within that range depending on the screen size.

6. Mobile or desktop first design approach

Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens while the desktop first design approach which is mostly used means designing for the highest specifications — the best achievable by design- and then going down to smaller resolutions.

Which one you use is up to you but mastering both will definitely come in handy.

Takeaways

How to use relative units for flexible layouts
The importance of breakpoints for adapting to different screens
Why nested HTML is your friend for responsive design
How vector graphics can save you from blurry images
The art of responsive typography for clear reading on any device
Mobile Users First: The Winning Approach

Installing MongoDB on ubuntu

Flovet-stack — Tue, 15 Dec 2020 11:06:19 +0000

MongoDB Is a NoSQL (not only structured query language) database management system widely used today.

The installation is done through the command line using the following commands.

First and most importantly to ensure that all plugins are up to date type the sudo apt-get update command.

Step 1:

To begin the installation we enter the command: sudo apt-get install MongoDB this will install MongoDB on your Linux system

You will be prompted to grant permission to access your drive imputing "y" for yes and pressing enter will suffice.

Step 2:

after that type, the command: sudo service MongoDB start will start the MongoDB service.

Step 3:

Finally in order to verify if the MongoDB service is up and running on your system enter the following code :
sudo systemctl status MongoDB

verify to see that it is active and running;
There you have it, you have finally installed MongoDB on your Linux system;
you can then connect to the server and wit the mongo command start working

Installing MySQL Workbench And XAMPP on Ubuntu-18.04 and higher

Flovet-stack — Tue, 27 Oct 2020 13:08:41 +0000

What is MySQL Workbench?

MySQL Workbench is a cross-platform graphical user interface tool used for MySQL database management. Mainly, this tool is used by database architects, administrators, and database developers to visualize the design of the database.

Step 1:

Download MySQL workbench from the below URL https://dev.mysql.com/downloads/Workbench
Select your operating system
select a suitable version for your operating system
After selecting the version that suits your OS, click download. On the next page, click “No thanks, just start my download”

Step 2:
Once the download is completed, you click on the downloaded file in the directory which you saved it.
A page like this will open, which is a re-direct of the workbench file in the Ubuntu App Store.

Step 3:
Once the installation process is complete, launch workbench using the app launcher.

Now let’s proceed to install XAMPP on Ubuntu 18.04 or higher

What is XAMPP?

XAMPP is the most popular PHP development environment
XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.
Reference ===> https://www.apachefriends.org/index.html

Step 1:
Select the version you want to download specific to your OS.

Step 2:
Open your terminal and navigate to the folder where you downloaded the XAMPP installer

Step 3:
write the following code into the terminal and input your password when you are prompted to

You can then proceed with the installation process