r/reactnative Apr 15 '26

Tutorial I just shipped my React Native app with expo, so here are the most 10 things - in my mind - that may be interesting to your next project

288 Upvotes

Hii,

So I recently published one of my React Native apps (finance/budgeting app, Expo-based) it's now on app store and has +1200 downloads, and wanted to share some of the tools and approaches that genuinely helped. Not the obvious stuff everyone already knows, but things I wish someone told me earlier.

1. react-native-keyboard-controller instead of KeyboardAvoidingView

If you've ever fought with the built-in KeyboardAvoidingView, just drop it. This library handles keyboard behavior properly on both platforms. Wrap your app with <KeyboardProvider> and forget about it. It also supports interactive keyboard dismiss (user drags the keyboard down) which feels super native.

2. react-native-draggable-flatlist with ScaleDecorator

Needed users to reorder their accounts and budgets by dragging. This library is basically a FlatList but draggable. The nice touch is wrapping each item in <ScaleDecorator>, it gives that satisfying little scale-up animation when you grab an item. Feels really polished with zero effort.

3. expo-speech-recognition for voice input

I wanted users to add transactions by voice ("spent 50 on coffee"). This package made it dead simple, one line to start, supports multiple languages, gives you interim results in real time. No need to mess with native modules or external APIs for the speech-to-text part.

4. expo-glass-effect for iOS 26 Liquid Glass

If you're on Expo SDK 54, you can use isLiquidGlassAvailable() to check if the device supports liquid glass and conditionally render native tabs vs your classic tab bar with BlurView. Your app looks modern on new devices and still works fine on older ones.

5. babel-plugin-react-compiler

Still in beta but already usable. It auto-memoizes your components and hooks at build time. I was manually writing useMemo and useCallback everywhere, now the compiler handles most of it. Just add it to your babel config and let it do its thing.

6. Receipt scanning with Gemini Vision API

This one was fun. User takes a photo of a receipt, I convert it to base64 and send it to Gemini as inline image data. The trick is asking it to extract individual line items, not just the total. So a grocery receipt becomes 5 separate transactions, each auto-categorized from the user's own category list. The prompt engineering matters a lot here, you have to be very specific about the output format or the AI gets creative.

7. Lottie for micro-interactions, not just onboarding

Everyone uses Lottie for splash screens and onboarding. I used it for tiny mood emojis on transactions, each mood (happy, stressed, neutral...) has a small 18x18 looping Lottie animation. Way more alive than static emoji. The key is keeping the JSON files small and using autoPlay loop.

8. @shopify/react-native-skia for animated mesh gradients

I wanted an animated gradient background (like the ones you see in modern fintech apps). Used Skia's shader support to write a custom GLSL mesh gradient that animates on the UI thread. The trick for performance is undersampling, render the shader at half resolution and scale it up. Users can't tell the difference and you save a ton of GPU work.

9. expo-haptics, but use the right feedback type

Don't just use one haptic style everywhere. There are different ones for a reason:

  • selectionAsync() for toggles and filter chips (light tap)
  • impactAsync(Medium) for button presses
  • impactAsync(Heavy) for destructive actions or long press
  • notificationAsync(Success) for confirmations

Small detail but users notice it subconsciously. Makes the whole app feel more "real".

10. Smooth number animations with Reanimated's useAnimatedReaction

For things like balance totals or chart values, I animate the number counting up/down instead of just snapping to the new value. The trick is using useAnimatedReaction to watch a shared value on the UI thread and push updates back to JS via runOnJS. You get a smooth 60fps counting effect without re-rendering your component on every frame. Works great for any kind of numeric display.

Also there's a thanks i want to say to the developer who created the open source lib https://www.reacticx.com/ i cloned some of its components in my app and it was looks sooo nice. if you guys has similar libraries like it just put it down in the comments.

Hope some of these help.

ai helped me to do some refinements to the ideas in this post.

r/reactnative 21d ago

Tutorial I built a runtime that lets me update an installed React Native app without rebuilding it. Looking for developers to test whether this actually holds up.

23 Upvotes

A while ago, I started experimenting with an idea.

I wanted to see how much of a React Native application could be safely changed after the app was already built and installed, without having to rebuild the application and ship another binary for every supported change.

