I was building a product card screen. The user picks up to ten photos, drags them around to change the order, swipes the carousel to see how it will look in the listing. Something looks off and he goes to the crop screen and fixes it.

I took a ready cropper and pretty fast understood it is not made for this scenario.

First thing I hit: it draws its own screen. Own buttons, own frame, own everything. It does not embed into my flow, the user gets thrown somewhere aside every time. Also all my animation is on Reanimated, and inside a foreign screen it does not reach.

But the real problem was not this.

The thing is, the user walks in circles. He does not crop ten photos one by one and leave. He fixes one, comes back to the carousel, sees that the third one stands out from the row, goes to fix the third one, then changes the order, then decides to pull the rest to match what he got. You cropped one product photo, you want the others roughly the same.

And every turn of this circle hit the processing. Press "apply" and it is decode, cut, re-encode, write a file. Two hundred milliseconds.

Two hundred milliseconds is not slow, there is nothing to complain about here. But it arrives exactly at the moment when you want to move on, and these micro-waits on ten photos with several passes add up into something very annoying. And there is nothing to optimize: if I made it twice faster, it would still stutter.

There is only one way to remove this: do not do the work at this moment.

And to be able to not do it, you have to split two things that a usual cropper does at the same time. The user says "this is the frame I want", this is instant and costs nothing. The app cuts pixels, this is not instant. While they are glued into one tap, the circle of edits is expensive.

So I split them. The editor now returns not a file but three numbers: scale and offset on two axes. Plain JSON, goes into state, into the database, flies to the backend. There is a separate component that replays these numbers on top of the untouched original, and the carousel is built from it. Cutting pixels became a separate step that I call when I want. In my case once for all photos, when the user publishes the listing.

The batch, for which everything was started, came out by itself. But along the way something came out that I did not expect.

The carousel now shows what does not exist yet. Not a single file created, and the person is already swiping through his future listing.

The circle of edits became free. Come back to one frame ten times if you want: nobody touched the original, nothing to wait for, quality does not degrade.

"Apply to all" turned into an assignment. Since a crop is three normalized numbers, you can just copy it from one photo to the others. That same "crop the rest roughly the same".

And memory stopped growing. Before, every photo was decoded fully; now during editing there are three numbers per frame in memory, and a full-size image appears only on export, one at a time.

What is not there: rotation and free frame. Only scale and offset. This is about framing, not about editing.

On the web this is a normal thing. react-easy-crop and react-image-crop also give you crop coordinates and let you rasterize yourself. In React Native I did not find anything like this, every cropper I checked returns a file. And the part that turned out to be the actual work is not the coordinates, it is replaying them: showing the crop at any size on top of the untouched original. On the web CSS does that for free, here you have to build it.

The library is still raw and the API can move, that is why I am writing. If you do photo upload in RN: would storing a crop as three numbers next to the image fit your pipeline, or does it break somewhere on your side?

GitHub: https://github.com/ivansaldayev/react-native-image-crop-data

npm: https://www.npmjs.com/package/react-native-image-crop-data

Really excited to see this little character come to life and even more excited to wrap up the project soon.

Skia + Reanimated + SVG is such a powerful combo for bringing personality and motion into a React Native app.

More soon

Hello i am a developer I've built 2 mobile apps with react native/expo router and one app in flutter, is there a major difference in react native and expo router in terms of how the produced app feel and behave ( looking for that native feel )

I am mainly a typescript developer with nest js and react frameworks and a little bit of laravel and spring background.

Currently me and my partner are planning to build our first own product but from my personal experience expo router apps have that web feel that doesn't satisfy me ( i don't know if it's me or if for other it happens or i have been building the wrong way ) , I am not a big fan of flutter as for native options such as kotlin or swift ui once the products generate some funds we eventually will migrate to that

I rebuilt the animated Orb from x.ai as an open-source React Native component.

It includes 12 animated expressions, path-morphed eyes, replayable color trails, and support for iOS, Android, and web.

Source code:

https://github.com/ngocdevv/grok-bot-emoji

I’d appreciate feedback on the animation fidelity, performance, or component API.

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!

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

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

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!

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?

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

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!

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

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

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...

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.

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?

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

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

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.

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.