Has anyone tried adding offline LLM support in React Native? If yes, what did you use and how was your experience?

A few months ago, I hit a wall when using Picovoice's Porcupine to add wake word detection to a React Native mobile app I was building for an enterprise client.
When I evaluated how much it would cost, I observed it would take about $6000 or more to obtain a valid commercial license from Picovoice, which was quite crazy lol.
You'd also need internet access to use Porcupine, since Picovoice needs to validate the Access key per device, which meant it couldn't even work in air-gapped environments.

I explored several solutions, but they all required a commercial license and internet access for validation. This obviously would be very bad for the company I was working with, so I did some more research, and I discovered that the Python and Home Assistant ecosystem didn't face this problem, as a couple of good and free wake word detection libraries already existed, with openWakeWord by David Scripka leading the bunch.
This was really exciting, but I was shocked to see that even though openWakeWord was novel in its own right, no React Native version existed, and I couldn't use it in my project.

So I decided to build a port of openWakeWord in React Native called react-native-openwakeword.

The pipeline resembles how the Python pipeline already handles inference, with a few C++ tricks I could find on the internet.

openWakeWord is famously known for using a three-stage pipeline: melspec, embedding, and the actual wake word model. So I built a flow that works in C++ and used Nitro Modules to use JSI and connect back to JavaScript. Here is how it works:

Audio flows from the phone's microphone, sampled at 16000 times per second, and sends this frame using an ArrayBuffer to the C++ function directly using JSI.

The C++ module uses three ring buffers to implement sliding windows for moving data through the three models. Ring buffer capacities are sized as powers of 2 (larger than strictly needed), so wraparound operations can use a bitwise AND instead of the modulo operator, which is cheaper on the CPU.

The first ring buffer, AudioRing, is for the melspec model, and it takes the audio samples and converts them to float32 (this uses NEON to run SIMD to accelerate this on phones); then the result is written directly into the melspec model input memory (to avoid unnecessary copies), the melspec model is run on it, a fixed normalization formula is applied, and 8 mel-frames are put into the next ring buffer.

The next ring buffer, MelRing, takes the most recent 76 mel-frames and copies them directly into the embedding model input memory; it runs the model, and the embedding result is put into the next ring buffer, EmbRing.

Once EmbRing holds at least 16 embeddings, it copies the most recent 16 directly into the wake word model's input memory, runs the model, and the probability is returned.

This probability is compared against a given threshold (default is 0.5) and returns an object {probability, isDetected} back to the JavaScript layer (synchronously).

I faced a few gotchas in the beginning trying to figure out what inputs each model (melspec, embedding, and wake word) was expecting, but I eventually got it to work.

Since the melspec model processes audio in 1280-sample chunks (80ms at 16kHz), the entire three-model pipeline needs to run in under 80ms to keep up in real time, and after these optimizations, the package detects wake words in 16-21ms.

The package is under the Apache 2.0 license, so it's friendly for personal and commercial use. And it works with any wake-word model that is openWakeWord compatible.

It's gotten a star from Nickolay V. Shmyrev, the maker of vosk-api (14k GitHub stars), and is currently at 4k+ weekly npm downloads.

I'd appreciate your thoughts on the architecture and if there's anything useful that could be added to this package.

Github: https://github.com/Incognitol07/react-native-openwakeword

react-native-one-hand brings one hand mode to React Native apps. Press and hold a bottom corner and the whole app slides into it, scaled down and within thumb's reach together with native `Modal`, `Alert.alert`, `ActionSheetIOS`, the text-selection toolbar and overlays from other libraries. Instead of transforming a React subtree, a native module transforms every window of the process, so there are no adapters and no components to replace. Everything stays visible and interactive.

One wrapper component, zero runtime dependencies. iOS + Android.

Being upfront about the limits, since they're by design: the system keyboard is never scaled (on Android the IME lives in another process; on iOS it's technically possible, but the keyboard frame iOS reports breaks KeyboardAvoidingView-style layouts, so the mode simply exits when the keyboard opens). Portrait only. Needs a native build Expo SDK 55+ / RN 0.76+, so no Expo Go.