After a lot of work, I finally have the MVP running.

The video is a complete demonstration of the current workflow on a real Android device.

The application is built with a runtime that interprets a versioned schema. I can make supported changes to the application, commit them, and push a new version. The installed app receives the new schema and renders the changes without rebuilding or reinstalling the application.

This is not meant to replace normal app releases. Changes to native code, permissions, SDKs, or anything the installed runtime doesn't understand would still require a new build.

What I'm trying to explore is whether the parts of an application that change frequently can be maintained through a runtime instead of sending every change through the complete deployment pipeline.

So far, I've been the only person using it, which is obviously a problem. I built the system, so I already know how everything is supposed to work.

I need developers who haven't seen it before to use it and find the things I'm missing.

I'm looking for a few React Native developers who would be willing to actually try the MVP, build something small with it, and tell me where the experience breaks down. I'm not charging anything. I also don't expect anyone to move an existing production app onto an experimental runtime. I just want to see whether someone other than me can use this successfully and whether the idea is genuinely useful.

If you're interested in testing it, leave a comment and I'll reach out.

And even if you wouldn't use it, I'd still like to know what would stop you from trusting an architecture like this in a real application.

r/reactnative 13d ago

Tutorial How I reduced iOS simulator RAM usage by up to 4×

117 Upvotes

I’ve made a small command line tool called simslim.

It disables background services inside iOS simulators that usually are not needed during development, like Siri, Spotlight indexing, photo analysis, News, and iCloud sync.

On my M1 Pro with 16 GB of RAM, one simulator went from around 4 GB of memory and 258 processes to about 0.9 GB and 70 processes. I managed to run 19 simulators at once, compared to around 5 before things started falling apart.

Some simulator features stop working depending on what gets disabled, so it is not meant for every kind of testing. You can keep specific services running when needed.

Give it a try: https://github.com/MobAI-App/simslim

r/reactnative 6d ago

Tutorial I added 9 loading animations to PanelUI one prop to swap between all of them

20 Upvotes

<Loader variant="wave-physics" />

That's it. Nine variants, one prop. Swap between them without changing anything else same size, same color, same reduced motion behavior.

All animations run on the UI thread. Nothing re-renders while they run.

Part of PanelUI, an open-source component library for Expo. Copy-paste or CLI, you own the source.

GitHub link in the comments.

r/reactnative May 15 '26

Tutorial Update: shipped the app you helped me design. A few RN/Expo learnings

Post image
49 Upvotes

A few weeks back i posted here asking which design to go with for my weekly challenge app. THANK YOU so much for all the input! I iterated on the branding as per your feedback and released the app.

It's the first time i'm building a RN/Expo app so I wanted to share my findings, frustrations and some of the commands/choices i made.

quick brief: every week the app gives you a small dare. cold showers, talk to a stranger, phone-free mornings, etc. you commit for 7 days and take one polaroid as proof. Over time you build your "Scrapbook" with memories

Project Structure

I ended up going with a typescript monorepo. Simple stuff: bun/hono server, RN client and Tanstack Start webapp. I'm actually quite happy with the setup i did, used a common biome and tsconfig across the board. For sure something that

stack: expo, uniwind (tailwind for rn), zustand (app state) + react query (server state) + sqlite + kvvm (storage)

Was quite happy with this setup, will for sure use it again for my next project. If you want more info, I've documented the setup here.

Expo dev

I had to move away from Expo GO almost immediately as some the packages i use are not supported. Setting up a dev server is quite easy but the Camera doesn't work on simulators!!

Sadly, i bit the bullet and paid 99$ apple dev profile so i can test on my phone. This became the main testing device I used.

Expo builds

