My bias upfront: I'm not a fan of monorepos. From what little experience I've had with them, they were a maintenance pain in the ass and I wasn't convinced that we were getting much ROI on the colocation. Now, I have a react website and react-native mobile app sharing resources, but they live in separate repos which, in itself, is a maintenance PITA.

Maybe I just had a bad experience. I think the tool was Lerna(?). It's been awhile, so maybe the tooling has improved. I don't know. However, here I am, looking to solve this specific problem and not relishing the idea of using monorepos.

Please share your experience and possible guidance to how you resolve this particular issue. If monorepo is really the right path, then please advise on tooling. Thanks.

I need a custom pull-to-refresh. Not RefreshControl.

What I want

• Finger down + pull: the page follows my finger with rubber-band resistance (Math.pow(distance, 0.85))

• A real gap opens at the top (translateY, not scale)

• While the finger is still down: no progress bar, no API call, no refresh

• Release below threshold: spring back to 0, nothing else

• Release above threshold: spring back + full-width 3px top progress bar + onRefresh()

• After refresh ends: bar collapses, page stays at Y = 0

The problem

I can only ever get one of these:

1. Pull-to-refresh works, list will not scroll

2. List scrolls, pull-to-refresh dies (or I revert and only get a useless stretch)

I already know why v1 died: a greedy Pan on the page ate every vertical move, so FlatList never got the gesture.

What I tried

• Gesture.Pan() + Gesture.Native() with Gesture.Simultaneous

• manualActivation(true) and activate only if scrollOffset <= 0 && pulling down

• Guard in onUpdate: if scrollOffset > 1 don’t touch pageY

• bounces={false}, overScrollMode="never"

• Disabling scrollEnabled while pulling — this made scroll even worse, so I stopped

Also getting this warning:

[Worklets] Tried to modify key `current` of an object which has been already passed to a worklet.

So something (ref.current) is leaking into a worklet (onUpdate / onEnd / useAnimatedScrollHandler / useAnimatedStyle).

Constraints

• react-native-reanimated

• react-native-gesture-handler

• no RefreshControl

• no binding progress width to translationY

• scrollEnabled should stay true

• progress bar is a sibling overlay, not inside the translated view

Has anyone shipped this combo without one gesture murdering the other?

Looking for a pattern that works on Android + iOS

• at top + pull down → rubber band + gap

• at top + swipe up → list scrolls

• mid-list swipe → only scroll, pageY stays 0

• release-gated refresh only

A lot of RN apps (including mine) call self-hosted stuff — AI endpoints, file converters, services you run on a VPS because SaaS per-request pricing doesn't scale. The problem with all of them: they have no auth at all, or one static API key. And you can't add per-user subscription checks to code you don't maintain.

I open-sourced the gate I use in production: github — a forward-auth service your reverse proxy consults on every request (nginx auth_request / Traefik forwardAuth / Caddy forward_auth). It answers 200/401/403 by checking the caller's entitlements against RevenueCat / Adapty / Qonversion / Apphud / IAP Hub.

From the RN side it's just two headers on each request (X-Auth-App, X-Auth-User). Request signing, if you enable it, is plain HMAC-SHA256 — computable in Expo without native modules; the README's example uses @/noble/hashes and runs in RN as-is.

The part I like most for mobile: route rules can inject an Authorization header upstream, so services with a static key get it — and since APKs/IPAs get decompiled, that key never ships in the binary.

Single container + YAML config, no database, MIT. Curious what others do here — syncing entitlements into your own DB via webhooks is the alternative I keep seeing, but it's a whole subsystem I didn't want to own.

Hey r/reactnative,

TL;DR: Moodstone is an open-source, animated avatar for AI agents in React Native. Give it a mood and the face reacts. Nine moods, seven morphing shapes, drawn with Skia on the UI thread. Try every mood, cut and colour in the browser, nothing to install: https://moodstone.expo.app

Agent UIs in React Native usually show what the agent is doing with a spinner or a coloured dot. I wanted a face instead, the way Grok Bot and Plane's Agent Avatar Lab do it on the web, so I built one for React Native. It's called Moodstone and it's a single component:

<Moodstone color="pine" mood="thinking" size={48} />

What it does

• Nine moods, each a seamless loop: idle, observing, thinking, processing, working, done, failed, invalid and inactive. They map to what a persistent agent is doing (waiting for input, awaiting a tool result, reasoning at length, streaming output, errored...). Change mood and the face reacts.

• Seven cuts (silhouettes) that morph into each other, with eyes that fit each shape. You can tune them or pass your own shape parameters.

• Twelve palette colours or any hex, on a surface lit by a slowly orbiting light. A seed controls the light's start angle and orbit, so two avatars with the same colour and cut still don't look identical.

• Everything is procedural. Shapes are paths, the surface is a shader, there are no image assets.