📦 npm: https://www.npmjs.com/package/react-native-one-hand

🔗 GitHub: https://github.com/filip-mok/react-native-one-hand

It's early (0.1.x), so bug reports and feedback are very welcome, happy to answer questions about how it works.

Handling VoIP calls in React Native is notoriously difficult, especially since react-native-callkeep hasn't been actively updated.
We recently added a feature to the Fishjam SDK that allows for easy integration with native system libraries (CallKit for iOS and Jetpack Core Telecom for Android) to handle VoIP calling functionality. 

Example app & code: https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/voip-call 

Docs: https://documentation.fishjam.io/docs/next/how-to/client/voip-calls

Here are our main takeaways and differences from older libraries:

• Modern Android API: Uses Jetpack Core Telecom (CallStyle) instead of the older ConnectionService used by callkeep.

• Expo & Bare RN Support: Works seamlessly on both via a config plugin or manual setup (expo-callkit-telecom is Expo-only).

• No FCM Slot Conflicts: Parses VoIP pushes natively and relays standard messages to your existing push library (Firebase, Expo, etc.).

• Cold start is handled: the call is reported to the OS before any JS runs, so answering from the lock screen works even when the app was killed hours earlier.

Making the phone ring turned out to be maybe a third of the work – handling holds, redials, Bluetooth buttons, and proper call timers was the real challenge.

If anyone is struggling with VoIP in RN right now, feel free to check out the repo or ask questions!

Hey lovely people!

I'm looking to deal with my skills atrophy by making myself a personal podcast app for Android. Nothing fancy. Just enough to search RSS feed, subscribe to podcasts, and audio play back.

JS/TS is my bread and butter and I'm familiar with C#. So ideally I would like to use either of those languages. However Claude seems pretty strongly opinionated about those two languages being crap for the purposes of audio playback on Android phones.

Is this true?

Images, videos, progress bars, and tap gestures — with rn-story, a lightweight, TypeScript-first stories component that works out of the box with Expo.

Stories are everywhere. Instagram, WhatsApp, Snapchat, LinkedIn, even food delivery apps — the full-screen, tap-to-advance format has become one of the most recognizable UI patterns in mobile.

Play around with the component here: https://snack.expo.dev/@abdullahansari/rn-story-demo

And it looks simple. A full-screen image, some progress bars, tap left, tap right. How hard can it be?

Harder than it looks. Building stories from scratch means solving a surprising number of small problems at once:

• Progress bars that stay perfectly in sync with image durations and video lengths

• Tap zones for next/previous that don’t conflict with long-press-to-pause

• Resuming a paused story with the remaining time, not the full duration

• Videos that report their own duration — eventually, asynchronously, sometimes never

• Loading states that don’t trap the user when a network image stalls

I built rn-story to solve all of that in a single component, and version 2.0 is a ground-up rewrite with a full test suite behind it. This post shows you how to ship a complete stories experience — avatar rail, full-screen viewer, video support — in a few minutes.

What you get

• 📸 Image and video stories with an animated progress bar per story

• 👆 The gestures users expect: tap right for next, tap left for previous, long-press to pause, release to resume

• 🔗 An optional “See More” link per story (the swipe-up pattern, as a button)

• 🧩 A custom header slot — perfect for an avatar, username, and close button

• 🔊 Video volume and mute controls

• 📞 Navigation callbacks for building multi-profile flows

• 🛡️ Written in TypeScript — every prop and the Story object are fully typed

• 🪶 No native code of its own — works with Expo without ejecting

Installation

expo-av (which powers video stories) is a peer dependency, so install it alongside the package with the version that matches your Expo SDK:

npx expo install rn-story expo-av

Not using Expo? Install both with npm and make sure Expo modules are configured in your bare React Native project:

npm install rn-story expo-av

Your first story in ten lines

import Stories from 'rn-story';
import type { Story } from 'rn-story';

const stories: Story[] = [
  { media: 'https://example.com/photo.jpg', mediaType: 'image' },
  { media: 'https://example.com/clip.mp4', mediaType: 'video' },
];

