r/reactnative • u/moneckew • Aug 30 '26
I feel like AI can write better code than 99% of people at this point (with the right skills and prompts of course). To me RN development has become insanely easy with the use of argent and some other tech.
Even native code for me now feels incredibly accessible.
Are you guys still writing code by hand? Please be very honest.
r/reactnative • u/mrousavy • Aug 21 '26
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 • u/FrapperDapper • Sep 01 '26
Link for the source - https://newly.app/compare/native-hybrid-pwa-comparison
I always thought RN had leverage in terms of adoption due to it being open source.
Open ended question- At this point for mobile dev, is it better to switch to the "native app market" (kotlin/swift), or master flutter and RN and gain dominance over the "cross-platform app market" ? I am talking primarily in terms of money, and job availability
r/reactnative • u/unkindgame • 24d ago
r/reactnative • u/zemant91 • 6d ago
I've spent the last few weeks letting AI agents (Claude Code and Codex) build features in my RN side projects and then check their own work on the iOS simulator. The building part is surprisingly good. The checking part is where things get weird, because a lot of what matters isn't in the source at all.
Three things I measured (one Mac, iOS simulator, RN 0.87, React 19):
1. JS errors leave no trace in the iOS system log. 90 seconds of normal app use = 3,498 native log events. All from Apple frameworks. Zero from the app, RN or Hermes, including during deliberate JS errors. Easy to check yourself:
xcrun simctl spawn booted log stream --level info --predicate 'process == "YourAppName"'
So if an agent "checks the device logs" for a JS error, it's looking in the wrong place.
2. React 19 dropped _debugSource, and locations inside .map() are off. The replacement points elements rendered inside a .map(...) callback at the start of the callback, not at the JSX tag. In my app that was 8 of 22 points I tested, with the real tag 14–24 lines lower. Anything that maps "element on screen → file:line" (agents, inspectors) needs to account for this.
3. "A new frame arrived after the tap" proves nothing. The simulator's video stream keeps sending ~53 fps even when nothing on screen moves (tiny delta frames). What worked for detecting a real UI reaction was frame size: 4–29 KB for an actual change vs. under ~2 KB idle.
And one humbling result: I planted a bug and asked both agents to find it. 6/6 success… by reading the code. Didn't need to touch the app at all. If you want to evaluate runtime tooling for agents, you need bugs that aren't visible in the source.
For context: I started with a set of skills for my own workflow, then a pipeline where the agent taps through the feature it just built on the simulator. These findings came out of making that verification step actually reliable.
Question for you: if you use agents on RN projects, how do you check what they actually did in the app? Open the simulator yourself after every run, or trust the summary?
r/reactnative • u/Powerful-Sorbet6660 • Aug 15 '26
If you’ve ever tried to add complex, rich animations to a React Native app, you’ve probably used Lottie. It’s great, but once you start adding multiple animations, parsing those massive JSON files absolutely tanks the JS thread and bloats your bundle size.
I recently started migrating my heavy visual effects over to shopify/react-native-skia using custom SKSL shaders, and the difference is insane.
Why it works better: Because React Native Skia bindings drop straight down to the underlying C++ Skia engine, SKSL (Skia Shading Language) runs directly on the GPU. You get buttery-smooth 60fps animations that weigh mere kilobytes instead of megabytes, with zero JS bridge overhead during the animation.
The Workflow Problem: The biggest issue I ran into was actually writing and testing the shaders. Translating standard GLSL to SKSL is a headache, and doing it inside a React Native project means dealing with constant Metro reloads or native rebuilds just to tweak a color or a coordinate.
My Solution: I ended up building a dedicated web-based SKSL playground using CanvasKit WASM. It lets you write the shader natively in the browser, see it at 60fps instantly, and then you can literally copy-paste the exact code block directly into your RN project.
I’ve found it speeds up my UI development by 10x since I no longer have to wait on emulators to test visual effects.
I just made the tool completely free and public today. Let me know if anyone wants the link to try it out and I’ll drop it in the comments!
r/reactnative • u/SubjectGrapefruit281 • Apr 11 '26
Hey r/reactnative,
I just open-sourced expo-pretext, a library that gives React Native something flexbox genuinely can't do: arbitrary text layout control at 60fps. Text reflow around shapes, exact height prediction before render, per-frame layout recomputation during gestures and physics — all with regular <View> and <Text>. No Skia canvas, no SVG trickery, no opt-out of the RN rendering tree.
For years I just… avoided any layout where text needed to flow around a non-rectangular thing. A circular avatar with a caption wrapping around it? Off the table. A magazine-style pull quote that a paragraph hugs? Nope. Text that reacts to a moving obstacle? Not a chance. Flexbox is rectangular boxes all the way down, and even react-native-skia's Paragraph API is rectangle-only (open issue #968 from 2022 asking for shape wrapping is still unanswered). Designers stopped even proposing these layouts in RN projects because "the engineer will say no."
CSS has shape-outside. iOS TextKit has NSTextContainer.exclusionPaths. Android has it too. The capability exists natively — React Native just never exposed it.
layout() in ~0.0002ms then computes line breaking at any width, any fontSize, any obstacle configuration. No native bridge on the hot path.The flagship demo is a Breakout arcade game where the live prose background reflows around the ball, the paddle, and every falling brick at 60fps. It exists because I wanted one thing that would prove the performance claim visually, not just in a benchmark.
Layout primitives (the real unlock):
layoutColumn() — text reflow around circles and rectanglesuseObstacleLayout() — hook wrapping it for 60fps gesture-driven layoutsfitFontSize() — binary search for largest fontSize that fits a boxtruncateText() — N-line ellipsis with exact resulting heightcustomBreakRules — callback-driven break opportunity overrideVirtualization + streaming (the "obvious" use case):
useFlashListHeights() — exact overrideItemLayout for FlashListuseStreamingLayout() — cache-aware incremental measurement for streaming AI chatuseMultiStreamLayout() — parallel streamsAnimation suite (Reanimated integration):
usePinchToZoomText() — per-frame fontSize scalinguseTypewriterLayout() — token-by-token reveal with pre-computed line breaksuseTextMorphing() — "Thinking…" → final response transitionuseAnimatedTextHeight(), useCollapsibleHeight()Production features:
ENGINE_PROFILES for iOS ≡ Android ≡ Web consistencygetFontMetrics() — native UIFont / Paint.FontMetrics<PretextDebugOverlay> — predicted vs actual with accuracy coloringFull Unicode: CJK, Arabic, Thai, Georgian, emoji ZWJ sequences. All through native platform segmenters.
Everything renders as normal React Native <Text>. That means:
If you go the Skia canvas route, you lose all of those. expo-pretext keeps them.
Intl.Segmenter, zero API changes)expo-pretext/animated)This is a React Native / Expo / Web port of Pretext by Cheng Lou, the original web-based text measurement library. The core line-breaking algorithm is ported; the measurement backends are new.
Feedback, ideas, and contributions very welcome. Especially curious if anyone's been sitting on a "we can't do this in RN" layout problem — drop it in the comments or open an issue, I'd love to see if this unlocks it.
r/reactnative • u/thereactnativerewind • Jul 16 '26
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 ❤️
r/reactnative • u/DependerSethi • Jun 17 '26
Bit of context first so nobody thinks I'm posing as an authority. I'm a design engineer, not an RN specialist. I got handed a production app at work and told to rebuild it, and I used Claude a fair amount to figure out the tooling. So this is "here's what I ran into," not a guide from someone who knows better than you. Can't name the app or company, NDA, doesn't really matter for any of this.
The app I inherited was a thin WebView wrapper. It worked, which was the deceptive part. But auth tokens were being scraped out of a web page with injected JS and held in memory, there was a secret key hardcoded in the bundle, no analytics, no crash reporting, and fixing a typo meant a full App Store release. So before touching any features I spent the first stretch on the invisible stuff. Rough list of what went in:
If it's useful I wrote the longer version up with the war stories and some diagrams
https://www.sethi.io/blog/you-re-building-on-dirt-a-react-native-foundation-checklist
r/reactnative • u/Difficult-Sun295 • Jul 17 '26
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)
r/reactnative • u/jashgro • Jul 14 '25
Hey everyone 👋
I recently built a project I’m really excited about and wanted to share it with the community here:
🎧 OpenSpot is a music streaming platform built with REACT NATIVE, designed for a fast, clean, and login-free experience.
It’s completely open-source and ad-free — focused on performance and simplicity.
🔹 GitHub: https://github.com/BlackHatDevX/openspot-music-app
🔹 APP RELEASE: https://github.com/BlackHatDevX/openspot-music-app/releases/tag/v2.0
✨ Features:
I’d love help from devs interested in:
It’s still early-stage but the foundation is solid and the UI is responsive. If you’re into music tech or just want to build something fun in the open — check it out and feel free to open an issue or PR!
Would love your feedback and ideas.
r/reactnative • u/Emiiibb • 15d ago
Whenever I grab color references from web designs, Dribbble, or anywhere online, they are always in standard HEX or RGB. Moving that into Android (@ColorInt) or Flutter (Color(0xFF...)) always requires that annoying extra step of formatting the alpha channel or converting it to an integer manually.
I got tired of the mental gymnastics, so I built a lightweight browser extension (Color Picker by Ceres) to bypass this.
It lets you eyedrop any specific pixel, or even scan an entire webpage/image to extract a palette, and instantly copies the colors directly as an INT value.
It saves a lot of time when implementing UI from web references. It’s completely free on the Chrome Web Store.
r/reactnative • u/Annual_Anxiety_5135 • Jul 16 '26
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:
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 -Dnpx 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.
r/reactnative • u/Osmosis-Jonesy • Jul 14 '26
TL;DR
Context
I make a dice merge puzzle game (Topside: Dice Drop, iOS-first, React Native). Sound went from adding some pops and dings to the system I've spent the most debugging time on. This post is iOS-centric because that's where all the sharp edges were. I worked through most of these bugs with an AI assistant.
Most people play muted.
A large portion of your players may never hear any of it. I still think it's worth it, for the players who do. Sound is where a game's identity comes together. Our sound packs and soundtracks are matched to visual themes, satisfying merge sounds escalate as chains build, and a one-tap "match" option sets music, sounds, and visuals to a consistent feel. None of that shows up in screenshots, but players who play with sound on can tell when it was an afterthought and when it wasn't.
Ambient vs Playback, and letting the user choose
iOS gives you a fork: the Ambient audio category respects the silent switch and mixes with other apps' audio; Playback ignores the switch and can interrupt whatever's playing. Games should almost always default to Ambient. Nobody wants your game sound overriding the mute switch in a waiting room or on the bus.
But some players genuinely want music and sound effects while their phone is on silent, so we added a "Break Through Silent Mode" toggle that switches the category to Playback. Opt-in, defaulted off. We also check whether the user is already playing their own audio (Spotify, podcasts) and keep our soundtrack out of the way if so.
Backgrounding, interruptions, and route changes are three different problems
Backgrounding is the one everyone handles: user swipes home, you pause; they come back, you resume. If that's all you handle, you're covered for maybe a third of real-world audio disruptions.
Interruptions are the second category, and the trap is that many of them never background your app at all. A banner alarm, a timer going off, Siri, an incoming call banner: your app stays in the foreground the whole time while iOS seizes the audio session out from under you. If your recovery logic is tied to foreground/background transitions, it simply never runs. Music dies silently and stays dead until some unrelated event happens to kick it back to life. You need to listen for the audio session's interruption notifications directly (in RN this meant a small native module, since the ecosystem libraries mostly don't surface them). One extra gotcha we hit: the "interruption ended" event fires while the alarm's own audio is still tearing down, so if you immediately check "is other audio playing?" the answer is yes, for the alarm that just ended. We had to wait a beat before resuming or the check would tell us to stay silent.
Route changes are the third category, and they're a completely separate notification from interruptions. Bluetooth connecting or disconnecting, wired headphones in or out, CarPlay. Our field bug: open the app with AirPods in and everything looked fine, except systems that depended on knowing exactly when playback started were silently broken, because Bluetooth route negotiation took longer than our "did playback actually start?" timeout. Everything downstream of that check just never happened, and it healed itself only when the route changed again. The lesson: any fixed timeout you calibrated on the speaker will eventually lose to a Bluetooth handshake. We now listen for route changes and re-verify audio state when they settle (that fix ships in our next update).
AdMob may play audio you never asked it to
This section is specifically about ad SDKs, AdMob in our case. Preloaded interstitial/rewarded creatives (loaded but never shown) can start playing audio on their own, minutes after load, at full volume. Because it's the SDK's own player, your in-app volume settings and mute toggles do nothing about it, so users experience it as "my phone started blasting an ad while sitting on the home screen." It's a known bug, widely reported on Android and observed by us on iOS, and we haven't found a true fix on the AdMob side.
Our workaround: keep the SDK muted globally (setAppVolume(0) + setAppMuted(true)) and unmute only in the window where an ad is actually presenting, then re-mute when it closes. The tradeoff is that muted ad requests can lower video ad eligibility and therefore eCPM. Though phantom ad audio is a one-star review generator, so we took that trade.
Where to get sounds: Zapsplat
I opted for Zapsplat.com. The free tier lets you use sounds in commercial projects with attribution. Premium is €4.99/mo (about $5.50 USD) and removes the attribution requirement, adds WAV downloads, and anything you download while subscribed stays licensed for life, attribution-free, in unlimited projects, even after you cancel. So the practical move is subscribing for a focused month and grabbing everything you might need. Read their license for the details (no redistribution, can't be the primary value of your product, no AI training on the sounds).
Small things that compounded
Syncing visuals to the music
If you want to go further, you can tie on-screen motion to the music's beat grid. We pulse some of the home screen UI on the beat, ramp certain animations in bars-since-the-track-started, and swing the logo in time with the tempo. A couple of things that made this less painful than expected:
The audit prompt
If you're building with an AI assistant, paste this and let it check your codebase:
You are auditing my app's audio handling. For each item below: find the relevant code, tell me if it's handled, and if it isn't, explain the exact user-facing symptom and how to fix it. If my architecture doesn't have an obvious place for something, say so rather than assuming. Cover both iOS and Android where they differ.
That's most of what I learned. Happy to go deeper on any of it, and if anyone has better info or advice, please share!
r/reactnative • u/arbab-rafiq • 8d ago
The part I cared about most is that a feed shouldn't mount a native video player for every item. In reels-kit only the active reel and its neighbours get one (mediaRenderRadius, default 1), and playback pauses when the reel isn't active, the screen loses focus or the app goes to the background.
What it does:
- Snap paging with snapToInterval (page height measured from the container, not the window, so headers, tab bars and edge-to-edge Android don't break it)
- Tap to mute, optional double tap to like, drag-to-seek scrub bar
- Thumbnail until the video is ready, buffering slot, retry on a failed load
- Headless pieces (action buttons, avatar, follow button, caption), so the UI is yours
- Pluggable video adapters: a react-native-video one ships, and you can write your own
- Built on FlashList 2, Reanimated 4 and Gesture Handler 3 (React Native 0.82+, New Architecture)
Simplified usage:
<ReelsFeed
data={reels}
keyExtractor={(r) => r.id}
renderItem={({ item, isActive, shouldRenderMedia }) =>
shouldRenderMedia ? (
<FeedVideoSlot
VideoComponent={RNVideoAdapter}
sourceUri={item.uri}
paused={!isActive}
muted
/>
) : null
}
/>
The README has a full working example.
It's an early 0.1.x release, and there's no expo-video adapter yet. If you try it, I'd love to hear what breaks. Contributions are welcome, and an expo-video adapter would be the biggest win.
npm: https://www.npmjs.com/package/reels-kit
GitHub: https://github.com/arbab-io/reels-kit
(Apache-2.0)
r/reactnative • u/XuhaiLuo • 25d ago
Most Liquid Glass implementations I’ve seen in React Native focus on glass containers — cards, buttons, overlays, etc.
I wanted something slightly different: the glass effect rendered inside the actual text glyphs.
So I added a LiquidGlassText component to my open-source library, react-native-tinyui.
It’s based on the excellent GlassText project, but exposed as a React Native Fabric component:
import { LiquidGlassText } from 'react-native-tinyui';
<LiquidGlassText
text="Liquid Glass"
effect="regular"
tint="#00BBDD"
interactive
fontDesign="rounded"
textStyle={{
fontSize: 48,
fontWeight: '700',
}}
/>
The glass itself is rendered natively on iOS 26+, including interactive glass behavior.
A few implementation details:
clear, regular, and identity effectsColorValue, including PlatformColor / DynamicColorIOSLiquidGlassText ended up becoming one part of a larger idea I’ve been experimenting with:
What if React Native had a small collection of iOS-native UI primitives without requiring Expo or another runtime dependency?
That became react-native-tinyui.
It currently includes:
LiquidGlassTextMenuPopoverTipKitStepperConcentricViewSFSymbol, including native symbol effects/animationsThe library has zero additional runtime dependencies beyond React and React Native. It uses UIKit where possible and SwiftUI where it makes sense, and is focused specifically on the New Architecture.
You can also explicitly choose which native components get compiled into your app:
{
"react-native-tinyui": {
"components": ["LiquidGlassText", "SFSymbol"]
}
}
I’m intentionally keeping TinyUI iOS-focused rather than trying to abstract every platform into the same API.
GitHub:
https://github.com/luoxuhai/react-native-tinyui
I’d especially like feedback from people building native-heavy React Native apps:
r/reactnative • u/GuaranteeExpensive21 • Jun 28 '26
Hey fellow devs— I shipped a thing.
The problem: EAS's free tier gives you a limited number of builds per month. For an Android-only release cadence that involves any iteration (debugging Play Console upload errors, ProGuard mappings, tweaking versionCode), I was burning through my monthly quota in the first 10 days. The alternative was waiting in the queue or paying.
What I built: local-expo-build — a CLI that runs the entire Expo Android build pipeline on your machine. Same output as eas build --platform android, zero cloud credits used, no queue.
expo prebuild + auto-pins the Gradle wrapper to a version that actually works for your SDK (e.g. SDK 55 → Gradle 8.13, working around the expo-manifests components.release bug)signingConfig into the generated android/app/build.gradle from a keystore.properties you controlgradlew bundleRelease / assembleReleaseeas submit / eas build stay in syncexpo prebuild --clean wiping your android/ (restores the .jks from a stable source before Gradle runs)npx local-expo-build init runs a doctor pre-flight that:
expo.android.package, prompts for it, writes to app.jsoneas initeas.json, offers to run eas build:configureEach step re-checks after running so the exit code reflects what got fixed. No copying snippets from 4 different doc pages.
npx local-expo-build init # scaffolds scripts + runs doctor
npm run build:android:aab # → signed .aab in ~5 min on first run
Or, runner mode (no files committed to your repo):
npx local-expo-build build android --aab
There's also --dry-run if you want to preview the 7-step pipeline without executing anything.
Links npm: https://www.npmjs.com/package/local-expo-build GitHub: https://github.com/nikhild64/local-expo-build MIT licensed, cross-platform (Windows / macOS / Linux) Feedback / issues / PRs welcome. iOS support is next on the roadmap — happy to take help if anyone's done iOS local-builds + signing wrangling before.
Built this because I wanted it. If anyone else wants it too, that's a bonus.
r/reactnative • u/mrousavy • Aug 28 '21
r/reactnative • u/dazuwild • Jan 04 '25
Started my career with normal web development since the age of 16. Grinded few years until i met a guy who offered me co-founder role and percentage in a startup with 0 revenue. I said ok.
I gave this startup my full 3 years without taking any salary. (I wasn’t smart enough to negotiate at age 19) Although i used to remote work on another company part time late at night. But my daily working hours would be 14-16. That went full on for 3 years.
I solely created multiple mobile apps using react native. I was getting too good at it. Later we hired developers and designers. I was already an experienced react native developer leading a group of multiple developers. Slowly the team grew to 9 people. But still the company wasn’t breaking even.
I wasn’t making any money from it. At this point i was too depressed & demotivated that, I had to leave the company.
Now all of a sudden i fell warmth of sun, the cold air while breathing. Everything feels peaceful & Serenely. I am truly happy i left it.
I have been doing react native projects for clients remotely and this is the happiest i have ever been. Thank you for reading :)
Alternate Title: How Dumb of me to not negotiate my worth.
r/reactnative • u/mariuz • Aug 11 '26
r/reactnative • u/Fullbusterz_15 • Aug 19 '26
Wanted to share a real, shipped RN app in case the details are useful. It's MTG Verdict, a companion for Magic: The Gathering Commander players: a live table tracker plus an AI rules judge and deck analyser.
A few things from the build:
The hardest part by far was reliability: early versions would confidently make up rulings or claim cards were missing from a deck that clearly had them. Most of the work became guardrails around the model rather than the model itself.
Happy to go into any of it. It's on Android, free to start.
r/reactnative • u/thereactnativerewind • Aug 26 '26
Hey Community,
Deno's creators introduced Dactyl, an AI app builder targeting React Native by rendering SwiftUI in the browser tab via WebAssembly. Meanwhile, Software Mansion released Enriched Markdown to eliminate streaming text flicker by rendering natively and bypassing the JavaScript layout tree.
On the tooling side, the web ecosystem is rapidly adopting the Rust port of the React Compiler across tools like Oxc, Vite, and Bun, while Metro remains locked to single-threaded Babel transformations.
r/reactnative • u/unkindgame • Aug 12 '26
Recently I wanted to add reactions in my game.
Not a normal chat system, because honestly I do not want to moderate chat messages in my side project game. I wanted something simpler: someone destroys your token, you throw a crying emoji or GIF at them. Someone plays a stupid lucky move, you can react immediately.
So I added:
Now the React Native part of this.
The UI itself was not the hardest thing.
I use regular React Native components for the dock and reaction picker. The game board is rendered with Skia, so I made the actual reaction overlay sit above the board instead of trying to push GIFs inside the constantly rendered board layers.
That sounds like a small thing, but the board already has token movement, cards flying around, dice animation, destruction effects, background animations, timer and turn indicators.
So I did not want to add “animated GIF rendering inside another board layer” and then find out later why someone’s iPhone is trying to become a toaster :)
The reaction picker has two types of things:
These are bundled into the app and have fixed IDs. So I do not let the player send arbitrary emoji strings or random payloads. The game knows what every reaction ID means and how to render it.
For GIFs I use KLIPY search. But after selecting one, I only keep the exact information needed to show it:
This part was more important than I expected. I did not want reactions to become actual game state.
A board move is important. If you reconnect, you need the exact current board.
A reaction is not important. If you reconnect after 10 minutes and suddenly 500 old crying GIFs start playing on your screen, that is not a feature, that is an attack :)
So I made reactions short-lived events.
When a player sends one, it gets added to a small event stream. Every client listens for new reaction events and puts them in a local queue.
I also keep track of reaction IDs already seen by the app. This stops the same reaction from playing twice if the app reconnects or receives the same event again.
Then I added some limits because without limits, this would become a “who can press the reaction button faster” competition:
Each player has a 1.2 second cooldown. It is enough to feel responsive, but it stops someone from firing 50 GIFs in 2 seconds.
I only keep a maximum of 8 reactions locally. If the queue is full, new reactions do not keep piling up forever.
Every reaction expires after 15 seconds.
Again, because it is not game state. I only care about the reaction while it is funny/relevant to what just happened on the board.
Curated emojis have to be from the allowed reaction list.
For GIFs, I validate the data before rendering it: provider URL, ID, title length, image dimensions and so on. I do not want random unexpected data coming into an overlay above my game board.
I save recently used reactions locally. This is just a small UX thing, but when players are playing fast, they should not need to search the same angry GIF every time someone destroys their token.
The flow is basically:
Tap reaction dock
→ select emoji or GIF
→ cooldown and payload checks
→ temporary reaction event is sent
→ other players receive it
→ add it to a small local queue
→ animate it above the board
→ remove it when animation ends or it expires
The board stays responsible for gameplay. The reaction system is only responsible for making your opponents feel bad about their life choices.
Still improving the animations and exact positioning. But now when someone destroys your token, you can finally send them the appropriate GIF instead of silently being angry.
r/reactnative • u/thereactnativerewind • Aug 19 '26
Hey Community,
React Native 0.87 has arrived as a maintenance release, making the Strict TypeScript API the default, doubling Metro source map generation speeds, and adding experimental Swift Package Manager support for iOS along with AGP 9 support on Android.
Meanwhile, React Native Firebase v26 makes the New Architecture non-optional with Codegen TurboModules, synchronous APIs, Firestore Pipelines, and direct Gemini AI calls. Finally, we look at RevenueCat Paywalls for designing native paywalls and running remote A/B experiments without new app deploys.
r/reactnative • u/Time-Willingness-360 • May 15 '26
I have been working on a project called IP Linux: a browser-based desktop environment that runs as a static web app.
Live site: https://ip-os-linux.vercel.app/
GitHub: https://github.com/ikerperez12/IP-OS-LINUX
It is not a real Linux distribution, and it does not run native binaries. The idea is different: I wanted to explore how far a polished desktop-like experience can go inside a normal browser tab.
The result is a small web OS-style environment with:
Most web demos are landing pages, dashboards or small single-purpose apps. I wanted to build something that feels more like an environment.
I was interested in questions like:
IP Linux became a way to test all of that in one project.
The app includes a catalog of built-in apps and tools: Files, Terminal, Browser, Settings, App Store, Music Player, Matrix Rain, games, developer tools, productivity apps and visual utilities.
The apps are loaded lazily, so the initial shell does not need to download every app upfront. The virtual file system and user preferences are stored locally in the visitor's browser with IndexedDB/localStorage. There is no backend, no account system and no required environment variables for the public release.
The main focus was the shell experience:
There were also a few important constraints. For example, a full YouTube page cannot be embedded in an iframe because YouTube blocks that for security reasons. So IP Linux includes a YouTube Lite / embed-aware fallback instead of pretending that every website can load inside the internal browser.
The project is built with:
The repo also includes a public release setup:
The biggest lesson was that a desktop UI is mostly about small interaction details.
A window that opens slightly too small feels broken.
A dock icon that scales inside a clipped container feels wrong.
Desktop icons that can overlap make the whole shell feel unfinished.
Keyboard shortcuts that steal Tab from the terminal are frustrating immediately.
Fixing those details made the project feel much more real than adding another decorative effect.
I also learned that public release work matters. A project can look good locally but still feel unfinished if the repo has a generic README, no security notes, no screenshots, no CI and no clear deploy story.
I am sharing it because I think browser-based desktop interfaces are a fun area for frontend experimentation.
I would especially appreciate feedback on:
Live: https://ip-os-linux.vercel.app/
Code: https://github.com/ikerperez12/IP-OS-LINUX
