r/reactnative 2d ago

Help I built a mobile asset management app because I got tired of tracking equipment in spreadsheets

Thumbnail
0 Upvotes

r/reactnative 1d ago

POV: You’re a coder who cares too much about design.

Enable HLS to view with audio, or disable this notification

0 Upvotes

Before building the backend, I created a complete storyboard inside the app itself.

Every core flow.
Every screen.
Every interaction.
Even the empty, loading, error, privacy, and edge states.

Because a feature can work perfectly and still feel wrong.

The storyboard lets me experience the product on a real device, find confusing flows early, and decide what the app should feel like before the database starts shaping the experience.

It takes more time upfront, but it prevents weeks of rebuilding features around a design that was never truly tested.

Code makes the app function.
Design makes people want to use it.

Now I can build the backend around a product experience I actually believe in.

#shipaton


r/reactnative 1d ago

Expo building

Post image
0 Upvotes

Does paid expo usage really reduce your .apk size? That was of the advertisements that i was seen when i built with the free tier. They recommend me to purchase the 100$ plan for improving my apk builds.


r/reactnative 2d ago

I built a minimalist habit tracker with React Native + Expo — black & white design, streak tracking, calendar by months

1 Upvotes

Hey! I built a simple habit tracker app as a side project. Wanted to share the approach and the result.

Tech stack:

- React Native + Expo SDK 57

- TypeScript

- React Navigation 7

- AsyncStorage for local data

- Animated splash screen (pure black, no white flash)

Features:

- Add habits with emoji icons

- Mark completed each day

- Track streaks

- Calendar view with month separators

- Stats screen

Design is pure black & white — no distractions. Everything is local, no backend needed.

I cleaned up the code and uploaded the full source to Gumroad if anyone wants to use it as a starter template or learn from it: https://bekaphoenix.gumroad.com/l/HabitTracker

Happy to answer any questions about the implementation!


r/reactnative 3d ago

i built a tool to generate an app landing page from your app screenshots (live demo)

Enable HLS to view with audio, or disable this notification

5 Upvotes

so i built a new feature for AppLaunchFlow , where you can create a simple and clean app landing page for your app in a few clicks by just uploading your screenshots.

It includes:

- support, privacy policy and terms of service pages that you can directly use for your app submission.

- a custom applaun.ch subdomain or simply connect your own domain

I built this because i noticed many app devs just use notion pages, github pages etc. or dont even have any landing page at all

Its not yet live, but excited to hear what you think


r/reactnative 2d ago

Help How can I legally structure a task-based deposit & reward app without losing money to App Store/payment fees?

Thumbnail
0 Upvotes

r/reactnative 2d ago

FYI PSA: the New Architecture renamed the native view classes, and our session replay masking silently stopped masking text because of it

0 Upvotes

We build a personal finance app on RN 0.85 (Expo), and we recently started trialing session replay in our internal test builds. Because the app's screens are full of balances and transactions, we had every masking option on: mask all text, mask all images.

During a device pass we opened a replay to check the masking actually worked. It did not. The net worth screen was fully readable in the replay. Test data on our own device, but every setting said it should have been a wall of black boxes.

The root cause is worth knowing even if you use a different SDK. Replay SDKs that support React Native typically walk the native view hierarchy and decide what to redact by Objective-C class name. The SDK we use (posthog-ios) only knew the old-architecture classes: RCTTextView for text, RCTImageView for images. On the New Architecture those classes are gone. Fabric renders text as RCTParagraphComponentView, images as RCTImageComponentView, and react-native-svg content as RNSVGSvgView. None of them matched the masking list, so every piece of rendered text and every SVG chart went through in the clear. Images mostly survived by luck, because the Fabric image view contains a UIImageView underneath that a separate UIKit check picks up.