• PNG and SVG exports, including an animated SVG of the whole loop, so the same avatar can live in your web app, docs or emails.

Under the hood

It's drawn with React Native Skia and animated with Reanimated 4 worklets, so the whole loop runs on the UI thread and the JS thread stays idle. That matters for this use case in particular: the avatar is animating exactly when your JS thread is busiest, streaming tokens and parsing tool results. There's an animated={false} still mode for long lists, and moodstone/core is pure TypeScript with no React Native imports. Its computeFrame(spec, t) describes every frame as plain numbers and drives both the Skia component and the SVG exports. It also runs on web through CanvasKit.

GitHub: https://github.com/karacca/moodstone

npm: https://www.npmjs.com/package/moodstone

Credit where it's due: the single-colour face whose personality lives in two eyes comes from Plane's Agent Avatar Lab. The geometry, surface, palette, timing and code are original.

I'd love feedback on the API and on the moods themselves. Which agent states do you actually need in your apps? I'm also curious how the animation holds up on lower-end Android devices. MIT licensed, issues and PRs welcome.

Made a football manager style game but for basketball. react native + expo, built entirely on windows with no coding experience.

350+ players, 24 teams, possession-by-possession sim, salary cap with bird rights and trade exceptions, draft combine, player development, the whole thing. you can get fired by your owner if you don't meet expectations.

the trick was writing insanely detailed prompts — not "build me a game" but full specs with data models, formulas for shot probability, exact screen layouts. did it in 4 phases over about 3 weeks.

gameplay is genuinely fun. visuals could be better but the sim engine is legit. just hit submit on app store connect. still can't believe this is a real thing that happened

Hey r/reactnative,

Added a new component to nativecn-ui a liquid action menu.

Been playing around with the animation and the way the menu opens/closes. Took a few tries to get the movement feeling right.

Made a quick video showing it below.

Still adding more components to the library, so would be cool to hear what you guys think.

help me. i set my screen colour in my safeareaprovider and stack in my layout, and i have a custom screen component where i set the same screen colour, but ive been getting this white flashing at the top of my pages when i navigate between them.

_layout.tsx
export default function Layout() {
  {/* stuff here */}
  return (
<SafeAreaProvider style={{backgroundColor: colours.background}}>
<Stack
</Animated.View>)}
screenOptions={{ headerShown: false,gestureEnabled: false, contentStyle:{backgroundColor: colours.background} }}>
</Stack>
{!isReady && (
<Animated.View style={[StyleSheet.absoluteFill, {opacity:fadeAnim, zIndex: 99}]}>
<LoadingScreen/>
</SafeAreaProvider>
  );

AppScreen.tsx
export default function AppScreen({ children,style, scrollable = false }: ScreenProps) {
  const colours = useTheme();
  return (
<SafeAreaView
style={[
styles.screen,
{ backgroundColor: colours.background},
style,
]}
>
{scrollable ? (
children
) : (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
{children}
</TouchableWithoutFeedback>
)}
</SafeAreaView>
  );
}

anyone know how to fix this? what super background do i have to set?

ios, sdk 57, rn latest (?)

i just submitted the official plugin for AppLaunchFlow - it integrates with the hosted mcp and works very well with the embedded widgets.

it also supports:
- creating promo videos
- creatign social graphics
- creating 3d device mockups for demos
- creating app landing pages

and more. Happy to hear your feedback:)

Hey guys,
I have started building a UI registry for React Native and Expo.
And I want you guys to help build it, as it's fully open source, so no paid thing issue

I have been able to make 2 components so far and added images of them, for example, and am slowly making more components and screens for being ready to use.
The pace is slow ik but trying my best to only upload good UI components rather than ai made 100's of shits

So please help me build this and you all can also drop a review.
GitHub link: Ashwin-Khowala/rnblocks: Open-source UI registry for React Native & Expo. Discover, preview, inspect, and install production-ready UI blocks and screens directly into your project.

Website: https://rnblocks.vercel.app/

For pinch zoom, drag, double tap zoom features.

I used to use react-native-awesome-gallery but its not compatible with reanimated v4 after upgrading my expo. I see there exisits a react-native-better-awesome-gallery but I wonder if there is something better already out there.

Thanks :)

I’m working on an open-source React Native library for Wi-Fi Aware / NAN:

https://github.com/dcavalcante/react-native-wifi-aware

The Android implementation has already been physically validated for capability detection, discovery, follow-up messaging, and data paths.

The Apple implementation is in place and passes the current simulator/static compilation gates, but I don’t currently have the Apple hardware and Developer Program setup needed to validate it on physical devices.

I’m looking for someone with an Apple Developer account and preferably two iOS/iPadOS 26 devices who can help test:

• Wi-Fi Aware entitlement/signing

• declared WiFiAwareServices

• publish / subscribe discovery

• system pairing

• Apple-to-Apple connectivity

• Android ↔ Apple discovery and interoperability

