标签：#reactnative

In today's mobile-first world, users expect authentication to be both secure and effortless. Typing passwords every time an app is opened not only impacts the user experience but also introduces security risks if passwords are weak or reused. Biometric authentication solves this problem by allowing users to verify their identity using Fingerprint , Face ID , Touch ID , Iris Scanner , or even their device's PIN/Password . If you're building a React Native application, @sbaiahmed1/react-native-biometrics is one of the most comprehensive biometric libraries available. Beyond simple authentication prompts, it offers hardware-backed cryptographic key management, biometric enrollment detection, device integrity checks, StrongBox support, and compatibility with both the React Native New Architecture and Expo. In this article, we'll explore everything this library offers and learn how to integrate biometric authentication into a React Native application. Why Biometric Authentication? Traditional authentication methods come with several drawbacks: Passwords are easy to forget. Weak passwords are vulnerable to attacks. OTP-based logins can be slow and frustrating. Users often abandon apps with poor login experiences. Biometric authentication addresses these challenges by providing: 🔒 Enhanced security ⚡ Faster authentication 😊 Better user experience 📱 Native platform support 🔑 Secure fallback using device credentials Whether you're building a banking app, healthcare platform, enterprise application, or e-commerce app, biometric authentication has become an expected feature. Installation Install the package using npm: npm install @ sbaiahmed1 /react-native-biometric s or with Yarn: yarn add @ sbaiahmed1 /react-native-biometric s For iOS: cd ios pod install Platform Configuration Before using biometric authentication, configure the required permissions for both Android and iOS. Android Open your android/app/src/main/AndroidManifest.xml file and add the following permissions: <

Expo SDK 56 ships with a custom Kotlin compiler plugin that eliminates reflection from Expo Modules on Android. The result: 70% faster module initialization and a 30% reduction in time to first render. The plugin runs during compilation, so app developers get these performance gains automatically without changing any code. Module authors can unlock even bigger wins with a single annotation. This post walks through how we built it and why this approach succeeded where previous attempts failed. For the Swift side where we now talk to JSI directly, check out our companion post Talking to JSI in Swift . The reflection problem we inherited Before Expo Modules, we had Unimodules. They worked like old React Native bridge modules: you'd sprinkle annotations across methods you wanted to expose, and the runtime would discover everything through reflection. class ClipboardModule ( context : Context ) : ExportedModule ( context ) { override fun getName () = "ExpoClipboard" @ExpoMethod fun getStringAsync ( promise : Promise ) { val clip = clipboardManager . primaryClip ?. getItemAt ( 0 ) promise . resolve ( clip ?. text ?. toString () ?: "" ) } @ExpoMethod fun setStringAsync ( content : String , promise : Promise ) { clipboardManager . setPrimaryClip ( ClipData . newPlainText ( null , content )) promise . resolve ( true ) } } Reflection made sense when we needed metadata about our own code. What methods does this module export? What arguments do they accept? The JVM could answer those questions. But reflection costs time, and on Android that time comes straight out of your startup budget. Every module the runtime introspects adds milliseconds before users see your app. Building the Expo Modules API gave us a chance to fix this. We wanted better ergonomics and less reflection. The Kotlin DSL delivered both in one move, removing most reflection while making modules easier to write. But we couldn't eliminate all of it. Type information for function arguments and Record properties s

android doze kills your background tasks and nobody explains why properly been building a react native app that schedules stuff to run later. worked fine every time i tested it. shipped it, and it started missing schedules. only when the phone had been sitting idle for a while. never on my desk. took me way too long to figure out what was going on so writing it up here. what happens you schedule something for 1am. check logs next morning: 01:00:00 alarm fired 01:00:02 connected (while back grounded, 2 seconds) 01:18:xx the actual send ran the connection came up fine. in 2 seconds. while the phone was back grounded. but the code that was supposed to do something with that connection ran 18 minutes later when something else woke the phone up. why doze mode freezes javascript timers. setTimeout, setInterval, any polling loop on the js thread-all frozen. but native events (connection callbacks, lifecycle events, native module bridges) keep firing. i had a setInterval checking "are we connected yet" every second. doze froze that loop. the connection came up, nobody noticed for 18 minutes because the thing checking for it was asleep. the phone could do the work. my code just couldn't tell. stuff i tried that didn't fix it foreground service — keeps the process alive but doesn't unfreeze js timers. not the problem. more setTimeout/setInterval variations, literally the thing causing it. spent two days making the problem worse. HeadlessJS dropped in without changes compiled, never ran on newer RN. lost a few hours there. the actual fix move everything off timers. put your work directly in the event handler. instead of polling to check if you're connected: js // this is frozen by doze. don't. setInterval (() => { if ( isReady ()) doWork () }, 1000 ) do this : jsconnection . on ( ' status ' , ( state ) => { if ( state === ' connected ' ) { doWork ( job ) } }) native events survive doze. timers don't. that's the whole thing. for waking up at the right time — native AlarmManager