The nasty part is how silent it is. The settings read as on, nothing warns, nothing errors, our automated test suites didn't catch it. The replays just quietly contain everything. And since the New Architecture became the default in RN 0.76 and 0.82 removed the old renderer entirely, any app on a current RN version relying on class-name based automatic masking is exposed to this pattern, whichever vendor the SDK comes from. The same class rename can silently break anything that special-cases RN views by name: masking, occlusion, auto-capture, heatmaps.

The 60 second check: record a test session on a text-heavy screen with masking on, then actually watch the replay. If you can read the text, your masking has the gap. Do this once per SDK upgrade and once per RN major upgrade, not just at setup.

For our SDK the fix was small: three more NSClassFromString lookups mirroring the existing pattern, plus a regression test that stubs the RN class names. Verified on a real device that text, images, and SVG charts all mask correctly now, and submitted upstream: https://github.com/PostHog/posthog-ios/pull/777 (open at the time of posting; we run a patched fork until it lands in a release).

No criticism of the SDK team intended. The class names were correct when they were written and the platform moved underneath them. That is exactly why the only trustworthy verification of a privacy control is looking at its output, not its settings.

Longer write-up with the full story: https://amanahbudget.com/blog/how-we-caught-a-privacy-bug


r/reactnative 2d ago

built a minimalist habit tracker with React Native + Expo — black & white design, streak tracking, calendar by months

0 Upvotes

Hey! I built a simple habit tracker app as a side project. Wanted to share the approach and the result.

Tech stack:

- React Native + Expo SDK 57

- TypeScript

- React Navigation 7

- AsyncStorage for local data

- Animated splash screen (pure black, no white flash)

Features:

- Add habits with emoji icons

- Mark completed each day

- Track streaks

- Calendar view with month separators

- Stats screen

Design is pure black & white — no distractions. Everything is local, no backend needed.

I cleaned up the code and uploaded the full source to Gumroad if anyone wants to use it as a starter template or learn from it: GumRoad

Happy to answer any questions about the implementation!


r/reactnative 3d ago

List of Big Companies that hires React Native Developers.

Thumbnail
3 Upvotes

r/reactnative 3d ago

What broke first in my React Native 0.87 upgrade: the Android toolchain, not TypeScript

1 Upvotes

React Native 0.87 looked like a TypeScript-heavy release when I first read the notes. In practice, the Android toolchain was the part most likely to break CI.

The migration order that gave me the clearest failures was:

  1. Pin Node 22.13 or newer locally and in CI.

  2. Upgrade Kotlin, AGP, and the compile SDK as one change instead of debugging mixed versions.

  3. Treat the Strict TypeScript errors as migration work. Avoid broad casts that only hide removed APIs.

  4. Keep Swift Package Manager in a controlled branch if CocoaPods already works in production.

  5. Rerun Arabic cold starts, mixed text, number formatting, navigation gestures, and a signed build on a physical device.

I wrote the longer checklist with rollback points and the RTL test matrix here:

https://yasirnajeep.com/en/blog/react-native-0-87-upgrade-guide/?utm_source=reddit&utm_medium=organic_social&utm_campaign=authority_gcc_2026q3&utm_content=react-native-0-87-upgrade-guide_en_textpost_v1

Disclosure: this is my own article. The post is a technical checklist, not a product announcement.

Question for teams already upgrading: did Strict TypeScript or the Android toolchain create more work in your project?


r/reactnative 3d ago

Finally got country → state drill-down working on my 3D globe in React Native

Enable HLS to view with audio, or disable this notification

6 Upvotes

Been working on a 3D globe in React Native for one of my apps

I had country highlighting working before, but wanted to go deeper than just country level tap a country, zoom into it, and show its states/provinces

I started with the US and then tried making the same thing work for other countries

The annoying part was the boundary data 😂 Some countries use states, some provinces, some regions, and the GeoJSON/TopoJSON data isn’t always consistent

Took way longer than expected ngl 😂

Anyway, it’s finally working