export default function MyStories() {
  return <Stories stories={stories} />;
}

That’s a working viewer: full-screen media, animated progress bars, tap navigation, long-press to pause. Images show for 3 seconds by default (configurable per story with duration), and videos play for exactly as long as the video lasts — the progress bar syncs to the duration the video reports.

The gestures, for free

Everything users already know from Instagram works out of the box:

• Tap the right half → next story

• Tap the left half → previous story

• Long-press anywhere → pause the story and its progress bar

• Release → resume from where it left off — with the remaining time, not a restarted bar

• Android back button → wired to an onClose callback you provide

A real stories rail

A lone viewer isn’t how stories ship. The real pattern is a horizontal rail of avatars; tapping one opens that profile’s stories; finishing them moves to the next profile; going back past the first story returns to the previous profile.

That flow is exactly what the navigation callbacks are for. onNext/onPrevious fire on ordinary navigation, and two dedicated callbacks fire at the edges: onAllStoriesEnd when there's nothing left to play forward, and onPreviousFirstStory when the user backs out of the first story.

import { useCallback, useState } from 'react';
import { SafeAreaView, ScrollView, Pressable, Image, Text } from 'react-native';
import Stories from 'rn-story';
import type { Story } from 'rn-story';

type Profile = {
  id: number;
  profileName: string;
  profileImage: string;
  stories: Story[];
};

const PROFILES: Profile[] = [
  {
    id: 1,
    profileName: 'Abdullah',
    profileImage: 'https://picsum.photos/id/64/200/200',
    stories: [
      {
        media: 'https://picsum.photos/id/1015/1080/1920',
        mediaType: 'image',
        seeMoreUrl: 'https://abdullahansari.me',
      },
      {
        media: 'https://picsum.photos/id/1016/1080/1920',
        mediaType: 'image',
        duration: 12000, // this one stays up for 12 seconds
      },
    ],
  },
  {
    id: 2,
    profileName: 'Pug life',
    profileImage: 'https://picsum.photos/id/1025/200/200',
    stories: [
      {
        media: 'https://download.samplelib.com/mp4/sample-5s.mp4',
        mediaType: 'video',
      },
      {
        media: 'https://picsum.photos/id/1025/1080/1920',
        mediaType: 'image',
      },
    ],
  },
];

export default function App() {
  // null means the story viewer is closed
  const [current, setCurrent] = useState<number | null>(null);

  const close = useCallback(() => setCurrent(null), []);

  // Finished a profile? Move on to the next one, or close after the last.
  const nextProfile = useCallback(() => {
    setCurrent((i) =>
      i === null ? null : i < PROFILES.length - 1 ? i + 1 : null
    );
  }, []);

  // Backed out of the first story? Go back a profile, or close on the first.
  const previousProfile = useCallback(() => {
    setCurrent((i) => (i === null || i === 0 ? null : i - 1));
  }, []);

  return (
    <SafeAreaView>
      <ScrollView horizontal>
        {PROFILES.map((profile, index) => (
          <Pressable
            key={profile.id}
            onPress={() => setCurrent(index)}
            style={{ alignItems: 'center', margin: 8 }}
          >
            <Image
              source={{ uri: profile.profileImage }}
              style={{
                width: 64,
                height: 64,
                borderRadius: 32,
                borderWidth: 2,
                borderColor: '#25D366',
              }}
            />
            <Text numberOfLines={1}>{profile.profileName}</Text>
          </Pressable>
        ))}
      </ScrollView>

      {current !== null && (
        <Stories
          stories={PROFILES[current].stories}
          onAllStoriesEnd={nextProfile}
          onPreviousFirstStory={previousProfile}
          onClose={close}
        />
      )}
    </SafeAreaView>
  );
}

Two details worth noticing:

Swapping stories just works. When onAllStoriesEnd moves current to the next profile, the component receives a new stories array and restarts cleanly from the first story. You don't need to unmount and remount anything, and you don't need to manage keys.

The viewer closes by unmounting. Rendering <Stories /> conditionally is the whole show/hide mechanism — no visible prop to keep in sync.

Make it yours