Every few months, a post goes viral: "Please stop using [perfectly good tool]." This time it's lucide-react. And honestly? The take is lazy What's the actual problem? Nothing. The library is actively maintained, tree-shakable, TypeScript-friendly, and has 1000+ consistent icons. A new icon library dropped? Cool. That doesn't make this one broken. Tools don't expire — context does Before switching anything in production, ask: Is it maintained? ✅ Does it solve my problem? ✅ Is my team comfortable with it? ✅ Then keep using it. Real usage — still clean in 2026 import { Search , Bell , User } from ' lucide-react ' ; export default function Navbar () { return ( < nav > < Search size = { 20 } /> < Bell size = { 20 } strokeWidth = { 1.5 } /> < User size = { 20 } color = "#6366f1" /> </ nav > ); } Tree-shaking works perfectly — only Search, Bell, and User are bundled. Not the entire library. When you should switch Unpatched security vulnerability Repo abandoned for 2+ years Bundle size issue you've actually measured If none of these apply, you're switching for hype, not logic. The real issue "Please stop using X" posts get engagement. Developers see them, second-guess stable choices, and waste hours migrating things that weren't broken. Don't let LinkedIn trends drive your architecture. Build products. Not migrations.

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built CampusBeat 2.0 — a React Native campus super-app for students across 17 colleges in Odisha, India. It started in 2023 as a simple notice board aggregator: scrape college websites so students didn't have to visit them. It worked. Students used it. Then life happened, and it sat untouched on GitHub for three years. This challenge gave me the push to finally open that repo again. What I found was equal parts embarrassing and educational. What it is now: 📰 Real-time notices for 17 colleges — ITER, KIIT, NIT Rourkela, IIT, and more 🎨 Complete UI overhaul — warm cream × charcoal × coral editorial design 🃏 3D tiltable campus identity card you can share with friends 🔖 Bookmarks — save any notice, grouped by college 💬 Real-time campus chat rooms powered by Socket.io 🛒 Campus marketplace — buy/sell within your college 🔔 Push notifications via Firebase Demo The original app from July 2023: LinkedIn post CampusBeat 2.0 — running on device: Onboarding screen - with beautiful animation Onboarding.mp4 - Google Drive drive.google.com Login screen — editorial serif heading, Lottie animation, warm ink hero Register screen — custom college picker bottom sheet with live search Home screen — quote card, college notice feed, floating tab bar Profile screen — 3D tiltable campus card with holographic shimmer Share modal — drag to rotate the card, share natively News Explorer — college chips, notice type tabs, live banner Marketplace — buy and sell within your college Bookmark - your persistent news bookmark.mp4 - Google Drive drive.google.com Chat screen - live interaction within colleges chat.mp4 - Google Drive drive.google.com The Comeback Story What I found after 3 years Opening an old repo is humbling. Here is what I walked into. The dead API. The home screen showed a daily quote — except quotable.io had shut down. Every user was silently seeing the hardcoded fallback for three years: "Villains are not bad, the