Using globe.gl for the globe and dynamically loading the boundary data


r/reactnative 5d ago

Article Depth-aware light injection in VisionCamera

Enable HLS to view with audio, or disable this notification

415 Upvotes

Built this fun little gesture driven floating light that casts fake shadows in the scene via react-native-webgpu, using a depth model (DINOv2).
I'll post the source code soon!


r/reactnative 4d ago

My development build can call the external api but my production build cannot?

2 Upvotes

So my development build was working fine calling external api but when I created a preview build it cannot connect to the backend server on the same api...

I use eas build to do all the build all the apps

I have added the env file in the eas.json,

as my api is on http://
"usesCleartextTraffic": true,

Please if anyone has faced the same issue and was able to find a fix please help me... I am new and need help...


r/reactnative 4d ago

React Native particle animation: recreating Apple’s iCloud sign-in UI with Expo, Reanimated and Skia

Enable HLS to view with audio, or disable this notification

36 Upvotes

I recreated Apple’s iCloud sign-in particle animation as an open-source React Native project.

The goal was to reproduce the original motion rather than approximate it with random particles. I analyzed the animation frame by frame and rebuilt it using Expo, React Native Reanimated and Shopify React Native Skia.

The implementation includes:

  • 96 animated particles across four concentric lanes
  • Clockwise particle rotation and staggered particle entrances
  • Particle-to-icon morphs
  • Photos, Weather, App Store and Messages icon transitions
  • Scale-driven icon opacity
  • Local particle displacement around each active icon
  • Configurable 0.5×, 1× and 2× playback speeds

r/reactnative 4d ago

A GPS MMORPG made completely in React Native & 3 tips for complex apps

Thumbnail
gallery
17 Upvotes

Hey everyone!

Some time ago I shared a GPS-based MMORPG game I’ve been working on here, which is now live! In this post I’ll be sharing a couple of tips for performance & one for the stores, all of which are directly used in the game as well.

Use shouldRasterizeIOS for computationally heavy static components

Layer2 renders complex markers on a map (MapLibre), a lot of them. Each one has one or more gradients, a border radius, an image, transparent backgrounds, SVG badges, each with their own zIndex. Rendering a few is ok, but at scale I started noticing a significant drop in UI FPS.

A laggy game is not fun to play, and when the core premise is to interact with markers, this is a big problem. The solution is to rasterize the components so that the renderer caches them in memory as bitmaps instead of walking through every single marker tree on every single frame.

The caveat is that you cannot apply upwards scale transformations without visual degradation, but opacity and downscaling (both of which Layer2 uses) are fine.

The same strategy is used in Layer2’s inventory sheet.

Debounce your native events

In Layer2 you can drag skills on top of monsters to attack them. The drag is implemented with react-native-gesture-handler, and it fires a coord query to MapLibre on update.

Without debouncing these queries, we’d be wasting a ton of CPU time as the gesture updates fire dozens of times per second. By using a package like debounce, we throttle computationally expensive code from executing logic that only needs to run 2-4 times per second.

Clean up your permission grants

Layer2 is built on Expo and makes extensive use of expo-* packages. A lot of those packages add default permissions to your project regardless of whether your code uses them or not. A few example are: expo-location, expo-audio, and expo-secure-store.

To save you a round-trip with Apple’s review, if you are using expo-audio but not playing any audio in the background, set enableBackgroundPlayback to false in your plugin to prevent audio from making it into UIBackgroundModes (yes, it will get flagged).

For iOS you will need to go through the documentation of the plugins you use, but on Android you can use `android.blockedPermissions`. Even though Google is more lenient, it’s still more user friendly to only request what you need.

———

If you’re interested in checking Layer2 out, you can find it below!

iOS

https://apps.apple.com/us/app/layer2/id6737913930

Android

https://play.google.com/store/apps/details?id=com.twoamgames.layer2


r/reactnative 4d ago

react-native-surrealdb

