DEV Community: Tech Nexa

From 0 to 1,000 Scans: The Journey of Building a React Native QR Scanner App

Tech Nexa — Thu, 16 Oct 2025 14:45:35 +0000

Hello, Dev Community!

Today, I want to share a story that’s about more than just writing code. It's about solving a problem, relentless learning, and finally, bringing an idea from a local machine to the hands of thousands of users. This is the journey of building ScanQR—my first major mobile application, now live on the Google Play Store.

This isn't just a "look what I made" post. This is a detailed map of how a modern, high-performance app is born, from the core business logic to the actual code snippets that make it all work.

📲 Download ScanQR for Free on Google Play and See It in Action!

Part 1: The Problem - Why Build Another QR Scanner?

The market is flooded with scanner apps, but I always felt something was missing. Most apps fell into one of these traps:

Slow and Ad-Ridden: The user experience was constantly interrupted.
Too Simple: They just scanned links, with no intelligent features.
Uninspired: Lacked any creative features, like a personalized QR code generator.

I wanted an all-in-one tool: lightning-fast, intelligent, secure, and one that empowers user creativity. That was the vision that led to ScanQR.

Part 2: The Heart of ScanQR - A Deep Dive into Core Features and Code

Let's dissect the features that make ScanQR stand out and look at the exact React Native code that brought them to life.

1. The High-Speed, Performance-Optimized Scanner Engine

This is the most critical feature. A slow scanner is a useless scanner.

The User Experience: Instantly scan codes, even in low light or when they're slightly damaged.
Inside the Code: I used react-native-vision-camera with its useCodeScanner hook. But I didn't just call the function; I heavily optimized it to prevent re-scans and reduce CPU load.

Here’s the core logic:

// ScanScreen.tsx

const lastValueRef = useRef<string>('');
const frameCountRef = useRef(0);
const debounceUntilRef = useRef(0);

const codeScanner = useCodeScanner({
  codeTypes: Platform.OS === 'ios' ? CODE_TYPES_IOS : CODE_TYPES_ANDROID,
  onCodeScanned: codes => {
    // Only process every Nth frame to save battery
    frameCountRef.current =
      (frameCountRef.current + 1) % SCAN_EVERY_NTH_FRAME;
    if (frameCountRef.current !== 0) return;

    // "Debounce" Logic: Block rapid, repetitive scans
    const now = Date.now();
    if (now < debounceUntilRef.current) return;

    const raw = codes[0]?.value?.trim();
    if (!raw) return;

    // If the code is identical to the last one, wait a bit
    if (raw === lastValueRef.current) {
      debounceUntilRef.current = now + 1000; // Wait 1 second
      return;
    }

    lastValueRef.current = raw;
    debounceUntilRef.current = now + 1200; // Set a cooldown for the new code

    // Parse and display the result
    const parsed = parseLink(raw);
    setResult(parsed);
    bottomSheetRef.current?.expand();
    haptic(); // Trigger haptic feedback
  },
});

Dev Analysis:

frameCountRef: A simple but effective trick to skip frames. This significantly reduces CPU usage and improves battery life.
debounceUntilRef & lastValueRef: This is a manual debouncing technique. It prevents the app from processing the same QR code dozens of times a second, which would cause the UI to stutter and create a jarring experience.

2. Smart, Context-Aware Actions

ScanQR doesn't just show you a string of text. It understands the content and suggests the appropriate action.

The User Experience: Scan a URL, get an "Open" button. Scan a phone number, get a "Call" button. Scan Wi-Fi credentials, get a "Copy Password" action.

Inside the Code: This logic lives in the primaryAction function. It's a large switch statement that operates on the result from my custom parseLink function.

Here's a snippet:

// ScanScreen.tsx

const primaryAction = async () => {
  if (!result) return;
  switch (result.kind) {
    case 'URL':
      await Linking.openURL(result.href);
      break;
    case 'PHONE':
      await Linking.openURL(`tel:${result.number}`);
      break;
    case 'EMAIL': {
      // ... logic to build email query params ...
      await Linking.openURL(`mailto:${result.to ?? ''}?${qp.toString()}`);
      break;
    }
    case 'WIFI':
      Clipboard.setString(
        `WIFI:T:${result.encryption};S:${result.ssid};P:${result.password};;`,
      );
      Toast.show({
        type: 'success',
        text1: t('message.copied_to_clipboard'),
      });
      break;
    // ... many more cases for vCard, SMS, Geo, Crypto ...
    default:
      if ('text' in result) {
        Clipboard.setString(result.text);
        Toast.show({ /* ... */ });
      }
      break;
  }
};

