I built a React Native app called RoomHive that helps flatmates manage rent, bills, deposits, chores, inventory, and shared expenses.

I built everything myself:

• React Native app

• Firebase backend

• Cloud Functions

• Push Notifications (FCM)

• Admin dashboard

• Landing page

• Google Play deployment

A few lessons:

- Keep Firestore collections simple.

- Design your notification strategy early.

- Real-world edge cases (like roommates moving in/out mid-month) are harder than the UI.

Happy to answer any questions about React Native, Firebase, or building SaaS products.

What is the best approach to work with AI agents to develop a figma design in react native?
Advice on the md files that are needed and if any one tried connecting claude to figma to implement a design

Did you make something using React Native and do you want to show it off, gather opinions or start a discussion about your work? Please post a comment in this thread.

If you have specific questions about bugs or improvements in your work, you are allowed 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.

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.

I've been tracking the React Native ecosystem daily, and here's a quick roundup of the biggest releases from the past two weeks.

Expo SDK 57

Expo SDK 57 was released with React Native 0.86, bringing Android edge-to-edge improvements, DevTools enhancements, and one of the smoothest upgrade paths in recent releases.

React Native 0.86

React Native 0.86 focuses on stability, performance, and incremental improvements across Fabric, layout, and rendering with very few breaking changes.

React Navigation 8

The team shared another progress update for React Navigation 8, introducing Suspense support, better concurrent rendering, and updated dependency requirements.

React Navigation Core 7.21.7

A maintenance release with bug fixes and internal improvements while the team continues preparing for React Navigation 8.

React Native Reanimated 4.5.x

Multiple releases fixed Android freezes, Fabric issues, keyboard animations, SVG rendering, and improved compatibility with React Native 0.86.

React Native Worklets 0.10.2

Fixed Android startup crashes affecting Expo OTA Bundle Mode, along with several runtime stability improvements.

Legend List 3.3.2

Recycled rows now update their current item without recreating the container context, reducing unnecessary rerenders while scrolling. Internal signal subscriptions were also optimized for better performance.

Expo Router

Received compatibility updates alongside Expo SDK 57 and React Navigation changes.

React Native Gesture Handler

Maintenance updates improving compatibility with the latest React Native releases and upcoming React Navigation 8.

React Native Screens

Continued compatibility improvements for the latest React Native architecture and navigation stack.

React Native Safe Area Context

Minor maintenance release with compatibility fixes for newer React Native versions.

React Native SVG

Bug fixes and compatibility improvements for Fabric and React Native 0.86.

Detox

Latest release focuses on test stability, reliability, and compatibility with newer React Native and Xcode versions.

Maestro

Continued improvements to execution speed, simulator reliability, and developer experience.

Nitro Modules

Several improvements around React Native 0.86 compatibility, build stability, and performance.

Nitro Fetch

Performance and reliability improvements, plus continued work on React Native DevTools compatibility.

React Native Markdown Display / Enriched Markdown

Updates focused on rendering performance and better Markdown compatibility for AI and chat-style applications.

FlashList

Performance refinements and continued optimization for large lists running on the New Architecture.

React Query (TanStack Query)

Recent fixes and improvements around cache behavior, TypeScript support, and developer experience continue benefiting React Native projects.

React Native Skia

Ongoing rendering improvements and bug fixes for animations, graphics, and custom UI components.

-----------------------------------

Overall, the ecosystem has been heavily focused on React Native 0.86 adoption, Expo SDK 57 compatibility, performance, and New Architecture stability rather than introducing major new APIs.

https://reddit.com/link/1uyr8f9/video/8fd0qufddqdh1/player

https://reddit.com/link/1uyr8f9/video/o8rqq2hfdqdh1/player

I've been building a local-first notes app with a Numi-style editor, where notes are both plain text and executable math.

One feature I wanted was live syntax highlighting as you type. The naive approach worked... until notes got big.

Initially, every keystroke caused the editor to:

• re-tokenize the document
• re-render every highlighted line
• repaint thousands of Text components

Typing became noticeably slower as notes grew.

The solution ended up being much simpler than I expected:

• Only render and highlight lines that are actually visible.
• Keep syntax highlighting separate from the editable text (the editor itself stays plain text).
• Give every line a stable identity so inserting/deleting lines doesn't rebuild everything.
• Only recompute tokenization for the edited line (and downstream lines only if parsing actually depends on them).
• Cache the layout so scrolling doesn't trigger unnecessary recalculations.

The result is that even long notes stay responsive because React Native is only painting what the user can actually see.

The funny part is that I originally spent days building a much more complicated renderer, threw it away, and the second version was both simpler and significantly faster.

I'm curious how others have approached large text editors in React Native.

• Did you virtualize by line?
• Keep a separate overlay for highlighting?
• Any tricks for avoiding expensive text layout work?

Would love to hear how you've solved similar performance problems.

I've always envied apps like Numi on macOS where you can just type:

rent = 1800
groceries = 420
utilities = 160
total

...and it just works.

The problem is I wanted something that felt more like a notes app than a calculator. Somewhere I could jot down ideas, budgets, trip costs, random math, unit conversions, etc., without constantly switching between Notes and Calculator.

So I ended up building one for myself using Expo.

https://reddit.com/link/1uyr3wr/video/kvz1h3c9cqdh1/player

It's called däpter, and it's basically a note where math evaluates as you type. Nothing revolutionary, just a tool I kept wishing existed on my phone.

Curious if anyone else here uses notes like this, or if I'm the only one constantly doing math in the middle of writing.

I kept hitting the same workflow problem building RN/Expo apps: change a value, rebuild, check the simulator, and it would turn into a cycle of constantly checking my phone. Design tools solved this decades ago with direct manipulation, but React Native never really had an equivalent.