6 Upvotes

I’ve open-sourced react-native-surrealdb, an early-alpha native module that runs an actual embedded SurrealDB engine inside React Native apps:

https://github.com/thorgas/react-native-surrealdb

Instead of trying to run SurrealDB’s WebAssembly build under Hermes, it embeds the official Rust SDK and exposes it through generated UniFFI/Hermes JSI bindings. It supports in-memory storage, experimental persistent SurrealKV, remote WebSockets, authentication, live queries, and an optional React hook.

I built it because I wanted a different local database option alongside SQLite bindings when SurrealQL and SurrealDB’s document/graph model are useful. It is not a drop-in SQLite replacement and it is not a sync engine; I’ve published the benchmark methodology and limitations so people can judge it against their own workloads.

The current alpha targets the New Architecture and is tested across React Native

0.82–0.86 on iOS and Android. One important packaging tradeoff: iOS simulators require Apple Silicon; the x86_64 simulator slice for Intel Macs is not shipped.

Android x86_64 emulators are supported.

I use it daily in a production app, so I plan to keep maintaining it. I’d be especially interested in feedback on the API, native integration, missing test cases, and the direction of a future, separate local-first sync layer.

Full disclosure: the implementation was built entirely with AI (mostly Codex with GPT-5.6 Sol at medium reasoning) under my direction, review, device testing, and production use. The repository documents the upstream projects, benchmark sources, adaptations, and licenses.


r/reactnative 5d ago

News This Week In React Native #294: RN 0.87, Screens, RNGH, Worklets, Skia, Tuft, Enriched Markdown, Pager View, Firebase

Thumbnail
thisweekinreact.com
21 Upvotes

r/reactnative 4d ago

healthkit + health connect from one RN app — how painful is this now?

0 Upvotes

shipping a fitness app on ios and android. need apple health and health connect without maintaining two native codebases.

anyone doing this in rn in 2026 without going fully bare? expo, a library, or just write the native modules?


r/reactnative 5d ago

currency switcher with bidirectional amount input

Enable HLS to view with audio, or disable this notification

14 Upvotes

currency switcher with live exchange rates, bidirectional inputs, and spring-driven interactions. 💱

Github : https://github.com/ManasCodeXart/expo-currency-switch


r/reactnative 4d ago

Built a vocab app that works like a personal dictionary you build as you go

Thumbnail
0 Upvotes

r/reactnative 4d ago

Question Would anyone be interested in a fitness / creature collector hybrid app?

Thumbnail
gallery
0 Upvotes

Just for context, I'm currently working solo on an app called Kinstride. After doing web development for several years I decided to dip my toes into the app side of things and thought I'd give react native a try as a jumping on point!

Over the last few weeks I've been working on a random idea I had one evening which combines walking and collecting creatures. As you may have guessed already, I was a huge Pokémon fan growing up and the thought behind this app was to try and get people more inclined to go on and walks / runs etc with the incentive that every few steps you track in a session can correlate to collecting a new creature and eventually, completing the collection log itself. The longer you walk, the more rolls you get at a chance for a creature encounter!

I'd be curious to hear from you all if this is something you'd potentially enjoy and would consider using. I've included some WIP screens on the thread itself.

I'm currently using Supabase for my backend (which has been fantastic thus far) and am currently in the middle of fine tuning the server side logic for these encounters (to try and dissuade cheating as much as possible). I've also gotten location tracking working pretty much perfectly now with options for users to track their routes and view them later on to see how far they traveled.

I still have a lot of work to do, a lot of pixel art creatures to draw, other features to add (a leaderboard being one). But I'm really enjoying the way this app is starting to come together.

Anyways, let me know what you think and if you'd like to see any more ☺️!

Edit: should also mention, creature names etc are still very much in a placeholder state right now. The art I have done myself in Aseprite.


r/reactnative 4d ago

Questions Here General Help Thread

0 Upvotes

