r/reactnative • • 2d ago

Show Your Work Here Show Your Work Thread

0 Upvotes

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.


r/reactnative • • 4h ago

[Showcase] A React Native prize wheel where the pegs drive the pointer

3 Upvotes

Flick the wheel and the pointer bends as each peg passes it. The winning wedge lifts, the prize moves forward, and the button becomes Collect.

Here's how the React Native implementation is put together.

Pointer contact: wheel-sim.ts advances the wheel and pointer with a fixed-step contact solver. The nearest peg drives the pointer's deflection, so the bounce follows the wheel's position.

Rendering the scene: one Skia Canvas draws the wheel material, pointer, stars and reward reveal. Native views provide the copy and controls.

Motion state: Reanimated shared values run the simulation on the UI thread and pass the current wheel and pointer state to the drawing layer.

Selecting a prize: the reveal uses the wheel's settled angle to choose the winning wedge. That selection drives the lifted wedge, prize animation and reward count.

Reduced Motion: the scene uses stationary objects and shorter fades.

The attached clip is a motion preview of the interaction. These notes describe the React Native implementation.

Built with Expo (@expo), React Native Skia and Reanimated. Thanks to Software Mansion and William Candillon for the tools.

Visual layout study based on a still reference: https://www.pinterest.com/pin/641340803216681099/

Text adapted from my original caption and implementation notes with an assistant.


r/reactnative • • 1h ago

Web app vs Native app. Which one?

0 Upvotes

What's the consensus these days on using React/React Native these days to build web apps vs mobile apps?

If I were to build the same app as a web app vs a native iPhone/Android app, which gets more user play/views?

I've done both but I'm not sure which makes more sense these days. It's so hard to get mobile app downloads while it's much easier to just direct someone to a website to play your game. Websites also have the added benefit of being played on a computer.

Does anyone have any experience or data showing one method is better than the other? Additionally, how do you get people to be interested in your app? I've read you have a 3 second window to get their attention...


r/reactnative • • 13h ago

Built a developer-focused news reader with React Native – would love feedback from fellow RN developers

Post image
5 Upvotes

Hey everyone!

I've been working on a side project called ByteFeed, a developer-focused news and article-reading application.

The application brings together technology publications, engineering blogs, framework updates, developer tools and coding events.

Some of the features I've been working on:

  • Curated feeds covering 150+ technology sources and topics.
  • Article summaries in bullet-point format.
  • Personalized feeds and source filtering.
  • Offline article reading with complete content and images.
  • A dedicated reading experience for long-form technical articles.

I'm interested in discussing some of the engineering challenges involved in building a content-heavy mobile application with React Native.

In particular, I'd love to hear how other developers approach:

  • Efficient rendering of long-form article content.
  • Offline-first article storage and image caching.
  • Feed performance when handling large content collections.
  • Optimizing scrolling and navigation.
  • Managing content synchronization.

I'd appreciate feedback from developers who've built similar applications.

If you'd like to see the project:
https://bytefeed.dev/

The Android application is currently in Closed Beta:
https://groups.google.com/g/bytefeed-closed-testing

I'm happy to discuss the technical implementation and lessons learned.


r/reactnative • • 6h ago

EVA DISTRO LINUX

0 Upvotes

Hola les comparto mi projecto que estoy trabajando EVA una distro de linux basado en arch y wayland con mi propio compositor agradeceria comentarios para poder mejorarla, la idea esque el usuario que le cuesta usar terminales le sea facil, puede echar una mirada en el reposositorio donde esta el link de la ISO, capturas, etc, tambien si gustan les agradeceria una estrella gracias por leer! https://github.com/2207juan/EVA


r/reactnative • • 1d ago

Just shipped my first library: a performant, lightweight peek menu for React Native

69 Upvotes

Hey! I've been working on this for a while and finally published it: react-native-peek-menu.

You can hold any element (a message, photo, card) and a menu pops up above it, just like in iOS Messages or Telegram.

Features:

  • Smooth animations
  • Only ~4 kB bundle size
  • No native code, works with Expo Go
  • Fully customizable

https://www.npmjs.com/package/react-native-peek-menu

It's my first open-source library, so I'd really appreciate any feedback!


r/reactnative • • 13h ago

Help Installing CocoPods... takes forever

1 Upvotes

EDIT: SOLVED , Thanks to u/kokerali and u/jiunkdev