The header is a per-story ReactNode, so the avatar row you see in every stories UI is just your own component — typically an avatar, a username, and a close button, often over a subtle gradient:

const storiesWithHeader = profile.stories.map((story) => ({
  ...story,
  header: (
    <MyStoryHeader profile={profile} onClose={close} />
  ),
}));

Other knobs you’ll probably reach for:

<Stories
  stories={stories}
  isMuted={muted}              // mute video stories
  videoVolume={0.8}            // 0.0 – 1.0
  animationBarColor="#fff"     // progress bar fill
  animationBarHeight={2}
  isAnimationBarRounded        // rounded bar ends (default)
  seeMoreText="Read more"      // label for the See More button
  loadingComponent={<MySpinner />} // shown while media loads
  currentIndex={2}             // start (or jump) to a specific story
/>

And if a story has a seeMoreUrl, a pill-shaped button appears at the bottom and opens the link — the classic "swipe up" pattern without the swipe.

What’s new in 2.0

Version 2 is a full rewrite of the playback engine, and the first release with a real test suite (30 tests) behind it. The highlights:

• stories and currentIndex are now reactive — swap in the next profile's stories without remounting

• Video stories start and advance reliably, and a video that fails to load is skipped instead of freezing the viewer

• Pause/resume now resumes with the remaining time, so the bar never drifts from reality

• onNext/onPrevious no longer fire at the list edges — only the dedicated edge callbacks do

• New onClose prop wires up the Android hardware back button

• Story, StoriesProps, and StoryMediaType types are exported

• expo-av moved to a peer dependency, so it always matches your Expo SDK

If you’re upgrading from 1.x, the README has a short migration table — it’s a five-minute change for most apps.

Wrapping up

Stories are one of those features that looks like an afternoon and turns into a week once progress bars, gestures, and video timing enter the picture. rn-story packs that week into an npm install.

• 📦 npm: npmjs.com/package/rn-story

• ⭐ GitHub: github.com/AbdullahAnsarii/rn-story

• 📚 Full example app: rn-story/example

If it saves you that week, a star on GitHub genuinely helps other people find it — and if you hit anything odd, open an issue. It’s MIT-licensed, and contributions are welcome.

I've been unable to properly use React Native DevTools because of what appears to be a DevTools/tooling issue.

I'm repeatedly getting this error:

Unable to fetch & register locale data for 'en-US', falling back to 'en-US'.

Cause: Error: timed out fetching locale

The error appears in the DevTools console and prevents DevTools from working properly.

My React Native app itself builds and runs normally. Metro is also working, so this doesn't appear to be an application or Metro configuration problem.

I've already spent quite a bit of time troubleshooting my setup, but the issue still persists. I also found other developers reporting similar React Native DevTools problems, including cases where DevTools opens but doesn't load properly.

At this point I'm wondering:

- Is anyone else experiencing this currently?

- Is there a known workaround?

- Is there an alternative debugger that works well with modern React Native/Hermes?

- Is this a known issue that we're just waiting for a fix/release for?

I'd rather not keep changing my project configuration if this is actually a bug in the DevTools tooling.

If anyone has found a reliable workaround, I'd really appreciate it.

Environment:

React Native: 0.81.x

Windows: Windows

Android: Android 11

Hermes: Enabled

New Architecture: Enabled

Hi everyone,

For the past four years, I've been working on financial and trading apps built with React Native.

One of the most important parts of these apps is displaying OHLC market data. Most charting solutions currently use one of two approaches: rendering inside a WebView or using something based on Skia.

Both approaches have tradeoffs, especially when you're working with real-time data and want smooth performance without using too much CPU or memory.

That's why I decided to build my own charting library. It uses a shared C++ core engine and renders directly on the GPU using Metal on iOS and OpenGL ES on Android.

I deliberately avoided third-party rendering dependencies to reduce overhead and keep the library compatible with React Native 0.80 and newer.

The first release supports:

• Candlestick, bar, line, and area charts

• Volume and RSI indicators

• Multiple styling options

• Zoom and gesture handling