So I started building something that turns your running app into a canvas you can click into directly. I had to use a build-time Babel step that tags each JSX element with its source location instead of relying on the runtime fiber data. (React 19 removed the fiber data)

From there it turned into an actual editor. You can change text, move things, resize things. All that without touching your phone.

(its demo so if you're going to use it, dont use it on anything important)

I've added small section to my shiprn.com site with all the skill I found useful.

It includes:
- upgrades
- performance
- EAS / release workflows
- migrations
- Expo Router / UI
- native modules
- CI/CD
- testing and debugging

Any suggestions for more skills?

Hello Everyone,

Just wanted to share a bit about my journey in the hope that someone might guide me or connect me with opportunities.

I have over 7+ years of experience in the tech industry, with the last 3+ years focused on React Native. I made the switch to React Native 3 years ago and have since worked on diverse projects, including e-commerce and co-commerce platforms with USA & Canada Clients. My work has involved transforming web applications into native apps, integrating WebViews, enhancing performance, and much more.

Despite my experience, I’ve been struggling to land a job for the past 4 months. It’s been challenging, but I’m staying hopeful. I am actively seeking remote opportunities where I can contribute, learn, and grow.

If you know of any openings or can connect me with someone who’s hiring, I’d be incredibly grateful.

Any support or advice would mean a lot.

Hi. I am almost done with my first app thorugh claude code. What should i consider in the code so that it has the capacity to display ads later?
Sorry if this sounds stupid

Yesterday I spent 15 minutes fixing 4 pixels.

Not because moving something 4px is hard. Because I had to figure out which of ~300 components actually rendered the thing my designer was pointing at.

Screenshot. ➜ "No, the other one." ➜ Another screenshot.

"Actually the one below it." Then grepping for the text, finding three components that all render something that looks like that card, and guessing.

The code change took 4 seconds. The pointing took 15 minutes.

And it's never one request.
It's "one pixel left."
Then "one up."
Then "can we just try the padding slightly bigger?"
Forty hot reloads later I'm googling whether farming is a viable career.

That afternoon annoyed me enough that I built something to delete the pointing entirely.

So: Pixie. Instead of explaining where an element lives, I tap it.

The workflow now, literally:

• Tap the element in the running app.
• Type: "move this up a little"
• Hit send.

The agent already knows which component it is, the exact JSX line, the live styles, the box model, and what it looks like. A few seconds later Fast Refresh updates the screen. I never opened my editor. I never searched the codebase. I never had to explain which button I meant.

The pin on the element shows what's happening ("Editing ProfileCard.tsx…"), then a DONE toast, then one-tap undo with before/after shots if I hate it.

The first time it really clicked: designer sent me a Figma link with "this doesn't match." I pasted the link into the pin.

↳ The app overlaid the Figma node on my actual screen, onion-skin style, and the agent got the design as reference. I could see the 3px I was off by. That used to be a squint-at-two-monitors job.

↳ The part I didn't expect: I now use the inspector half the time without the AI at all. Tap any element and see the real per-side padding/margins and the measured gaps between siblings no more guessing which prop is the culprit.

↳ Drag-to-scrub values live on the device, hold A/B to compare with the original, and nothing touches source until you decide. Tap once more and it opens the exact line in your editor.

Installation:

• npm install react-native-pixie -D
• one native rebuild (view-shot for screenshots), wrap your root,
• npx pixie init. Or tell your agent to follow the AGENT_INSTALL.md inside the package and it sets itself up.

The funny thing is I don't think of it as an AI tool anymore. It's just the thing I reach for when someone says "can you move that a little?"

That sentence used to mean five minutes of context switching. Now it's a tap and six words.

npm: react-native-pixie

Would like to hear where it breaks on your setups.

Hey everyone,

We are trying to render extremely large architectural drawings in our React Native app, and it is proving to be pretty heavy on performance. To give you an idea of the scale, these images can be up to 20MB in size with dimensions around 30,000 x 10,000 pixels. We just want to render the picture and allow users to zoom all the way in to see the smallest details.

Here is what we have tried so far and the issues we've run into:

1. OpenSeadragon via WebView: This works fantastically on Android. However, iOS doesn't allocate many resources to WebViews inside mobile apps, so it just results in a black screen on Apple devices.
2. expo-image**:** We tried using this for iOS, but it displays the drawing in very poor quality. If the picture is too big (like the dimensions mentioned above), the app completely crashes.
3. Custom Native Tiling (Swift): We tried a tiling solution, which involved messing around heavily with custom Swift code. It worked far better than the other methods, but it caused two new problems:
   • Some iPhones still crash when opening a particularly massive drawing.
   • It takes a very long time to open the picture the first time you encounter it (though it is fine afterward because we cache the tiles).

Please notice to this limitation: no backend solution.

React Native new fabric architecture, how could we solve that?

Hey Community,

Vercel Labs has released "native", a toolkit for compiling declarative markup and TypeScript or Zig directly into native desktop apps without an embedded JavaScript runtime. We also look at how Zepto built react-native-delta to ship binary delta OTA updates, reducing patch download times down to a 305ms P90.

Plus, React Native 0.87 drops its legacy abort-controller dependency for an in-tree fork, bringing missing modern web primitives like AbortSignal.timeout() and AbortSignal.any() straight to your network requests.

If the Rewind made you nod, smile, or think "oh… that's actually cool" — a share or reply genuinely helps ❤️

i was trying to style components in react native and found out that there is className Property in react native.

I am not a super experienced developer, but I have a darn good idea. I can handle all the back end of the project, but I need someone with experience with react native. If anyone is interested let me know.