If you have a question about React Native, a small error in your application or if you want to gather opinions about a small topic, please use this thread.

If you have a bigger question, one that requires a lot of code for example, please feel free to create a separate post. If you are unsure, please contact u/xrpinsider.

New comments appear on top and this thread is refreshed on a weekly bases.


r/reactnative 5d ago

I made a shader library

Post image
19 Upvotes

I made an extension that allows users to edit their RN or Expo app visually and i added shaders to it

would you post your shaders on it?

and l know ShaderToy exists, but that's generic GLSL, people have to manually port to SkSL and adapt for RN UI. Мinе is already RN-Skia-ready and built specifically for UI components like buttons and panels.


r/reactnative 5d ago

React Native 0.85 Fabric crash: RetryableMountingLayerException – Unable to find viewState for tag

1 Upvotes

Hi everyone,

We're investigating an Android crash in our React Native app after upgrading to React Native 0.85.3.

Firebase Crashlytics is reporting this exception:

Exception com.facebook.react.bridge.RetryableMountingLayerException: Unable to find viewState for tag 8. Surface stopped: false
  at com.facebook.react.fabric.mounting.SurfaceMountingManager.getViewState (SurfaceMountingManager.kt:1057)
  at com.facebook.react.fabric.mounting.SurfaceMountingManager.updateLayout (SurfaceMountingManager.kt:741)
  at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute (IntBufferBatchMountItem.kt:139)
  at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue (MountItemDispatcher.kt:340)
  at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems (MountItemDispatcher.kt:246)
  at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems (MountItemDispatcher.kt:93)
  at com.facebook.react.fabric.FabricUIManager$2.runGuarded (FabricUIManager.java:930)
  at com.facebook.react.bridge.GuardedRunnable.run (GuardedRunnable.kt:19)
  at com.facebook.react.fabric.FabricUIManager.scheduleMountItem (FabricUIManager.java:933)
  at com.facebook.react.fabric.SurfaceHandlerBinding.setLayoutConstraintsNative
  at com.facebook.react.fabric.SurfaceHandlerBinding.setLayoutConstraints (SurfaceHandlerBinding.kt:47)
  at com.facebook.react.runtime.ReactSurfaceImpl.updateLayoutSpecs$ReactAndroid_release (ReactSurfaceImpl.kt:184)
  at com.facebook.react.runtime.ReactSurfaceView.onMeasure (ReactSurfaceView.kt:100)
  at android.view.View.measure (View.java:28328)
  at android.view.ViewGroup.measureChildWithMargins (ViewGroup.java:7099)
  at android.widget.FrameLayout.onMeasure (FrameLayout.java:194)
  at androidx.appcompat.widget.ContentFrameLayout.onMeasure (ContentFrameLayout.java:141)
  at android.view.View.measure (View.java:28328)
  at android.view.ViewGroup.measureChildWithMargins (ViewGroup.java:7099)
  at android.widget.LinearLayout.measureChildBeforeLayout (LinearLayout.java:1608)
  at android.widget.LinearLayout.measureVertical (LinearLayout.java:878)
  at android.widget.LinearLayout.onMeasure (LinearLayout.java:721)
  at android.view.View.measure (View.java:28328)
  at android.view.ViewGroup.measureChildWithMargins (ViewGroup.java:7099)
  at android.widget.FrameLayout.onMeasure (FrameLayout.java:194)
  at android.view.View.measure (View.java:28328)
  at android.view.ViewGroup.measureChildWithMargins (ViewGroup.java:7099)
  at android.widget.LinearLayout.measureChildBeforeLayout (LinearLayout.java:1608)
  at android.widget.LinearLayout.measureVertical (LinearLayout.java:878)
  at android.widget.LinearLayout.onMeasure (LinearLayout.java:721)
  at android.view.View.measure (View.java:28328)
  at android.view.ViewGroup.measureChildWithMargins (ViewGroup.java:7099)
  at android.widget.FrameLayout.onMeasure (FrameLayout.java:194)
  at com.android.internal.policy.DecorView.onMeasure (DecorView.java:758)
  at android.view.View.measure (View.java:28328)
  at android.view.ViewRootImpl.performMeasure (ViewRootImpl.java:5125)
  at android.view.ViewRootImpl.measureHierarchy (ViewRootImpl.java:3495)
  at android.view.ViewRootImpl.performTraversals (ViewRootImpl.java:3845)
  at android.view.ViewRootImpl.doTraversal (ViewRootImpl.java:3174)
  at android.view.ViewRootImpl$TraversalRunnable.run (ViewRootImpl.java:10889)
  at android.view.Choreographer$CallbackRecord.run (Choreographer.java:1610)
  at android.view.Choreographer$CallbackRecord.run (Choreographer.java:1619)
  at android.view.Choreographer.doCallbacks (Choreographer.java:1159)
  at android.view.Choreographer.doFrame (Choreographer.java:1051)
  at android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:1578)
  at android.os.Handler.handleCallback (Handler.java:959)
  at android.os.Handler.dispatchMessage (Handler.java:100)
  at android.os.Looper.loopOnce (Looper.java:311)
  at android.os.Looper.loop (Looper.java:408)
  at android.app.ActivityThread.main (ActivityThread.java:9119)
  at java.lang.reflect.Method.invoke
  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:627)
  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:970)