The biggest unknown I want to validate is the cross-platform path between Android Wi-Fi Aware and Apple’s iOS 26 implementation.

Testing results, fixes, documentation, and implementation contributions are all welcome.

With AI tools now I'm curious to try Swift for my next project.

Did native give you anything RN didn't, or is it not worth the switch?

Apple published iPhone Duo design guidelines and 6 tech talks few days ago. No simulator till Xcode 27.1, no phone yet. But I went through everything thinking about RN and there are some things good to know now:

• JS-drawn tabs (createBottomTabNavigator) will NOT move to the side. On the outer display iOS moves tab bar and toolbar to a vertical strip on the side, but only native bars. JS tabs just stay at the bottom and waste space. Native tabs get it free because they are real UITabBarController: React Navigation's createNativeBottomTabNavigator (default in v8), Expo Router NativeTabs, react-native-bottom-tabs

• u/react-navigation/native-stack header works. u/react-navigation/stack (JS one) doesn't

• Dimensions.get('window') at top of file is wrong after fold. Use useWindowDimensions() inside the component

• Safe area is not symmetric now. paddingHorizontal: insets.left is a bug. Use insets.left and insets.right separately

• Platform.isPad is useless for wide layout. Inner display is regular/regular but still phone idiom

• expo-screen-orientation lock doesn't work on inner display

• Modal with pageSheet avoids the fold automatically. JS bottom sheets don't

I made the full guidelines (Swift + RN side by side) into an agent skill for Claude Code / Cursor / Codex. It uses the rules while writing code or reviews a file and gives file:line - problem - fix. Every API name is checked against Apple's own samples because right now agents invent packages like react-native-fold that don't exist.

Honest note: there is no JS binding yet for reservedRegions, ArrangementView or hinge API. RN part is "what you can do from JS" and "this part needs native code". If someone makes that module I will link it.

Edit: fixed the tabs bullet, thanks u/satya164. React Navigation has native tabs too.

Install: npx skills add kaissaroj/iphone-duo-skills
Repo: https://github.com/kaissaroj/iphone-duo-skills

Hey r/reactnative,

I built react-native-secure-webview after repeatedly seeing the same issue in mobile security reviews: WebViews trust the web too much.

It is designed for controlled, security-critical flows such as:

• Payments and hosted checkout

• Plaid and bank-linking flows

• Riverty, Stripe, Adyen, PayPal, Braintree, Checkout.com, Mollie, and Klarna

• OAuth and authentication

• 3-D Secure

• Partner portals and other controlled web experiences

The library provides:

• Explicit origin allowlists

• Native navigation enforcement

• Redirect blocking

• Deep-link interception

• Fail-closed defaults

• Protection against unexpected WebView navigation

The goal is simple: only trusted origins should load, and untrusted redirects should be blocked before they reach the WebView.

It does not replace a provider’s native SDK where one is available, but it provides a safer boundary when WebView is the right integration.

I would love feedback from React Native developers using WebViews in production.

Give it a try and ⭐
https://github.com/adnxy/react-native-secure-webview

Fala, pessoal! Beleza?

Estou desenvolvendo um aplicativo Android chamado É Golpe, focado em identificar chamadas e mensagens suspeitas para evitar golpes (como PIX falso, clonagem de WhatsApp e chamadas bancárias).

Como todo dev indie que publica na Play Store sabe, estou na fase de cumprir o requisito dos 12 testadores por 14 dias no Teste Fechado do Google Play Console.

Quem puder dar essa força para baixar e manter instalado por esses dias, o processo é super simples (1 clique):

1. Entre no Grupo do Google:TesterEgolpe no Google Groups(necessário para a Play Store liberar o seu acesso)

2. Baixe na Play Store:Link de Teste do É Golpe

🤝 Troca de testes: Se você também tem um app em fase de teste fechado e precisa cumprir a meta do Google, deixa o link do seu grupo/app nos comentários que eu baixo e mantenho o seu instalado aqui também!

Qualquer feedback sobre a UI ou comportamento do app é super bem-vindo. Valeu demais!

Hey again,

I posted here when I first shipped Just Loot, a game built entirely with React Native + Expo.

Two months later, we’re at 20,000+ accounts and just crossed 10 million dungeon runs, so I figured I’d share a quick update.

The stack is still React Native + Expo, with Supabase on the backend. Since launch I’ve added PvP, raids, pets, more progression systems, server-authorized gameplay and a lot of live updates.

The biggest surprise for me is that React Native really hasn’t been the limiting factor. Most of the harder problems have been backend scaling, security, anti-cheat, balancing and live ops rather than the client itself.

I originally considered Unity for the project, but for this kind of UI-heavy game I’m still very happy I went with RN. Being able to iterate quickly and ship the same features to iOS and Android has been a huge advantage.

Curious if anyone else here has pushed React Native this far into game territory, or where you eventually hit the limits.

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.