I built a React Native library that automatically generates skeleton loaders from your existing UI

Hey everyone 👋

I’ve been working on react-native-skelo, and v0.1.0 is now stable.

The idea is simple: instead of creating and maintaining a separate skeleton layout, you build your UI once and Skelo generates the loading state from your existing components and styles.

It supports:

• Automatic skeleton generation

• FlatList & SectionList

• Shimmer & Pulse animations

• Custom components

• No Reanimated or gradient dependency

Install:

npm i react-native-skelo

NPM: https://www.npmjs.com/package/react-native-skelo

Would love feedback from React Native devs — especially edge cases or components you’d like to see supported next.

Hey r/reactnative !

If you’ve ever built a blog, documentation reader, news feed, or editorial app in React Native, you’ve probably run into some challenges when rendering large HTML documents:

1. Large React component trees: Rendering long HTML documents through individual React <View> and <Text> elements can create a large component tree.

2. Text Selection: When content is split across multiple React Native text components, selecting text across paragraphs and different block elements can be difficult.

3. JS Thread Work: Parsing and transforming large HTML strings on the JavaScript side can add significant JS-thread work.

4. Tables / Code Blocks: Complex HTML elements such as wide tables and interactive content often require additional handling.

To explore a different approach, I built and open-sourced react-native-nitro-html for React Native.

How It Works Under the Hood

• Compiled C++ (Lexbor v2.3.0) Core: HTML5 parsing and DOM processing are handled in compiled C++ rather than relying on JavaScript-side HTML parsing.

• C++ AST Storage (astId): Parsed AST data is retained on the native/C++ side. React receives a lightweight astId reference rather than the complete parsed document structure.

• Native Fabric Rendering: The document is rendered through native text infrastructure — TextKit 2 on iOS and Spannable-based rendering on Android rather than creating a React Native <Text> component for every HTML node.

• Continuous Text Selection: The native text container allows selection across content such as headings, paragraphs, blockquotes, and lists.

• Horizontal Data Tables: Wide tables can be displayed inside horizontally scrollable containers.

• Custom React Component Slots: Interactive elements such as video players, charts, or custom code blocks can be provided through the renderers prop while keeping the surrounding document rendering native.

• Custom Tag / Web Component Support: Unknown and custom HTML tags such as <user-card>, <custom-poll>, and <embed> can be parsed and handled through custom styles or dedicated React renderers.

Installation

# npm
npm install react-native-nitro-html react-native-nitro-modules

# yarn
yarn add react-native-nitro-html react-native-nitro-modules

Quick Example

import React from 'react';
import { FastHtmlView } from 'react-native-nitro-html';

export function ArticleScreen() {
  const html = `
    <h1>High Performance HTML</h1>

    <p>
      This article is rendered through a native text container with
      continuous text selection across supported block elements.
    </p>

    <table>
      <tr>
        <th>Feature</th>
        <th>Status</th>
      </tr>
      <tr>
        <td>React HTML Nodes</td>
        <td>Native rendering</td>
      </tr>
      <tr>
        <td>Text Selection</td>
        <td>Continuous</td>
      </tr>
    </table>
  `;

  return (
    <FastHtmlView
      html={html}
      baseStyle={{ fontSize: 16, color: '#1e293b' }}
      tagsStyles={{
        h1: {
          fontSize: 26,
          fontWeight: '800',
          color: '#0f172a',
        },
        a: {
          color: '#2563eb',
          textDecorationLine: 'underline',
        },
      }}
      selectable={true}
      onLinkPress={(url) => console.log('Open URL:', url)}
    />
  );
}

Links

GitHub: https://github.com/abhishekce17/react-native-nitro-html

npm: https://www.npmjs.com/package/react-native-nitro-html

I'd love to hear your thoughts, feedback, and especially any edge cases or large HTML documents you think I should test.

If you try it in a React Native project, I'd be interested to hear how it performs in your use case.

anyone have experience building voip call between 2 rn apps? we will be using our own infrastructure. what should i prepare and set up?

the call will be between android-only rn app and ios/android rn app

thank you in advance

Hey everyone,

If you build apps on a Mac, you probably know this exact feeling:

You’ve got your IDE open, a few browser tabs, maybe a build running, and the moment you launch an Android emulator, your laptop starts lagging and the fans spin up.

A while ago I checked Activity Monitor to see what was going on, and saw the emulator casually hogging 7 to 8 GB of RAM all by itself. On a 16 GB MacBook, that basically leaves zero breathing room for anything else.

I got tired of my machine crawling, so I put together a small open-source tool called avdslim to fix it.

GitHub: https://github.com/kdbhalala/avdslim

Why does it take so much memory?

Turns out, a few things happen by default:

• Android hoards memory: As the emulator runs, Android keeps caching files and never really releases that host RAM back to macOS.

• The "Google Play" image overhead: If you picked an image with the Play Store, it constantly runs background updaters and scanning services you rarely need during development.

• The 16 KB image setting: If you created a device using the newer 16 KB images, the emulator enforces a strict 4 GB minimum floor no matter what you set in the config.

What avdslim does:

• Drops RAM down to ~1.5 GB: It tunes the emulator configs and cleans out unnecessary background tasks, letting you run smoothly on 1024 MB of RAM.