Forms are everywhere in mobile apps - authentication flows, data entry, support requests, onboarding... If your app has a login screen, a form is likely the first thing a new user interacts with. That makes accessibility here not just a nice-to-have, but a first impression. The problem is that forms are consistently one of the most broken areas for assistive technology users. Missing labels, keyboard traps, silent validation errors, focus going nowhere after submission - these are issues that make an app unusable for a significant portion of your users. This guide is a complete reference for building forms that work for everyone in React Native, whether users are navigating with their fingers, an external keyboard, a screen reader or voice input. Code examples throughout show both what to do and why . A fully working demo repo is available to fork and test on a real device - check it out at rn-accessible-form-demo . Labels Every form field needs a label, whether a text input, checkbox or radio/submit buttons. No exceptions. Don't rely on placeholders Placeholder text disappears the moment a user starts typing. Screen readers will read it initially, but once it's gone, there's no way for them to recall what the field was for without clearing their input. Placeholders are useful as hints, not as labels. Use a visual label + accessibilityLabel To avoid screen readers announcing the same information twice (once for the visual label, once for the input), hide the visual label from assistive technology and put the full label on the input itself. < Text importantForAccessibility = "no" accessibilityElementsHidden > Email address* </ Text > < TextInput accessibilityLabel = "Email address, required" /> importantForAccessibility="no" handles Android, and accessibilityElementsHidden handles iOS. Together they tell assistive technology to skip the visual label entirely - the accessibilityLabel on the TextInput is the single source of truth for screen readers. Required fields De

Hi everyone, Kacper and Filip from Software Mansion here. This week, TanStack Start is once again in the spotlight. The React Compiler in Rust is on its way. React Router and Remix shipped important security patches – update immediately. There's also a fresh batch of releases from TanStack Form, XState Store, shadcn, React Aria, and more. On the React Native side, this week was dominated by App.js Conf 2026 in Kraków. Gesture Handler 3.0, Swift Package Manager support for React Native, and Legend List 3.0 were among the highlights, alongside Expo announcements like EAS Observe. Let's go! 💡 Subscribe to the official newsletter to receive an email every week! 💸 Sponsor Atomic CRM: The Open-Source CRM Toolkit for Developers Stop struggling with locked-in CRMs and expensive seats. Atomic CRM gives you the power of a professional CRM with the total freedom of open-source. It’s the only toolkit that combines a high-end user experience with data sovereignty. No more lock-in, no more "renting" your contacts. Everything you need is already there: Native Mobile App for on-the-go access. Intuitive Kanban Boards for pipeline management. Built-in Email Tracking to stay on top of leads. Free SSO for seamless team integration. MCP Server Integration for productivity gains. Why settle for a black box SaaS when you can own the entire platform? Deploy Atomic CRM on your own infrastructure in minutes and regain control over your most valuable asset: your data. ⚛️ React TanStack Start Gaining Momentum: 📜 TanStack Start Adds First-Class Rsbuild Support - TanStack Start now supports Rsbuild / Rspack alongside Vite via a new plugin adapter, covering SSR, streaming, HMR, Server Functions, and RSC. 📜 Lovable - Building apps using TanStack Start - The AI App builder is now using TanStack Start with SSR by default for all new projects. 📜 The Conductor Rewrite: What They Changed to Make It Fast - Migrating their Tauri desktop app from React Router to TanStack Router significantly reduced re-re

AWS Face Liveness has native SDKs for iOS and Android. That works well if you are building fully...

I’m building Obex, a faith-rooted self-control app for men who want to quit porn and stay consistent with daily discipline. The stack is Expo / React Native, with a web landing page and a desktop blocker companion. Core features: Streak tracking and rank progression Panic Mode for urgent moments Accountability partners Blocker support on desktop Christian-focused language and reminders The goal is to make the product feel practical rather than preachy. People usually respond better to clear feedback loops, a visible streak, and a calm recovery path after setbacks. If you want to see it or give feedback, the site is here: https://obex.so