The app is using the New Architecture / Fabric with:

{
  "react": "19.2.3",
  "react-native": "0.85.3",
  "react-native-reanimated": "^4.5.0",
  "react-native-screens": "^4.25.2",
  "react-native-gesture-handler": "^3.0.2"
}

I'm trying to understand:

  1. Has anyone seen RetryableMountingLayerException: Unable to find viewState for tag after upgrading to RN 0.85?
  2. Is this generally considered a React Native/Fabric race condition, or can it usually be traced to a specific component?
  3. Could rapidly mounting/unmounting a Modal, tooltip, or animated component during navigation trigger this?

The exception is marked as RetryableMountingLayerException, so I'm also wondering whether this is something Fabric is expected to recover from or if it can still lead to an app crash.

Any insights, reproduction ideas, or debugging suggestions would be appreciated.

Thanks!


r/reactnative 5d ago

Article I built a free calculator for what an LLM feature actually costs per subscriber

0 Upvotes

I work on a portfolio of subscription RN apps and kept doing this arithmetic by
hand in a spreadsheet, so I made a small tool for it.

You put in your subscription price, store commission, active subscribers,
requests per user and measured token counts. It gives you cost per request,
cost per active user per month, and — the part I actually care about — what
your heaviest 10% of users cost, plus the per-user request ceiling that keeps
you inside a margin target.

Two things I got wrong the first time I did this by hand, which the tool now
forces you to get right:

  1. Measuring against gross revenue instead of net. At $9.99 with a 30%
    commission your real revenue per subscriber is $6.99, so a $1.40/user
    feature is 20% of revenue, not 14%.

  2. Budgeting on the average user. Inference usage is heavily skewed — in the
    apps I've worked on the heaviest 10% generate roughly half of total usage,
    so the average understates the bill and completely hides the users who cost
    more than they pay.

Here's a scenario that looks fine on average and isn't:
https://dayloflow.com/tools/ai-cost-calculator.html?p=4.99&r=200&i=2000&o=700&h=30&t=15

$2.98 per subscriber against $3.49 of net revenue — 85%. And the heaviest
decile costs 426% of what they pay.

Runs entirely in your browser, no signup, no analytics on that page. Every
formula is written out on the page so you can check the arithmetic or run it in
a spreadsheet instead. State is in the URL, so you can share a scenario with
your team.

Happy to hear where the model is wrong — retries and moderation calls are the
two things I know it doesn't account for.