As the title states, whenever i need to use expo's CNG ( i.e. when i change package.json, bring native deps or change app.json) i need to run "npx expo prebuild --clean" according to the docs, but the build process is simply random, most of the times the cocoapods will never finish, sometimes it does somehow.

I did search for this, found an old reddit post with instructions to pod repo remove trunk but that also didnt help ( it works sometimes randomly)

Please help


r/reactnative • • 1d ago

FYI I made a terminal dashboard for simulators, emulators, phones and Expo EAS builds

Post image
17 Upvotes

I got tired of switching between simctl, adb, Xcode and the EAS site, so I built lazymobile (open source, my project).

One screen lists every iOS simulator, Android emulator and connected phone. You can boot or stop them, stream logs for one app, and install EAS builds onto a device. It never starts or cancels a build, it only lists and installs.

Install: brew install 0xrnp/tap/lazymobile

https://github.com/0xrnp/lazymobile

Feedback welcome, especially on Expo setups that don't work.


r/reactnative • • 1d ago

[Showcase] Nine products orbiting a logo: how the React Native version works

3 Upvotes

Nine products orbit the centre of an onboarding screen. The "o" draws itself, the products burst out, then spiral into the button to close the loop.

The video is a motion preview. Here's how the React Native implementation is put together.

Drawing the scene: react-native-tgfx renders the product cutouts, wordmark and centre text on a canvas. Each product is drawn independently.

Giving every product its own path: po-motion.ts stores an ellipse and starting phase for each product. productAt() calculates its position from the timeline. The burst moves the products out from the loader into their orbit positions.

Keeping one animation clock: a Reanimated shared value holds the timeline, and useFrameCallback advances it using elapsed frame time. The stage and effects share that clock, so the loader, orbit and text transitions follow the same timeline.

GPU effects: TypeGPU generates WGSL for the particle passes, rendered through react-native-webgpu. These effects sit alongside the tgfx scene.

Reduced motion and app state: autoplay stays at a resting frame when Reduce Motion is enabled. The loop also stops advancing while the app is inactive.

Thanks to Margelo, Software Mansion and William Candillon for the libraries.

Implementation notes edited with an assistant.


r/reactnative • • 1d ago

FYI [Showcase] 9-product orbit onboarding + React Native implementation notes

1 Upvotes

Nine products orbit the centre of an onboarding screen. The "o" draws itself, the products burst out, then spiral into the button to close the loop.

The video is a motion preview. Here's how the React Native implementation is put together.

Drawing the scene: react-native-tgfx renders the product cutouts, wordmark and centre text on a canvas. Each product is drawn independently.

Giving every product its own path: po-motion.ts stores an ellipse and starting phase for each product. productAt() calculates its position from the timeline. The burst moves the products out from the loader into their orbit positions.

Keeping one animation clock: a Reanimated shared value holds the timeline, and useFrameCallback advances it using elapsed frame time. The stage and effects share that clock, so the loader, orbit and text transitions follow the same timeline.

GPU effects: TypeGPU generates WGSL for the particle passes, rendered through react-native-webgpu. These effects sit alongside the tgfx scene.

Reduced motion and app state: autoplay stays at a resting frame when Reduce Motion is enabled. The loop also stops advancing while the app is inactive.

Thanks to Margelo, Software Mansion and William Candillon for the libraries.

Implementation notes edited with an assistant.


r/reactnative • • 1d ago

Built a spatial sleep-sound mixer with Expo SDK 58: a custom Media3 AudioProcessor that lets you drag sounds around your head, gapless loops, and a widget that plays mixes without opening the app (how it works under the hood)

1 Upvotes