Dev Analysis: Separating the parsing logic (parseLink) from the action logic (primaryAction) keeps the code clean and maintainable. Using React Native's built-in Linking and Clipboard APIs allows for deep integration with the operating system.

3. Scan QR Codes from the Image Gallery

This is a convenient feature that many users requested.

The User Experience: Pick a photo containing a QR code from your gallery, and ScanQR will instantly recognize it.
Inside the Code: I combined two powerful libraries: react-native-image-crop-picker for selecting the image and @react-native-ml-kit/barcode-scanning for analyzing the static image.

The implementation is quite straightforward:

// ScanScreen.tsx
import ImageCropPicker from 'react-native-image-crop-picker';
import BarcodeScanning from '@react-native-ml-kit/barcode-scanning';

const onImagePicker = () => {
  ImageCropPicker.openPicker({ mediaType: 'photo' })
    .then(async image => {
      if (!image?.sourceURL && !image?.path) return;
      try {
        const uri = image.sourceURL ?? image.path;
        // Use ML Kit to scan the code from the image's URI
        const barcodes = await BarcodeScanning.scan(uri);
        const raw = barcodes?.[0]?.value?.trim();

        if (!raw) throw new Error('No barcode found');

        // Reuse the same parsing and display logic
        const parsed = parseLink(raw);
        setResult(parsed);
        bottomSheetRef.current?.expand();
        haptic();
      } catch {
        Toast.show({ type: 'error', text1: t('message.invalid_qr_code') });
      }
    })
    .catch(err => { console.log('Image picker error', err); });
};

Dev Analysis: The beauty here is reusability. Once I get the raw data from the image, I pass it through the exact same processing flow (parseLink, setResult, expand bottom sheet) as a camera scan. This is efficient and reduces code duplication.

Part 3: The Final Stretch - Publishing to the Google Play Store

Finishing the code is only half the battle. The publishing process is a whole other challenge:

Creating the App Bundle (.aab): Learning the process of signing and generating a production-ready build for Google Play.
Crafting the Store Presence: Designing an icon, taking screenshots, and writing compelling, SEO-friendly descriptions for the app page.
Privacy Policy: This is a must. I created a simple, clear privacy policy on GitHub Pages, committing to user privacy.
The Anxious Wait: Submitting the app and waiting for Google's review. The feeling of seeing that "Your app is now live" email is indescribable!

Conclusion and Your Invitation

The journey of building ScanQR has taught me so much about React Native, performance optimization, and the full product development lifecycle.

It was built with a developer's passion but designed for everyone. If you're looking for a powerful, privacy-respecting, and completely free QR code tool, please give ScanQR a try.

Download the App: Link

Put It to the Test: Scan everything, generate your own codes, and experience the difference.
Leave Feedback: Your reviews and suggestions are invaluable and will help shape the future of the app.

Thank you for reading my story. I hope it inspires anyone out there with a project idea of their own!

A question for my fellow devs: What was the biggest technical hurdle you've ever faced in a personal project? Share it in the comments below!

A Personal Guide to Setting Up React Native on Mac: My Journey

Tech Nexa — Sun, 12 Oct 2025 15:29:22 +0000

Hello, future teammate!

If you're reading this, I bet you're just as excited as I was to start building amazing mobile apps with React Native. It's an awesome choice! I've been exactly where you are now: thrilled, but also a little overwhelmed by the sheer number of tools you need to install.

This isn't another dry, technical document. This is my journal, my "lessons learned the hard way," shared with the hope of making your path a little smoother. Let's get started together!

Step 1: Gearing Up with the Right Tools

Just like a skilled carpenter needs a good set of chisels and a sturdy workbench, we need a solid foundation of software tools.

Homebrew - Your Ultimate Butler:

Think of Homebrew as your personal tech butler. Instead of hunting for download links on countless websites, you just type a command, and Homebrew fetches and installs everything for you. If you haven't met it yet, open your Terminal and summon it with this spell:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Official Docs: Homebrew Website

Node.js & Watchman - The Heart and the Pulse:

Node.js is the 'heart' that pumps life into your JavaScript code. It's the environment where everything runs.
Watchman is the 'pulse.' It's a little tool from Facebook that keeps an eye on your files. The moment you save a change, Watchman sees it and tells your app to reload instantly. This is the magic behind "Fast Refresh."

Let's get them both with our new butler, Homebrew:

brew install node
brew install watchman

Official Docs: Node.js & Watchman

Step 2: The iOS Adventure

To build apps for iPhones and iPads, we need to enter Apple's world. Xcode is the key.

1.Install Xcode: The best place to get this is the Mac App Store. A friendly warning: it's a huge file. This is a perfect time to go make a fresh cup of coffee (or two). It'll take a while.

Official Docs: Xcode on the Apple Developer Website

2.Set Up Command Line Tools: Once Xcode is installed, open it up. Go to Xcode > Settings > Locations. In the dropdown for "Command Line Tools," make sure a version is selected. This is like telling your Mac, "Hey, I've got all these cool new tools from Xcode, and you're allowed to use them from the Terminal."

3.CocoaPods - The Librarian:
Almost every iOS project uses extra bits of code from other developers, called libraries. CocoaPods is the friendly librarian that manages all of these for you. Let's install it:

sudo gem install cocoapods

Official Docs: CocoaPods Website

Step 3: The Android Quest

Android setup can feel like a side quest with a few more steps, but trust me, the feeling of seeing your app run on both platforms is worth it.

1.Java Development Kit (JDK) - The Lingua Franca:

Android's native language is Java/Kotlin, so we need a JDK to help React Native talk to it. Let's have Homebrew handle this for us:

brew install --cask zulu@17

After the JDK installation, add or update your JAVA_HOME environment variable in ~/.zshrc (or in ~/.bash_profile).

If you used above steps, JDK will likely be located at /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

2.Android Studio - The Command Center:
Download and install Android Studio from Google's website. During the setup, choose "Custom" installation and make sure these are checked:

Android SDK
Android SDK Platform
Android Virtual Device (this lets you create phone emulators)
Official Docs: Android Studio Website

3.Teaching Your Terminal the Way - Environment Variables:

This is the step where many people get stuck, but it's not as scary as it looks. We just need to leave a note for our Terminal telling it where to find all the Android tools.