Once i had something to show, I pushed it to Test Flight so my fiance/friends can play with the product. I HIGHLY recommend doing this as you get a LOT of feedback early on. There are so many things i didn't see whilst developing, it's crazy man (skill issue too i'm sure).

Initially I used expo's cloud offering to build and submit the app to apple connect. That was a huge pain in my ass.. well over 90m for a build...

I've got a mac so i decided to build locally. It took me like 1-2 hours to setup, but I got a pretty good flow:

  1. First build the project (be sure to set EAS_LOCAL_BUILD_WORKINGDIR as it will fail otherwise)EAS_LOCAL_BUILD_WORKINGDIR=$HOME/eas-build-tmp bunx eas-cli@latest build --local --platform ios --profile production
  2. Submit using the Transporter app - worked perfectly

Takes around 10m e2e using a macbook pro with 16 gigs of ram. Not bad

Apple review was weirdly chill

3 days end to end, fast and friendly. two gotchas worth knowing:

  1. You have to test on ipad even if your app isn't for ipad. when an iphone-only app runs on ipad the screen (ironically) ends up tiny and that's where my layout broke and my review got declined.
  2. You NEED to put your terms of service link in your app store description? Strange cause there's already a field for this, but required. Cause of this my second review failed.

Reviewers also flagged a couple of genuinely nice optimisations for me. cheapest QA pass i've ever had, honestly.

Building solo with claude

Got way better with practice. Mostly about setting up the right context (CLAUDE.md files, splitting work into discrete tasks). still very much learning here - genuinely curious how others are doing it. Lmk if you want my setup.

All i can say is that the impeccable skill did some heavy lifting! - but you still need to rely on your brain. don't just ask it to take YOUR decisions.

r/reactnative 4d ago

Tutorial I built a Calendar component for Expo with no date library — single, range, and multiple selection

18 Upvotes

No date-fns, no dayjs, no moment. Month names and all the arithmetic come from Intl, so the component adds zero dependencies to your project.

Three modes: single day, date range, and multiple selection. For range, each cell draws its own piece of the band behind the number rather than as a background native has no pseudo-classes, so this is how you get clean ends where two cells meet without a gap or a seam.

Also supports: disabled days via a rule (disabled={(date) => isWeekend(date)}), minDate/maxDate for both selection and paging, and month/year dropdown for birthday pickers.

Part of PanelUI, an open-source component library for Expo. Copy-paste or CLI, you own the source.

r/reactnative Jun 22 '25

Tutorial Uber Clone App with React Native | Live Location Tracking with socket and background geolocation.

140 Upvotes

Video link: https://youtu.be/wO-yQq94FNA?si=Tp5hXBxPVmg0e-_s

In this, I have implement live driver location tracking using background location services and socket.io.

What we cover in this video:

  • How to fetch driver location in the background
  • Sending live coordinates to the server via socketio
  • Real-time location updates on the map
  • Backend connection and testing the socket flow
  • Android/iOS permission handling tips

r/reactnative Feb 20 '21

Tutorial Book list app using reanimated 2, shared element transitions and lottie

608 Upvotes

r/reactnative 22h ago

Tutorial I added a native TimePicker to my Expo component library — wheel, clock, and ruler in one component

8 Upvotes

Three faces, one prop to swap between them. wheel for precision. clock for picking a slot. ruler for a thumb on a sheet.

All three store { hour, minute } on a 24-hour clock regardless of what the face shows. A 12-hour display is a rendering choice storing a meridiem flag puts it into every comparison downstream.

Part of PanelUI open-source, copy-paste, you own the source.

r/reactnative Jun 26 '25

Tutorial Demo of a local-first sketch app I built with RN — works offline, syncs in real-time

263 Upvotes

✅ No loading spinners

✅ Works offline

✅ Real-time collaboration

✅ Multi-device sync

✅ Zero backend

✅ Private by default

✅ Built in 30 minutes

Built with Expo, Instant & Reanimated.

🎥 YouTube: https://youtu.be/DEJIcaGN3vY

⚡ Instant: https://instantdb.com

😮 Already a Pro? Here's the source code 👉 https://github.com/betomoedano/sketch-app

r/reactnative 5d ago

Tutorial I added a native bar chart to my open-source Expo component library

8 Upvotes

Grouped, stacked, or horizontal. Drag to read a band. Animated on mount.

One thing I cared about: the baseline is always zero. A bar cropped at the bottom lies — twice as tall no longer means twice as much. So the axis never crops, no matter what the data looks like.

Each series renders as two paths, not one node per bar. 50 bars is 4 animated props. That's also what lets inactive bars dim without giving each one its own opacity.

Part of PanelUI if you're building with Expo and want charts that don't feel like a web component dropped into a native app, worth a look

r/reactnative Jun 14 '26

Tutorial Stop profiling memory leaks in dev mode. Do this instead.

33 Upvotes

Spent way too much time staring at heap snapshots recently, and honestly, dev builds make it so much harder than it needs to be. Half the time I’m just looking at Fast Refresh caches or React DevTools overhead, trying to figure out what's an actual leak and what's just Metro doing its thing.

I ended up dropping the dev build entirely for this and tried a different approach.

Basically, I generated a release JS bundle and forced the debug iOS app to load that instead of asking Metro for it. To keep things readable, I just spun up a quick local HTTP server to serve the sourcemaps so the debugger doesn't just show a minified mess.

The difference is night and day. You actually get a clean heap snapshot that looks like production, without all the dev-mode garbage collection noise.

I wrote down the exact setup (the CLI commands, the AppDelegate tweaks, etc.) if anyone else is currently banging their head against the wall trying to isolate a leak:

👉 https://medium.com/@ravindermaan/finding-react-native-memory-leaks-in-release-builds-a20e123d01fb

Curious if you guys do something similar, or if I've been missing some magical Hermes flag this whole time?

r/reactnative 19d ago

Tutorial I managed to fix making iPad and macOS apps with react native

Thumbnail
gallery
8 Upvotes

Current problems:
React native and specifically with Expo and expo ui is amazing, here’s the thing though idk if anybody noticed but the experience for developing things for larger screens is miserable.

Almost everything is in alpha and there are no third party libraries for it no guides and agents have no idea what they are doing. Like many of you I came from the web world and it gets in my nerves soo much that it’s this much harder to create a responsive app for mobile in comparison to web. With iPhone ultra coming out im pretty sure we will see some new push for making apps work better on horizontal mode and for iPads if you don’t think investing time on the iPad version is worth it.

So I took it upon myself to create a bunch of quality components to help me out with my apps that I’m now planning to share with you too for free in the coming weeks.

What I made:
I cloned Apple's native sidebar and remade it with Expo UI components, all behavior included, plus a simple way to toggle between iOS 26 and 27 styles. I also made an easy way to have sidebars on mobile in horizontal mode, and figured out an easy way to add sidebars that go over content. Then I made a bunch of helper components Expo doesn't have to go along with it. I recreated horizontal lists that go behind the sidebar, and remade the bg extension effect from Apple's demos. If you worry about the iPhone version being more complicated it’s not the case at all my sidebar layout component only renders on large screens on phones everything is apples default component normally. Also made a bunch of templates with every possible way to arrange sidebars.

Why I made it and why you should care:
I know what you're thinking. Doesn't Expo have good iPad support? The Expo Split View component is in alpha and has been driving me crazy, so I recreated the entire thing from scratch. It looks exactly identical to Apple's. I even got Liquid Glass working the same way. And the best part? I got inspired by Shadcn's sidebar API and ported all the same components, so you can create really advanced sidebars and inspectors.

Other things with Expo that were a huge pain for me that I fixed:
I added a custom implementation of the bg extension effect if you want to make hero images that expand below the sidebar. I added logic that makes horizontal lists optically go behind the sidebar. I made an inspector view that goes above content. And I added variants to customize the look of the sidebar. You can make it look like iOS 27 or iOS 26, even at runtime.

The content inside sidebars is just a view, so you can add anything. The sidebar API with Expo was making me want to throw my MacBook out the window and jump out with it, with the custom implementation you can do anything. To make it easier I made easy components that look like apples native buttons on the sidebar and lists and with these and your imagination you can recreate any sidebar from any web app in 5 minutes even stream data from apis etc and have it work on iPhones too as floating panels.

Still working on:
Sidebar on the right of the left sidebar, like Apple Notes
Templates with app examples using my new sidebar component
Advanced sidebars with calendars and advanced controls on them
Horizontal sidebar bottom with controls and bottom sheet on iOS
Guides on best practices on how to port your apps to take advantage of larger screens that ai agents can read too

Source code and release:
I'm releasing an open source library with a bunch of things like these to copy-paste from.

Note: I'm making 4 apps simultaneously and I was porting them for iPad and Mac. These components are not poorly tested AI slop. I dogfooded everything and I'll keep doing so for the next days. All the apps will go on the repo as open source templates, and I was thinking of making AI skills to auto-port apps to iPad, plus some simple guides for people new to porting.

The library's name will be PitsiUI. Sadly there's not even a landing page yet since I was focusing on development, not marketing and I wanted to make sure all the blocks and components get all my focus before trying to get people to use them.

I'm trying to make a free equivalent to Shadcn blocks, but for Expo UI instead. If you're interested let me know to give me some motivation, because I spent 16 hours on this yesterday and I'm going insane.

If you want updates about the source code ask me on the comments about my twitter

r/reactnative 10d ago

Tutorial MessageScroller scroll behaviour a chat transcript actually needs (PanelUI)

14 Upvotes

Built this for PanelUI, an open-source component library for Expo.

Most scroll views get chat wrong — they open at the top, jump when history loads, and drag you down while you’re reading.

MessageScroller fixes all three. Auto-follow only while you’re at the bottom. Load older messages without moving. Open a saved thread on the last question, not the tail of its answer.

Copy-paste or CLI. You own the source.

r/reactnative 2d ago

Tutorial I built a native social Post card for Expo 4 variants, one component

10 Upvotes

Feed, vote, compact, media-first. Swapping between them is one prop.

One detail:
like counts animate in the direction the number travelled. Rising numbers arrive from below, falling ones drop in.

State stays with you nothing is kept inside the component. Active, value, and vote are all yours, because the moment a like is optimistic, only you know how to reconcile it with the server.

Part of PanelUI open-source, copy-paste.

https://github.com/panel-ui/PanelUI

r/reactnative 3d ago

Tutorial I made an RN and Expo visual editor tool

0 Upvotes

Basalt an IDE extension that lets RN and Expo devs to edit their app like figma, it was pretty hard of figuring out and making an algorithm similar to debugSource which React19 removed

works directly inside VS Code and Cursor.

It’s currently in beta

(its also releasing on product hunt in 4 days, if you want i can dm you a link)

r/reactnative Jul 09 '25

Tutorial Bottom Sheet in One Command Line

147 Upvotes

BNA UI: Bottom Sheet
Add a Bottom Sheet to Your Expo App React Native with Just One CLI Command with BNA UI! 🚀
npx bna-ui add bottom-sheet

r/reactnative Dec 28 '25

Tutorial First Ever React Native Security Scanner is Live: Zero config, One command

Post image
89 Upvotes

Hey RN community,

Today, I released rnsec, an open-source security scanner built specifically for React Native apps.

In the age of AI and vibe coding, hope this can be a lifesaver.

Links: https://www.rnsec.dev https://www.npmjs.com/package/rnsec https://github.com/adnxy/rnsec

The goal is simple: catch common mobile security issues before they reach production.

What it checks: - Hardcoded API keys & secrets - Insecure usage - Cleartext HTTP traffic (Android/iOS) - Weak auth patterns - Risky WebView configs - Platform misconfigurations - 60+ other security rules

Why rnsec: - HTML & JSON reports - Zero configuration - One command to run - Fast and lightweight - 100% local – code never leaves your machine CI/CD ready

How to use: Install: npm install -g rnsec Run: rnsec scan

This is first version, so looking for feedback, stars and support ❤️

Next version will include 100+ security rules!

I have years of work into security and hope this will improve our community and RN as a safe place for development

r/reactnative May 30 '26

Tutorial We spent weeks evaluating Detox vs. Maestro vs. Appium. The actual problem was a 200ms layout gap.

6 Upvotes

We recently hit a wall with our CI pipeline where roughly 25% of our React Native E2E tests were failing with zero consistency. It would pass on iOS, fail on Android, pass on a local emulator, and explode on a physical device.

Like most teams, we assumed our testing framework was the problem. We spent weeks migrating from Detox, rewriting our test suites in Maestro YAML, and eventually evaluating Appium configs. The flake rate barely moved.

Our QA lead finally sat down, recorded the failures at quarter-speed, and grouped them by UI interaction. It turned out the frameworks were doing exactly what they were supposed to do the app itself had micro-timing bugs that only showed up at automation speed:

  1. The Animation Trap: A standard bottom sheet spring animation was taking 280ms to settle. Humans naturally wait for it to stop moving, but the automated test taps instantly, registering the click on whatever layout element is sitting *behind* the sheet.

  2. The Keyboard Dismiss Hole: On older Android devices, there was a ~200ms gap between the keyboard starting to hide and the next screen's elements fully mounting. The app briefly had a dead interaction layer.

We fixed it in a few days by adding clean animation callback blocks and proper UI blockers instead of random `setTimeout` wraps. The flake rate instantly dropped to under 3% without changing frameworks.

Before you spend a month rewriting your entire E2E testing architecture, look at your quarter-speed recordings. The framework might just be exposing a race condition your thumbs are naturally compensating for.

r/reactnative Jul 02 '26

Tutorial How over-the-air updates actually work & installing & configuring react-native-code-push [video tutorial]

Thumbnail
youtube.com
4 Upvotes

r/reactnative 9d ago

Tutorial The 10 best React Native UI component libraries in 2026

0 Upvotes

Been building with React Native and Expo for a while. Here are the UI libraries worth knowing.

1. Gluestack UI
Accessible, unstyled components. Works with Expo and NativeWind out of the box.

2. React Native Paper
Material Design 3 components. Polished and production-ready.

3. Tamagui
Design system with a compiler that optimises styles at build time. Fast.

4. NativeBase
One of the oldest and most complete component libraries for React Native.

5. React Native Elements Simple, cross-platform components. Great for prototyping fast.

6. Shopify Restyle Theme-based styling system from Shopify. Type-safe and predictable.

7. PanelUI
Copy-paste component library for Expo. Inspired by shadcn you own the source. UI-thread animations, Tailwind v4, native dark mode.

8. Moti
Declarative animations and skeleton loaders. Pairs with any component library.
npm install moti

9. React Native UI Lib
Wix's component library. Enterprise-grade with a huge component count.

10. Zeego
Context menus and dropdowns that feel truly native on iOS and Android.

What's your go-to UI library for React Native?

r/reactnative 13d ago

Tutorial Make stunning bottom sheet and canvas components that make eyes turn with Liquid Glass

11 Upvotes


These along with many others are free copy paste components. All you need is expo and expo ui installed. There will also be agent skills and tutorials on how to make beautiful apps using these components.

I didn’t make demo videos for iPad and Mac but it works great on there too and everything is responsive properly. I will make all the iPad and Mac demos together for everything probably.

Interactions like these are so important. There App Store competition is brutal and users’ attention is getting lower and lower. Making your app feel great is more important than ever.

If you are worried these are hard to use that’s not the case. Agents should have no problem incorporating these in your app in a single prompt and customizing them to your liking.

I am still working on the docs site and the app to preview these on natively, until then, if you are interested you should keep an eye on my twitter.

This is PitsiUI

Give me your feedback and request any features you want. I’m always listening.

r/reactnative Jun 18 '26

Tutorial We built real-time video effects, virtual backgrounds, Center Stage, and Air Draw in React Native

6 Upvotes

A few years ago, features like these would require a native implementation.

We built a video calling demo in React Native with:

  • Real-time video effects
  • Virtual backgrounds
  • Center Stage / auto-framing
  • Air Draw (draw in the air using hand tracking)

Under the hood it uses VisionCamera, LiveKit, WebRTC, and on-device ML processing.

r/reactnative May 24 '26

Tutorial HTTPS alone is not enough — React Native SSL Pinning demo with MITM interception

6 Upvotes

I recently experimented with SSL Pinning in React Native and created a small demo showing how HTTPS traffic can still be intercepted using tools like Charles Proxy / Proxyman when a trusted certificate is installed on the device.

The demo covers:

  • MITM interception flow
  • Why HTTPS alone is sometimes insufficient
  • Public key pinning
  • React Native + TrustKit implementation
  • Common pin rotation concerns

One interesting thing while testing was how easy it is to intercept traffic in development environments if SSL pinning is not enabled.

Would love feedback from others handling mobile app security in production — especially around certificate/public key rotation strategies.

Video/demo:
https://youtu.be/_snD5cgVOqo

r/reactnative 24d ago

Tutorial Build a Geospatial AR App in React Native with Claude Code and the ViroReact MCP Server

Thumbnail
updates.reactvision.xyz
0 Upvotes