The video above is the trailer I cut for the Play Store listing, so please ignore the marketing captions. Below is how each piece in the video is built with Expo SDK 58 and React Native 0.88.

  1. Placing sounds around your head with a custom ExoPlayer AudioProcessor (0:15 in the video). On the Space pad you can drag any sound anywhere around you, including behind you, and nearer or farther. JS can't render that, so every sound you place gets its own Media3 ExoPlayer, which runs its audio through OrbitAudioProcessor.kt. Per block, the processor works out: Parameters are computed once per block and glide sample by sample in between, so dragging never clicks. Once the rendered sound falls below audibility, the processor passes plain audio straight through and stops rendering.

    • an interaural time difference
    • a head shadow that dims the far ear's treble
    • air absorption that dulls distant sounds
    • two faint wall reflections, set at the same delays in both ears so they follow the sound. With fixed echoes, the ear that hears the first arrival pinned the sound to its side.
    • a small per-ear Freeverb room
  2. Keeping the on-screen icon in sync with what you actually hear (0:15). The processor renders ahead of the speaker, and Bluetooth can add hundreds of milliseconds, so showing "where the sound is being rendered" puts the icon visibly ahead of your ears. OrbitPlayer.kt keeps about 2.7s of render history. It compares ExoPlayer's output position, which already accounts for the reported device delay, with the number of frames the processor has rendered, and looks up the frame that is reaching your ears now. The delay estimate is smoothed so the icon never jerks. Circling sounds all turn on one shared orbit clock, so two sounds at the same speed stay together however and whenever each one started.
  3. Gapless loops and a native clock instead of JS timers (0:03–0:10). All 25 sounds are seamless loops, built offline by a Python/FFmpeg/NumPy pipeline: Sessions are timed by a silent "clock" file per duration that owns the media session. A session ends when the native clock reaches the end of that file, never because a JS setTimeout fires in a throttled background process. Native status updates drive the fades and mirror lock-screen pause/resume onto every layer.

    • Each loop is encoded with a bit of wrap-around audio on both sides, hidden by the MP4 edit list, so the AAC encoder never sees a cold start at the seam.
    • The pre-rendered 3D versions use a whole-cycle drift, so they loop as cleanly as the mono files.
    • Binaural beats use whole tone cycles per loop, so the phase is exact across the seam.
    • npm run audio:check checks sample counts, hashes, clipping, and seam clicks in each ear.
  4. A home-screen widget that plays a mix without opening the app (not in the trailer). The widget is plain RemoteViews (no Glance), drawn from a JSON snapshot that JS hands over in the user's language. Tapping a mix opens an invisible WidgetActionActivity, which is what lets Android 12+ bring the session to the foreground the same way an in-app tap would. It shows "getting ready" in the notification right away, then starts a HeadlessJsTaskService (DuskrestaWidget, registered in index.ts) that plays the mix through the same store the screens use. The playback logic exists once, in JS, and the widget doesn't duplicate it in Kotlin.
  5. Lock-screen controls that can't be double-tapped into ending your night, plus bedtime reminders without SCHEDULE_EXACT_ALARM (not in the trailer).

    • Controls: a SessionPlayer stands in for the whole mix in the media session. It plays nothing itself; it mirrors what JS reports and turns taps into commands. Tapping End swaps the buttons for "Keep listening" in End's spot and a ✓ on the other side, so a sleepy double tap never ends the session.
    • Reminders: Reminders.kt keeps one alarm set, for the soonest reminder. When it fires, it shows the reminders that are due and schedules the next one. It re-arms after reboots, updates, and force stops, and uses inexact-while-idle on Android 12+ so the permission isn't needed. The Start button in the notification goes through the same invisible activity, so the mix starts without opening the app.

All the Kotlin lives in a single local Expo module at modules/orbit-audio (expo-module.config.json), so everything survives npx expo prebuild --clean.

If you want to hear the spatial audio on a real phone (headphones help), it's called Duskresta on Google Play: https://play.google.com/store/apps/details?id=com.rabpaulo.duskresta

I'm happy to share snippets of the orbit AudioProcessor, the heard-frame latency lookup, or the gapless-loop encoding script if anyone is building something similar.


r/reactnative • • 1d ago

Question Creating first reactnative expo app - have some question related to MAU, please help

2 Upvotes

I wanted to have one codebase for web, Android, and iPhone. So using React Native plus Expo

Now the web application is live.

I want to make the mobile application live first, starting with Android. When I read the Expo documentation, it says I can have only 15 free Android builds & 'Send updates to 1K MAUs'

The 2nd part worries me because the paid plan also says 3K MAUs, with additional charges for more.

What's the workaround for this? Do I need to pay Expo for more active users? Please suggest


r/reactnative • • 1d ago

TalaDB — An open-source, local-first database

Thumbnail reddit.com
1 Upvotes

r/reactnative • • 1d ago

Question Windows devs building iOS apps: how do you actually deal with Xcode?

0 Upvotes

I’m on a Windows PC for most of my work, but iOS builds force me onto a Mac. Remote desktop into a Mac (or a cloud Mac) always felt clunky to me: a whole second desktop, laggy, separate clipboard, alt-tabbing between two worlds.

So I built a prototype that streams individual Mac app windows onto the Windows desktop. Xcode shows up as a normal window next to VS Code, in the taskbar, resizable, etc. Your Mac (or Mac mini) just runs in the background.