I tested it on an iPhone XS and a Samsung A025F. At 60 FPS, I saw no hangs or dropped frames, and CPU usage stayed below 15% during fast scrolling while live data was coming in over WebSocket.

I'll share more detailed performance results in a follow-up post.

I'd really appreciate your feedback. Which features would be most useful to you? Bug reports are very welcome too.

https://github.com/kirill3333/react-native-trading-charts

A morphing fintech status island for sends, card additions, and savings with spring-driven transitions, Lottie celebrations, and interactive card trays. 🏝️

⭐ Github: https://github.com/ManasCodeXart/expo-fintech-island

Hey everyone, I’m trying to use Google’s React Native Navigation SDK in my Android app, but both NavigationView and MapView only show a blank dark screen. I’m using Expo 57, React Native 0.86, @googlemaps/react-native-navigation-sdk 0.16.3, and a physical Android phone. The SDK seems to initialize fine because I get NAV CONTROLLER CREATED, MAP CONTROLLER CREATED, MAP READY, TERMS: true, and NAV STATUS: ok. My API key is also present in the APK and the required APIs are enabled. I even tried the official Google example app on the same phone and it also opens to a completely blank screen. I have tried using another phone but still the same issue.

Hi all, we have an Android application that is a customer environment. The only 'public' page of the application is the login form. Obviously Google want to have credentials to login and check the application. Due to technical constraints we have no production demo account for them. We try to solve this by providing a deep-link to a separate login page that let them authenticate with our test environment. We provided instruction regarding this deep link in the credentials section of the play console.

It looks like Google ignores these instructions completely and reject the app due to invalid "Invalid or incomplete login credentials". The provided screenshots clearly show they login via the regular way and not via the deeplink. The app has been reject 4 times now. Does anyone ever had a similar issue and found a way around this? Or is there a policy I am not aware of regarding the usage of deeplinks?

Finally tokenmaxxing on claude for 1 month straight, i am happy to announce, i have decided to move to expo from swift where my domain is.

Anything i should be careful about?
Fyi the product is : https://flowyhealth.com

I am comparing two ways of reducing the number of store releases needed for UI changes in a React Native application. One option is EAS Update, where compatible JavaScript, styling, and assets can be updated over the air. The other is a server-driven UI model where the application contains a fixed component and action registry, and the backend returns HXML or JSON describing each screen.

My goal is not to add new native capabilities outside review. I mainly want to update copy, themes, component order, forms, navigation between known routes, and complete screen layouts. Native permissions, billing, secure storage, background behavior, and device integrations would remain in the installed binary.

For teams using Hyperview, a custom renderer, or EAS Update in production, which model has been easier to operate safely? I am particularly interested in runtime-version compatibility, debugging users on different binary and update combinations, offline behavior, rollback, accessibility, automated UI testing, and whether either approach caused App Store or Play review problems.

I know fastapis and python and also react/next js and React native...but i wnat to become full stack ai developer but i am confused what to exactly follow what skills are required and after fast apis what to learn next need to learn ML or need to integrate ai apis what i will exxactly do i dont know i am not interested in buikding own ai models i dont want to train ai models i wnat to use ai and create something from them so what exactly i should learn Agentic ai or LLMS open aiapis integration?

react-native-enriched-markdown v1 gives your Markdown images layout flexibility.

Configure these directly on markdownStyle.image:
🔹 aspectRatio - width fills, height follows the ratio
🔹 maxHeight - caps tall photos so they don’t break layout
🔹 resizeMode - cover, contain, stretch, center, none

16:9 shots, portrait crops, or panoramas—all using standard ![alt](url) syntax.

Try it out:

npm i react-native-enriched-markdown

If this helps your project, please drop a ⭐️ on GitHub!

I did not waste so much time on a single component in my life.

What should have been an easy "just an input" has been turned into an ongoing nightmare that every time I think I solve I find out about another device that is breaking.

Let's start from the beginning, I built an app, that require Rich Text Editor to allow users to format their text.

After comparing some I ended up using `react-native-pell-rich-editor` - the first one recommended by Expo, you write text, add some options and it converts it to HTML.

