DEV Community: mutalibb

Tips I Learned While Working on React Native

mutalibb — Tue, 02 Sep 2025 11:32:48 +0000

I’ve worked on a couple of apps using React Native and Firebase, and along the way, I’ve learned a lot. I decided to share some of the little things I picked up that might help you too.

1. Find What Works for You

When I started, I tried splitting everything into small chunks and files (since that’s one of React’s strengths). But for me, fixing mistakes and constantly switching between files was stressful. Now, I prefer to keep my style and logic in the same file, except for functions I’ll reuse multiple times, which I move to a components folder. This way, if there’s a bug, I know exactly which file to open and can fix it faster.

This is just my personal workflow. For larger projects, splitting code into smaller files is still better for long-term maintainability.

2. Remember React Native is Still React

React Native runs on React under the hood. That means all your React knowledge still applies, especially hooks like useState, useCallback, and useEffect. Using them properly can help with performance optimization just like in React for the web.

3. Stay Up to Date and Read Documentation

This one saved me multiple times. For example, I once tried building a custom switch input from scratch and it was stressful. Later, while reading the Expo SDK docs, I discovered newer versions of React Native (and the Expo SDK) already provided this and many other built-in components like CheckBox, Switch, and Network APIs. If I hadn’t checked the docs, I’d have wasted more time reinventing the wheel.

The same goes for Firebase integration. The Expo SDK had updated guides that simplified setup. Staying updated with documentation makes life much easier.

4. Choose Well-Maintained Packages

If you’re installing packages from npm and there are multiple options, always go for the one that is actively maintained and updated. This will save you from broken code when upgrading your project later.

5. Understand Hooks and Why They Exist

Hooks aren’t just there for fun. They solve real problems. For example, when working on Clan Circle, I noticed my Firebase bill was getting too high. After debugging, I realized multiple useEffect calls were running every time the app started, fetching data from screens users never even visited.

My fix: I used useCallback wrapped inside useFocusEffect. Now, data only loads when the user opens a screen and stops listening when they leave. I also replaced some onValue listeners with get() (fetch once) where real-time updates weren’t needed. This saved me about 70% of my Firebase costs.

6. Read Documentation (Again)

Honestly, more than once I spent hours Googling or asking AI for help, only to later realize the answer was right in the official docs. Many times, 10–15 minutes of reading the docs fixed my bug instantly.

7. Use TypeScript

While Metro bundler gives good error messages, TypeScript catches issues much earlier. It helps prevent silly mistakes and speeds up development overall.

8. Learn the Native Languages (Bonus)

Knowing the official languages like Kotlin for Android and Swift for iOS can be really helpful. Sometimes, new functionalities are available in native SDKs long before they arrive in React Native or Expo. With some knowledge of Kotlin or Swift, you can implement native modules when needed.

👉 That’s it! These are some of the lessons I’ve learned while working with React Native. I hope they help you avoid some of the mistakes I made.

Deploying a MERN Project to Vercel: Frontend and Backend Separately

mutalibb — Tue, 05 Nov 2024 16:58:20 +0000

Today, I will give step-by-step instructions on how to deploy a MERN project to Vercel, with the frontend and backend deployed separately.

1. Create Project Directory:

   mkdir mernproject
   cd mernproject

2. Initialize Node Project:

  npm init -y

3.Install Express:

npm install express

4. Install Other Necessary Packages for Backend:

npm install cors body-parser dotenv mongoose

5. Create .env File:

touch .env

Add your tokens and other sensitive information in this file.

6. install Nodemon:

npm install --save-dev nodemon

This will automatically restart your project when you save.

7.Create Server File:

touch server.js

8.Set Up React:

npx create-react-app client

Replace client with the name of the folder you want your frontend to be in. In this case, I use client.

9. Build Frontend:

when you are done coding and it's time to deploy:

cd client
npm build
git add .
git commit -m "Build frontend"
git push origin main

10. Deploy Frontend to Vercel:

If you have already initialized Vercel with GitHub, you will see your project in Vercel.
Import your project in Vercel.

11.Copy Frontend Link:

Copy the link generated by Vercel.

12 Update Backend:

app.use(
  cors({
    origin: 'frontend link',
  })
);

13.Deploy Backend to Vercel:

At the root of your project, create a vercel.json file and add the following code inside:

{
  "version": 2,
  "builds": [{ "src": "server.js", "use": "@vercel/node" }],
  "routes": [{ "src": "/(.*)", "dest": "server.js" }]
}

This will tell Vercel the entry point of your project. If the entry point is not server.js, replace server.js with the entry point of your server.
Create a .gitignore file:

touch .gitignore

Add node_modules, .env, and frontend-folder to .gitignore.
Ensure your frontend folder is in .gitignore because you don't need to deploy that again.

14. Push to GitHub and Upload to Vercel:

Push your folder to GitHub and upload to Vercel.

15. Set Environment Variables in Vercel:

Go to your project directory in Vercel, click on settings, click on environment variables, import your .env file, and save.
Make sure you're in your imported backend directory after successfully uploading before uploading the variables.

After these steps, your project will work perfectly as it does in development mode.

open-source project

mutalibb — Mon, 16 Sep 2024 23:24:09 +0000

Hi guys are there any open-source JavaScript or JavaScript frameworks project I can contribute in

king's clean.

mutalibb — Sat, 06 Jul 2024 20:42:50 +0000

cleaning service landing page
For this, I used CSS Grid and Flex. They allow me to focus more on the design and worry less about different screen sizes. CSS Grid and Flex are perfect for creating responsive layouts; they fit and display beautifully on all kinds of screens without requiring media queries. This is a cleaning company landing page—a demo I designed to showcase how a simple page can include all the necessary details without the need for navigation between pages.

Tribute page

mutalibb — Sat, 06 Jul 2024 05:16:30 +0000

Bootstrap is a CSS framework. Its responsive layout and pre-styled components make it my choice for this project. The intentionally large images draw attention, as they depict the subject of the page. I used the carousel component to create a scrollable image display.

Additionally, I included Scroll spy, Collapse, and Card components to enhance the page’s appearance and provide a better user experience. The logo is styled using CSS box shadow and animation.