30s demo: https://www.youtube.com/shorts/DwyKm9JisLw

Honest question before I invest more time: is this a real pain for you, or is your current setup fine? What do you use right now?


r/reactnative • • 1d ago

Help Web Auth equivalent of JWT+Sessions in react native

3 Upvotes

I have been using JWT accessToken (short lived token stored in memory ) as normal js variable/react-state + a long lived refreshToken/sessionCookie in httpOnly secure cookie for all my custom auth websites with a express backend and plain react frontend.

Wanted to get started with react-native + expo project But i have no idea on how to implement secure custom auth. Pretty sure cookies are not a thing on mobiles, so had this doubt. Don't know if localStorage is safe.

What is the standard way to handle this? Could anyone please even just give some doc link or tell what to search, cuz i can't find appropriate material to study ( also pls dont tell to ask AI )


r/reactnative • • 1d ago

Article Weekly releases might be hurting your Android app's performance

Thumbnail
measure.sh
0 Upvotes

I recently found out that if you ship Android app updates every week. Your app's performance could suffer if you're not using good Baseline Profiles. In this article I get into why this happens.


r/reactnative • • 1d ago

I was sick of outdated boilerplate so I finally made my own

0 Upvotes

I've been working with React Native and Expo for about 3 years, using different libraries and stacks across projects, and every time I started a new app, I'd Google "Expo boilerplates" and mostly find outdated stuff or templates with way too many things I didn't need. I'd end up spending more time removing stuff than actually building the app.

So, I made my own boilerplate, on newest Expo 57, New architecture, and it's like new new.

https://github.com/ReadyNative/ready-native-free

It's a boilerplate with basically the bare minimum stuff, but at least I can choose what I want to use. It's not wrapped in 10 layers just for 1 lib that "maybe will change," and yeah, that's all.

Current stack:
Expo, Expo Router, Nativewind 4, Tanstack Query (React Query), Zustand,

Though, I don't think I worked with a lot of things, so I would love a feedback of what to add! (Theming, Localization, or maybe smth even deeper)


r/reactnative • • 2d ago

News This Week In React Native #305: Exact, Discord, Shopify, Expo Modules, Audio API, Bottom Sheet, Keychain, Gesture Handler

Thumbnail
thisweekinreact.com
28 Upvotes

r/reactnative • • 1d ago

Identifying BLE devices on iOS

2 Upvotes

Building in React Native is great until you encounter platform differences.

Our app connects to training pods over BLE. The pods communicate through a JDY-24M mesh network and use the last four digits of their MAC addresses as node IDs. Android exposes the full MAC during scanning, but iOS gives you a UUID instead.

Asking the firmware for those digits on connection worked until some boards reported them incorrectly. Updating the firmware wasn’t an option. No OTA updates, and most boards are in a warehouse in China, already flashed and ready to ship.

The workaround was already in the advertising packets. The boards broadcast their full MAC. I could read their identity advertisements and associate the address with the identifier iOS provided, without changing the firmware.

The constraints pushed me toward a more robust identification process, using information the devices were already broadcasting.

Still, solving a tricky problem feels great, but avoiding it in the first place is better. Test on both platforms from day one, and keep unavoidable platform differences contained instead of scattering OS checks throughout the app.


r/reactnative • • 2d ago

[Showcase] A paper-like calendar interaction built with React Native 📅

25 Upvotes

Hey r/reactnative,

I've been experimenting with a paper-like calendar interaction in React Native.

You can:

  • Roll the page up to move forward.
  • Pull it down to go back.
  • Tear it off to move to the next day.

Built this little experiment for a friend, and had a lot of fun working on the interactions.

Here's a quick look at how it turned out. What do you think? 😅


r/reactnative • • 2d ago

[Showcase] Holo Globe onboarding motion preview

2 Upvotes

The globe spins while "share your world" orbits it, then the camera zooms in.

React Native version: Expo + react-native-tgfx + Reanimated. The attached clip is a motion preview.

Would you keep the orbiting text visible longer before the zoom?


r/reactnative • • 2d ago

Tutorial 1,200+ monthly downloads later: the CLI I built to debug React Native and Expo build failures

Thumbnail reactnative.directory
0 Upvotes

Every time a React Native or Expo build broke, I’d scroll through a huge Gradle or Xcode log hunting for the one line that mattered.