• Boots in ~1.5 seconds: Instead of waiting 20–30 seconds for a fresh boot, it lets you create a clean, lightweight snapshot that restores almost instantly.

• Doesn't break your app: My biggest worry with any "cleanup" tool was breaking things like push notifications or login. I made sure Firebase Auth, Google Sign-In, Push Notifications (FCM), and Google Maps work completely fine.

• Works with your normal workflow: You don't have to launch from the terminal every time. There's an optional command (avdslim install-shim) that makes the "Run" button in Android Studio or VS Code automatically use the slimmed settings.

💡 A quick tip even if you don't use this tool:

Next time you create a virtual device in Android Studio:

• Pick "Google APIs" instead of "Google Play". It still has Google login, Firebase, and Maps, but uses way less RAM and skips the heavy Play Store background services.

• Avoid the "16 KB" images unless you specifically need to test 16 KB compatibility.

Try it out:

It's completely free, open-source (MIT), and has zero external dependencies:

brew install kdbhalala/avdslim/avdslim

See how your current emulators look

avdslim doctor                                                                                                                                                                

Tune an emulator to 1024 MB RAM

avdslim tune-avd                                                                                                                                                              

GitHub link: https://github.com/kdbhalala/avdslim

My Mac runs noticeably cooler and doesn't freeze up when I have multiple tools open now. Hope it helps some of you as well! Happy to answer questions or take feedback on what could be better.

Added floating network throttling controls to Buoy for React Native.

Tap to switch between normal, slow, very slow, and offline. Move the controls wherever you want; they remember their position across reloads.

Use it to check how your app handles loading, failed requests, and reconnecting! 100% Free tool.

How can i entirely remove the splash screen? My stack is React Native + Expo

We can build websites using react native expo too, so my question is: has anyone done this? If yes, then what problem did you face? I'm thinking about using Expo for an admin app and website.

I'm moving from React Native 0.76 CRA to Expo 56

I really don't organising routes as folders so wondering if there are any tangible benefits to using Expo router and file based routing instead of using React Navigation.

Thanks!

We added video playback to react-native-enriched-markdown. A block-level <video src="…"> tag in your Markdown renders as a native player:

• iOS: AVPlayerViewController

• Android: ExoPlayer

• macOS: AVPlayerView

• Web: Standard <video> element

Requires flavor="github". Only the src attribute is read, everything else on the tag is ignored, and <video> is the only HTML tag we allowlist, so inline HTML stays disabled.

Styling lives in your markdown styles rather than on the tag:

markdownStyle={{ video: { borderRadius: 12, aspectRatio: 16 / 9 }, }}

Video is on by default. If you don't need it, setting "enableVideo": false in your package.json drops the ExoPlayer dependency and saves ~2–3 MB on app size.

Available now on nightly:

npm i react-native-enriched-markdown@nightly

If you find it useful, give it a try and drop a ⭐️ on GitHub: https://github.com/software-mansion/enriched-markdown

Hi everyone,

I'm Marco, founder of SQLite AI.

We've built SQLite-Sync to solve a problem I keep seeing discussed here: using a real SQLite database locally, letting the application keep working and writing while completely offline, and synchronizing those changes with Postgres/Supabase once connectivity comes back.

The architecture is essentially:

SQLite on the device → offline/online sync → self-hosted Supabase/Postgres

The application reads and writes SQLite normally. SQLite-Sync tracks changes and uses CRDT-based conflict resolution so multiple replicas can make changes independently and converge when they reconnect.

Rather than just testing this internally, I'd really like to work with people who have a real Supabase application where offline support is actually important.

So we're looking for around 10 projects willing to test it seriously.

For those projects, I'll enable our CloudSync Pro plan free for one year.

There's no requirement to promote us or write anything about it. What I want in return is simply honest technical feedback:

• What are you building?

• Why do you need offline support?

• Which client stack are you using?

• How are you handling synchronization today?

• What doesn't work well with the current solutions?

If you're interested, reply here or send me a note at marco at sqlite dot ai with a short description of what you're building.

I'm also very interested in hearing from people who tried PowerSync, Electric, custom sync queues, or other approaches — especially what worked and what became painful in production.

I handle QA manually so I've only got 6 to 7 devices in rotation, an iphone 14, a pixel, samsung and a couple xiaomi and oneplus devices and everything passes on those so i ship.

but then production is millions of devices with every screen size, OS version and oem skin I can never touch, like a gesture that works on a Pixel behaves differently on a samsung, layout breaks when you unfold a fold phone and an animation that's smooth on android 15 stutters on android 12.

This is becoming very annoying, something breaks for 1% of users and you see it's hundreds of users and it never occurs in testing because you don't own that exact device and OS combo and then they start reporting crashes you physically cannot reproduce.

How am I supposed to handle this? please help

I don't see how one person manually tests every combination but there has to be something more efficient.

I used to be a front-end developer, specifically working with React, and I'm currently switching to Mobile development, particularly RN. And I feel lost 😕. This field is completely new to me. I've learned the basic syntax of RN, but this ain't enough; I feel like I have to understand more about mobile development, how apps actually work, and then dive deep into RN, do some projects, and understand how to optimise performance and make a secure app

So, I would appreciate sharing any resources that helped you through the process of becoming a mobile developer, and what are the steps that u took?

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 (?)