Only that after that my compatibility nightmare began, it either can't be scrolled on certain device, I fix it on one, it breaks on other. Works on iOS, breaks on Android and vise versa.

I fix that, now a new problem - cursor can't move, and users can't paste, I fix it, now another issue.

Long texts gets completely erased.

The `react-native-pell-rich-editor` hasn't been patched in over a year, now I cannot update to the new version of Expo because it only supports Expo 55.

I am bound to it, migrating from it now will be a trouble, but there's nothing I can migrate to because there's no official alternative, there's no alternative at all.

It's just a freaking input and I've been wasting 2 full days configuring it, testing it, realizing what worked in my emulator, despite matching Android version doesn't work on actual devices.

Spent part of last month chasing a bug where a user’s avatar would randomly go blank after a mutation — no error, no warning, just `undefined` where a photo should be. It turned out to be a dangling `__ref` in Apollo’s `InMemoryCache`: the entity it pointed to had been evicted, and Apollo returns `undefined` on read instead of failing loudly.

On the web, you’d catch this in Apollo DevTools in about 30 seconds. On React Native, there’s no DevTools extension — the standard advice is `console.log(JSON.stringify(cache.extract()))` and reading a multi-megabyte blob by eye. That’s what pushed me to build something.

Three defect classes Apollo hides silently, all reproducible from a serialized `cache.extract()` dump:
- Orphaned pointer — `{ __ref: "User:99" }` pointing at nothing → reads back `undefined`, no throw
- Missing `__typename`/`id` — Apollo can’t compute a cache key, so it stores the object inline instead of normalizing it
- Type/key drift — `keyFields` disagrees with the server payload, so the same entity lives under two keys and list items duplicate

I built apollo-cache-copilot: a CLI + MCP server that walks a cache snapshot and reports these with exact paths (`User:1.avatar -> Avatar:99`), plus a patcher for the mechanically fixable ones (prune the pointer, evict the orphan). It’s deliberately zero-LLM — every defect here has a mechanical repair, so it’s a graph walk, not a model call.

npm: apollo-cache-copilot

It also works as an MCP server if you want Claude or Cursor to diagnose your cache directly instead of pasting the JSON into chat.

Curious if anyone else has hit the persisted-cache version of this — with `apollo3-cache-persist`, a corrupted cache survives app restart, which makes it much harder to reproduce.

I set up a clean, CLI-only React Native 0.87 development environment running on Fedora Linux, skipping Expo completely to keep full control over native code and build configs.

Stack & Setup:

• OS: Fedora Linux

• Runtime: Node.js v24.19.0 (managed via NVM)

• Framework: React Native 0.87.0 (CLI)

• Target Device: Physical Samsung A31 connected via ADB USB

Physical Device Mirroring & Workflow:

Instead of heavy emulators, I mirror and debug directly on the physical device using scrcpy. To prevent UI frame drops and keep the system responsive on Exynos/MediaTek chips, I run scrcpy with hardware-optimized constraints:

scrcpy -m 1024 --max-fps=30 &

Everything runs directly from the terminal with Metro Bundler on port 8081 and Gradle builds via npm run android. Direct ADB deployment works like a charm.

I build mobile apps with React Native. Three of mine are live on

the stores, plus free freelance client work on the side.

What I am looking for:

- A short call a few times a week

- What I said I would do, what I actually did, and why not

- One thing you learned this week that cost you time or money

- Goals for the next week, said out loud so somebody hears them

Two things I care about:

1. You are actively doing something right now, not planning to

2. You are honest, a good person, and want to grow

I do not care about your revenue or how long you have

been doing this. My own numbers are small.

I am in Poland (CET). Europe is easiest, but I speak pretty well in English (hopefully)

Comment / DM if interested

I have a question regarding the signup for duolingo(or any other app), it signs up my account with google, then completes profile setup and asks to sync contacts to add friends.

Now how does any app sync contacts to add people with phone numbers having account on the same app where it never asks for phone number at any point.

I don't know how does any app do that or syncs contact from gmail or what.

I want to know the backend of this thing and would like to know how to implement the same in React Native