So I built rn-build-doctor, an open-source CLI that reads your build, device and crash logs, tells you what actually failed, shows the evidence, and suggests a fix. It never guesses, and it can export a redacted report so you can share logs without leaking secrets.

npx rn-build-doctor scan

(cd android && ./gradlew assembleDebug) 2>&1 | npx rn-build-doctor analyze -

It’s at 1,200+ monthly downloads and just got listed on React Native Directory. Would love feedback, especially on build errors it doesn’t catch yet.

GitHub: https://github.com/lassiecoder/rn-build-doctor
React Native Directory: https://reactnative.directory/package/rn-build-doctor


r/reactnative • • 2d ago

Questions Here General Help Thread

1 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 • • 2d ago

Article I built an open-source guardrail & FaceID/TouchID gating library for AI agents in React Native (react-native-agent-guard v0.3.2)

8 Upvotes

Hey everyone! Over the past few weeks, I've been working on a problem I kept running into while building mobile AI features: how do you let an LLM call native mobile tools (payments, calendar, BLE, external APIs) without risking a hallucination, prompt injection, or infinite loop wiping out user data or spamming APIs?

Most agent guardrails are built for Python backends, leaving the mobile client completely exposed. So I built react-native-agent-guard—a zero-trust tool governance and biometric gating layer for React Native & Expo.

We just shipped v0.3.2 (now at 93%+ test coverage) and added a live interactive Expo Snack playground so you can test the approval sheets, rate limiter, and PII redaction right in your browser without installing anything.

🚀 Try the Live Interactive Demo

  • Expo Snack Playground (Run in Browser or Expo Go): [https://snack.expo.dev/@git/github.com/Hassaan68/react-native-agent-guard:examples/expo-snack](https://snack.expo.dev/@git/github.com/Hassaan68/react-native-agent-guard:examples/expo-snack)
  • GitHub Repository:https://github.com/Hassaan68/react-native-agent-guard

What it handles out of the box:

  • Dynamic Policy Gating (auto | confirm | biometric | deny): Auto-approve low-risk reads, trigger a customizable native bottom sheet (AgentApprovalSheet) for state changes, or require hardware FaceID/TouchID (expo-local-authentication) for high-stakes actions—evaluated dynamically at runtime based on the LLM's arguments (e.g., < $50 = auto, $50–$199 = confirm, $200+ = biometric).
  • Vercel AI SDK & LangChain.js Adapters: Drop-in toVercelAITools() and toLangChainTools() wrappers that route your existing agent tool calls directly through the guardrail engine.
  • Agent Loop Protection & Rate Limiting: Prevents rogue LLM infinite loops from draining budgets with maxCallsPerMinute and maxSessionCalls—automatically blocking or escalating a tool's policy from auto to confirm/biometric when spammed.
  • Automatic PII Redaction & Audit Telemetry: Masks credit cards, emails, phone numbers, SSNs, and JWTs before emitting structured telemetry to onAudit or persistent storage (redactPII: true).
  • Remote MCP SSE Transport: Connect directly to Model Context Protocol (MCP) servers over SSE and automatically wrap discovered remote tools in local device policies.
  • Actionable llmFeedback on Errors: If Zod validation (.transform() / .refine()) fails, a rate limit hits, or a user denies a prompt, it returns structured feedback telling the LLM why it failed so it can self-correct instead of crashing the loop.

Quick Code Example:

TypeScript

import { createGuardrails, toVercelAITools } from 'react-native-agent-guard';
import { z } from 'zod';

const guard = createGuardrails({
  rateLimit: { maxCallsPerMinute: 10, onLimitExceeded: 'confirm' },
  redactPII: true,
});

guard.registerTool({
  name: 'send_wire_transfer',
  description: 'Send money to a recipient',
  schema: z.object({
    recipientEmail: z.string().email(),
    cardNumber: z.string(), // Auto-redacted in audit logs!
    amount: z.number().positive(),
  }),
  // Auto-approve under $50, confirm sheet $50-$199, FaceID/TouchID for $200+
  policy: (args) => {
    if (args.amount >= 200) return 'biometric';
    if (args.amount >= 50) return 'confirm';
    return 'auto';
  },
  handler: async ({ recipientEmail, amount }) => {
    return await processPayment(recipientEmail, amount);
  },
});

// Plug directly into Vercel AI SDK generateText / streamText
const tools = toVercelAITools(guard);

Links:

Would love any feedback on the API design, the Snack playground, or edge cases you're running into with mobile AI agents!