Open your ~/.zshrc file (it's a hidden file in your home directory) and add these lines at the bottom:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

After you save it, close and reopen your Terminal. This simple step makes sure that when you type a command like emulator, your computer knows exactly where to look.

Learn more: React Native Docs on Environment Variables

Step 4: The "It's Alive!" Magic Moment

Alright, the stage is set. It's time to bring your first creation to life.

1.Create Your Project:
In your Terminal, run this command. MyFirstApp can be whatever you want to name your project.

npx @react-native-community/cli@latest init MyFirstApp

2.Step Inside:

cd MyFirstApp

2.1.Run on IOS:
npm run ios
This will automatically boot up the iOS Simulator and you should see your app pop up. It's a magical feeling the first time!

2.2.Run on Android:

Run on Android:
First, open Android Studio and start an emulator from the AVD Manager. Then, in your terminal, run:
npm run android
And voilà! The same app, running on a completely different system.

Don't Panic! We've All Been There (Troubleshooting)

If you hit a roadblock, take a deep breath. Every single developer has faced these errors. You're not alone. Here are some common hurdles:

The Problem: pod install fails on your shiny new M1/M2/M3 Mac.
The Story: Your Mac's chip speaks a new language (ARM), but some old tools still speak the old one (x86). Sometimes they get lost in translation.
The Fix: Tell your Mac to use its built-in translator, Rosetta.

cd ios
arch -x86_64 pod install

The Problem: Android build complains it "can't find SDK location."
The Story: The message you left in ~/.zshrc got lost, or you forgot to restart the Terminal.
The Fix: Double-check the path in ~/.zshrc. If it's still not working, you can leave a more direct note inside the project. Create a file at android/local.properties and put this inside (remember to change YOUR_USERNAME!):

sdk.dir = /Users/YOUR_USERNAME/Library/Android/sdk

Your Journey Begins Now

And there you have it! You've successfully built your launchpad. The road ahead is filled with exciting challenges, learning, and the incredible joy of creating something from scratch. For your next steps, the official React Native documentation is your best friend.

Dive Deeper: React Native Official Documentation

Welcome to the club. Happy coding!

A Personal Guide to Setting Up React Native on Mac: My Journey

Tech Nexa — Sun, 12 Oct 2025 15:29:22 +0000

Hello, future teammate!

This isn't another dry, technical document. This is my journal, my "lessons learned the hard way," shared with the hope of making your path a little smoother. Let's get started together!

Step 1: Gearing Up with the Right Tools

Just like a skilled carpenter needs a good set of chisels and a sturdy workbench, we need a solid foundation of software tools.

Homebrew - Your Ultimate Butler:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Official Docs: Homebrew Website

Node.js & Watchman - The Heart and the Pulse:

Node.js is the 'heart' that pumps life into your JavaScript code. It's the environment where everything runs.
Watchman is the 'pulse.' It's a little tool from Facebook that keeps an eye on your files. The moment you save a change, Watchman sees it and tells your app to reload instantly. This is the magic behind "Fast Refresh."

Let's get them both with our new butler, Homebrew:

brew install node
brew install watchman

Official Docs: Node.js & Watchman

Step 2: The iOS Adventure

To build apps for iPhones and iPads, we need to enter Apple's world. Xcode is the key.

1.Install Xcode: The best place to get this is the Mac App Store. A friendly warning: it's a huge file. This is a perfect time to go make a fresh cup of coffee (or two). It'll take a while.

Official Docs: Xcode on the Apple Developer Website

sudo gem install cocoapods

Official Docs: CocoaPods Website

Step 3: The Android Quest

Android setup can feel like a side quest with a few more steps, but trust me, the feeling of seeing your app run on both platforms is worth it.

1.Java Development Kit (JDK) - The Lingua Franca:
Android's native language is Java/Kotlin, so we need a JDK to help React Native talk to it. Let's have Homebrew handle this for us:

brew install --cask zulu@17

After the JDK installation, add or update your JAVA_HOME environment variable in ~/.zshrc (or in ~/.bash_profile).

If you used above steps, JDK will likely be located at /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

2.Android Studio - The Command Center:
Download and install Android Studio from Google's website. During the setup, choose "Custom" installation and make sure these are checked:

Android SDK
Android SDK Platform
Android Virtual Device (this lets you create phone emulators)
Official Docs: Android Studio Website

3.Teaching Your Terminal the Way - Environment Variables: **
This is the step where many people get stuck, but it's not as scary as it looks. We just need to leave a note for our Terminal telling it where to find all the Android tools.
Open your **~/.zshrc file (it's a hidden file in your home directory) and add these lines at the bottom:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

After you save it, close and reopen your Terminal. This simple step makes sure that when you type a command like emulator, your computer knows exactly where to look.

Learn more: React Native Docs on Environment Variables

Step 4: The "It's Alive!" Magic Moment

Alright, the stage is set. It's time to bring your first creation to life.

1.Create Your Project:
In your Terminal, run this command. MyFirstApp can be whatever you want to name your project.

npx @react-native-community/cli@latest init MyFirstApp

2.Step Inside:

cd MyFirstApp

2.1.Run on IOS:
npm run ios
This will automatically boot up the iOS Simulator and you should see your app pop up. It's a magical feeling the first time!

2.2*Run on Android:*
Run on Android:
First, open Android Studio and start an emulator from the AVD Manager. Then, in your terminal, run:
npm run android
And voilà! The same app, running on a completely different system.

Don't Panic! We've All Been There (Troubleshooting)

If you hit a roadblock, take a deep breath. Every single developer has faced these errors. You're not alone. Here are some common hurdles:

The Problem: pod install fails on your shiny new M1/M2/M3 Mac.
The Story: Your Mac's chip speaks a new language (ARM), but some old tools still speak the old one (x86). Sometimes they get lost in translation.
The Fix: Tell your Mac to use its built-in translator, Rosetta.

cd ios
arch -x86_64 pod install

The Problem: Android build complains it "can't find SDK location."
The Story: The message you left in ~/.zshrc got lost, or you forgot to restart the Terminal.
The Fix: Double-check the path in ~/.zshrc. If it's still not working, you can leave a more direct note inside the project. Create a file at android/local.properties and put this inside (remember to change YOUR_USERNAME!):

sdk.dir = /Users/YOUR_USERNAME/Library/Android/sdk

Your Journey Begins Now

Dive Deeper: React Native Official Documentation

Welcome to the club. Happy coding!