Stop Shipping 20 Locale Files in React Native: On-Device Translation for Dynamic Language Packs Internationalization in mobile apps usually starts clean and then gets expensive. At first, you keep a couple of JSON files: en.json es.json fr.json That works when your product is small and the set of languages is stable. It breaks down when: you want to support many languages the product team keeps changing copy translated files drift out of sync some languages are only partially used you do not want to run every string through a server-side translation pipeline This is the problem @tcbs/react-native-language-translator is trying to solve. It lets a React Native app keep a source language, translate missing keys on device, and cache the generated language pack locally. Package: @tcbs/react-native-language-translator The problem Many React Native apps treat localization as a static asset problem: keep one JSON file per language ship all of them in the app update all of them whenever English changes That model has real costs. 1. Translation files become operational debt Every new feature adds more keys. Every copy change forces translators to update multiple locale files. Over time, the translation layer becomes a maintenance queue. The result is predictable: missing keys stale translations untranslated fallback strings inconsistent release quality across languages 2. Shipping many locales is wasteful Most users only need one target language. But many apps ship every locale anyway. That increases bundle size and creates a lot of dead weight for users who will never use most of those files. 3. Dynamic product copy is hard to localize well If your app changes quickly, static translation files lag behind. Teams either accept stale translations or build a backend workflow to keep everything synchronized. That is often more infrastructure than the app actually needs. 4. Server-side translation is not always the right tradeoff Calling a translation API at runtime introduces: la

If you've spent any time building React Native apps, you've already bumped into the question. You're setting up a new project, you need to move users between screens, and suddenly you're 40 minutes deep in a documentation rabbit hole wondering whether to go with the familiar React Navigation setup or take the leap to Expo Router. This article is going to break it all down, no hype, no fanboy energy, just an honest look at both options so you can make the call that actually fits your project. First, What Does "Routing" Even Mean in a Mobile App? On the web, routing is pretty intuitive. You type a URL, the browser goes to a page. Simple. In mobile apps, there's no URL bar, no browser history button, nothing like that. But users still need to move between screens, go back to where they came from, open modals, tab between sections, and all of that has to feel smooth and natural. So in mobile development, routing is basically the system you use to manage how screens stack on top of each other, how state is preserved when you go back, how deep links work, and how the app knows which screen to show based on where the user is in the flow. Think of it like this: routing is "moving between screens while keeping your app's memory intact." When someone logs in, fills out a form, gets distracted and opens a modal, then comes back, the app should remember all of that. Routing is the machinery underneath that makes it happen. In React Native, this doesn't come out of the box. The framework gives you the building blocks, but you have to wire up the navigation yourself. That's where libraries come in. Why Navigation Is Such a Big Deal in React Native React Native apps are essentially single-page applications. Everything runs in one JavaScript thread, rendered to native views. There's no browser doing the heavy lifting of managing history or transitions. You're responsible for it all. Bad navigation kills good apps. A janky transition, a broken back button, a modal that doesn't dismi

Most QR scanner libraries for React Native share the same problems — they're unmaintained, they don't support the New Architecture, or they pull in a full camera SDK for what is a single-feature module. I wanted something lean, production-grade, and built the right way. So I built it. This is react-native-qr-camera-pro — a QR and barcode scanner for React Native built entirely with native code. No JavaScript frame processing. No unnecessary dependencies. Swift on iOS, Kotlin on Android, TurboModules and Fabric throughout. Why Native-Only? The common alternative is running frame analysis in JavaScript — grabbing frames via a JS-accessible camera API and running a WASM or JS barcode decoder on them. It works, but it puts real pressure on the JS thread and limits your frame rate. With native-only processing: iOS uses AVCaptureMetadataOutput — Apple's own pipeline for detecting machine-readable codes. Frames are never copied to user space; the kernel hands off a reference to the same buffer. Android uses CameraX ImageAnalysis + ML Kit — Google's on-device barcode scanner backed by hardware-accelerated inference where available. The JS bridge is touched at most once every 500ms to deliver a result. Everything else stays native. Architecture The module is three layers: Architecture The module is three layers, each with a single responsibility: Layer What it does JavaScript / TypeScript Public API — QrCameraProView , startScanning() , stopScanning() , toggleTorch() , useBarcodeScanner() , useCameraError() Native Bridge (TurboModules + Fabric) Type-safe JSI communication between JS and native. Codegen spec drives both the iOS C++ adapter and the Android Kotlin stub. Native Platform (iOS + Android) All camera and barcode logic. AVFoundation on iOS, CameraX + ML Kit on Android. Zero JS involvement in frame processing. iOS (Swift) Class Responsibility QrCameraProSwift Owns the AVCaptureSession lifecycle BarcodeThrottler Throttle + dedup logic BarcodeTypeMapper Maps AVMetadataO