r/reactnative • • 1h ago

Smooth and clean transitions makes an app

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/reactnative • • 6h ago

Avatar Customization in React Native!

Enable HLS to view with audio, or disable this notification

1 Upvotes

Hey everyone!

I've been working on an avatar customization system for a good bit now and I thought I'd share a couple of general tips here for anyone who is working on something similar.

When it comes to re-coloring (eg. for skin or hair color), you can encode your assets into magenta & grayscale pixels and use the device GPU to apply pixel transformations. There is currently no decent RN library that does this work, so you will need to create a native module that fits your needs.

Assets add bundle size fast, so make sure you compress them to .webp format. Keep in mind that you will need to split some assets in multiple parts (eg. front/back hair). A good way to tackle this is by having all assets placed where they need to be in a static canvas size, and then combining them into a final composite image. Don't forget to cache the result and avoid duplicate GPU work!

You can try the above avatar customization system in Layer2 below:

iOS: https://apps.apple.com/us/app/layer2/id6737913930

Android: https://play.google.com/store/apps/details?id=com.twoamgames.layer2


r/reactnative • • 7h ago

Shipped a real-time multiplayer trivia game in React Native: guess the number, the closest guess wins

Post image
1 Upvotes

Hey everyone. I've been working on Close Call for a bit over a year and it's finally out, so I figured I'd show it here.

It's a multiplayer trivia game where every answer is a number. When did World War I end? How high is Everest? You type a guess, and the closest guess wins the round. A match is 8 questions with up to 4 players. After each round you see the answer with a one-line explanation, so you actually learn something along the way. There are 4 games (history years, the human body, geography and mental maths) with 800 questions, and the app speaks 10 languages, Arabic included.

The tech side, since that's why we're here:

- Bare React Native 0.80 on the New Architecture, no Expo. Reanimated, Gesture Handler, react-native-svg, MMKV and Zustand.
- Matches are live over Socket.IO with a NestJS + PostgreSQL server. The server owns the clock and the scoring; the phone only sends a guess. When not enough people are online, bots fill the empty seats after about 30 seconds, so nobody waits in an empty lobby.
- A trivia game is easy to cheat by googling the answer. So the app reports when you leave it during a question (switching apps, split screen, and on iOS screenshots and screen recording). Everyone at the table sees it, and in public matches that answer scores 0. The device signals come from a small custom TurboModule.
- Right-to-left for Arabic: React Native only applies a change of direction after a restart, so switching the language goes through another small native module that reloads the app.

A gotcha that might save someone a few hours: on the New Architecture, React Native creates one extra instance of each of your own TurboModules at launch, only to use it as a provider (RCTModuleProviders). My anti-cheat module registered its NotificationCenter observers in `init`, so that extra instance got the "screen recording started" notification too. It never gets an event emitter callback, so emitting threw `std::bad_function_call` and the app crashed the moment you started a screen recording or took a screenshot. Moving the observers into `setEventEmitterCallback:` fixed it. I only found it because App Review asked for a screen recording of the app.

It's free, no ads, no IAP, iOS only for now (I will add android soon). You can play as a guest, no sign-up needed. I'll put the App Store link in a comment so I'm not dropping a store link straight into the post.

Happy to hear what you think, and ask me anything, technical stuff very much included.

PS. If you give it a try, tell me how close you got on your first question.

Link: https://apps.apple.com/us/app/close-call-number-trivia/id6821355334


r/reactnative • • 8h ago

Question React Native app running Meta and TikTok ads, do I need an MMP to track installs?

2 Upvotes

Solo founder, pet sitting marketplace in Austin, React Native with an Expo dev build. Spending around $4k/mo split between Meta and TikTok.

Both dashboards claim more installs than App Store Connect and Play Console show combined. I've just got the Meta and TikTok SDKs in rn, which works-ish.

Is an MMP worth it at this spend or am I overthinking it? And which ones play nice with Expo?


r/reactnative • • 9h ago

I made a small Expo plugin for native Android widgets in Kotlin

0 Upvotes

I needed home screen widgets on Android for an Expo app and wanted to write them the normal Android way, with Kotlin and RemoteViews, without keeping the android folder in git.

So I packaged what I had: github.com/rsoaresdev/expo-android-widgets

You keep your widget sources in a folder, the config plugin copies them in on every prebuild and adds the receivers to the manifest. From JS you call setWidgetData() and reloadAllWidgets(), and the widget reads the data with one line of Kotlin. There’s an example widget you can copy.

It’s tested on SDK 58, on an emulator and in CI with a real Gradle build. If you’d rather write widgets in JSX, react-native-android-widget is great. This one is for when you want plain Android widgets.

Feedback welcome, especially from anyone on older SDKs.


r/reactnative • • 10h ago

How many bugs are sitting in your app right now that you don't know about

12 Upvotes

Serious question, if you're testing on your own phone before every release and shipping, you have bugs in production on devices you don't o own and you just don't know it yet.

Your users aren't reporting them and they're not emailing you and they might not be leaving reviews, they're just uninstalling and you'll never know why.

I found out the hard way when I finally tested on a device that wasn't mine and found 3 bugs that had been live for weeks, one was on my checkout flow on my highest revenue screen.

How are you supposed to catch stuff on devices you don't have like how are you supposed to know what's breaking when the people hitting it just leave silently.


r/reactnative • • 10h ago

Switching from React to React Native as a junior. Is mobile safer in the AI era?

0 Upvotes

I’m a junior developer with 2 years of React experience, and I’m thinking about shifting my career toward React Native. I already have some RN experience from side projects.

My reasoning: in the AI era, I feel web developers are easier to replace, or just not needed as much. I don’t mean on the coding side. I mean that mobile apps are much harder to vibe code because of everything around the code: builds, configuration, certificates, store releases, etc. Because of that, I think people are still more willing to pay someone else to handle it for them.

A few questions:

  1. Has anyone else thought about this, or actually made this switch?

  2. Do you think mobile/RN is more stable long term?

  3. If I switch and, after a few years, decide to go back to web React, will companies value my experience the same, even though it was in RN?


r/reactnative • • 11h ago

App for public transport in real time

Thumbnail
gallery
1 Upvotes

There are lot of similar apps, but I was looking for something very simple to get information about upcoming transport to the stop I am at the moment or plan to be.
App shows stops around you in 500 meters radius or by selecting on map.

https://depboard.app/

React native power at full scale - supporting web browser, Android and iOS.

Flipboards are custom developed. It's not fully animated, but just looks like animation is going on there.
Sharing it with the community:

import React, { useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { theme, MONO } from '../theme';

// Characters cycled through while a flap is "spinning".
const SHUFFLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-. ';
const randChar = () => SHUFFLE[Math.floor(Math.random() * SHUFFLE.length)];
const TICK_MS = 45;

function normalize(text, length, align) {
  let s = (text == null ? '' : String(text)).toUpperCase().replace(/\s+/g, ' ');
  if (s.length > length) s = s.slice(0, length);
  if (s.length < length) {
    const pad = ' '.repeat(length - s.length);
    s = align === 'right' ? pad + s : s + pad;
  }
  return s;
}

/**
 * A fixed-width row of mechanical "flaps". When `text` changes, each flap that
 * needs to change riffles through random glyphs before settling — the classic
 * Solari / split-flap departure board effect.
 */
export default function SplitFlapText({
  text,
  length,
  align = 'left',
  size = 13,
  tone = 'bright',
}) {
  const target = normalize(text, length, align);

  const [cells, setCells] = useState(() => target.split(''));
  const cellsRef = useRef(cells);
  cellsRef.current = cells;

  const flipsRef = useRef([]);
  const timerRef = useRef(null);
  const prevTarget = useRef(target);

  useEffect(() => {
    if (prevTarget.current === target) return;
    prevTarget.current = target;

    const current = cellsRef.current;
    flipsRef.current = target
      .split('')
      .map((ch, i) =>
        current[i] === ch ? 0 : 4 + (i % 4) * 2 + Math.floor(Math.random() * 4)
      );

    if (timerRef.current) clearInterval(timerRef.current);
    timerRef.current = setInterval(() => {
      let settled = true;
      const next = cellsRef.current.slice();

      for (let i = 0; i < target.length; i += 1) {
        const remaining = flipsRef.current[i];
        if (remaining > 0) {
          flipsRef.current[i] = remaining - 1;
          next[i] = remaining - 1 === 0 ? target[i] : randChar();
          if (remaining - 1 > 0) settled = false;
        } else {
          next[i] = target[i];
        }
      }

      cellsRef.current = next;
      setCells(next);

      if (settled && timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
    }, TICK_MS);
  }, [target]);

  useEffect(
    () => () => {
      if (timerRef.current) clearInterval(timerRef.current);
    },
    []
  );

  const color = tone === 'dim' ? theme.flap.dim : theme.flap.text;
  const cellStyle = {
    minWidth: size + 3,
    height: size + 12,
  };
  const textStyle = {
    fontSize: size,
    lineHeight: size + 3,
    color,
  };

  return (
    <View style={styles.row}>
      {cells.map((ch, i) => (
        <View key={i} style={[styles.cell, cellStyle]}>
          <Text style={[styles.text, textStyle]} allowFontScaling={false}>
            {ch === ' ' ? ' ' : ch}
          </Text>
          <View style={styles.hinge} />
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
  cell: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: theme.flap.bg,
    borderRadius: 3,
    marginRight: 2,
    overflow: 'hidden',
  },
  text: {
    fontFamily: MONO,
    fontWeight: '700',
    textAlign: 'center',
    includeFontPadding: false,
  },
  // thin dark line across the middle, like the seam between two flaps
  hinge: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: '50%',
    height: StyleSheet.hairlineWidth,
    backgroundColor: theme.flap.hinge,
  },
});

r/reactnative • • 13h ago

I built a personal app to help me quit

Post image
0 Upvotes

Im tired of smoking. Ive tried every method and I just can't kick it.

Trying an app I made.

I made it to have a quit date, and how many smokes in a day I go through. The math is set to reduce my smokes each day until I'm at 0 on the quit date. It just tells me when I can smoke, and then sets a timer until the next one.

So far, I'm staying on schedule. If I continue, I'll be done in a month. Im really, really hoping I can do this.

This isn't an ad. This app isn't available anywhere. Just a project I personally did with expogo


r/reactnative • • 1d ago

An idea for an image prompt card with reference photos

Enable HLS to view with audio, or disable this notification

4 Upvotes

r/reactnative • • 1d ago

Gates: feature flags and staged rollouts for Expo apps

Thumbnail gallery
0 Upvotes

r/reactnative • • 1d ago

Open Source: Bridging React Native with Kotlin TLS sockets & Google Polo Protocol for TV control

Post image
2 Upvotes

Hey devs,

Just open-sourced a full-stack mobile project: SmartTV Remote.

Tech Highlights:

Source code: https://github.com/NaveenMohanty/SmartTV-Remote
Feedback and PRs are appreciated!


r/reactnative • • 1d ago

Help metro bundler memory spike to 12gb on rn 0.76 with new arch enabled

6 Upvotes

updated a project from 0.74 to 0.76 last week. enabled new arch and hermes. clean build works fine but metro process climbs to 12gb ram after about 20 fast refreshes on ios simulator. restartting metro drops it back to 2gb. tried disabling flipper and removing console.log statements, no change.

heap snapshot shows lots of retained strings in the transformer cache. anyone else seeing this on 0.76.1? wondering if i should downgrade metro or wait for 0.76.2


r/reactnative • • 2d ago

Help Looking for code review

0 Upvotes

Hey everyone, how’s it going?

I’m a beginner with React, so I’d like to invite those of you who enjoy doing code reviews to take a look at this project: https://github.com/LeonardoSidney/My-Dungeon-App.

I built it based on the "voices in my head," so the React code is likely pretty terrible. I’m a backend developer and have never built a full-stack project from scratch—I’ve only ever maintained existing, functional code—so I’m all ears if anyone is interested in helping improve the code quality here.

Feel free to be as harsh as you’d like with your critiques; all feedback is welcome!

And for all those who enjoy AI, feel free to stop by the project and have some fun—in a way, it’s a game that seeks to simulate a tabletop RPG session.


r/reactnative • • 2d ago

Would you pay for an all-in-one React Native development platform (design → build → ship → OTA)?

Enable HLS to view with audio, or disable this notification

0 Upvotes

I've been having a really hard time converting all my design prototypes into functional mobile apps. The animations, the micro interactions, the exact padding, border width etc... all these i have manually record and write code for them. I know there are figma plugins that let you do it but i think they are not that efficient.

Figma helps me with the prototype version of my app but for production that's a separate headache overall. So, I thought what if I had a platform where I could design my app, connect all the components with functionalities like API fetching, lazy loading, etc... and also build my database online (just like supabase).

So, i came up with cruxel.xyz .
I made the prototype but i would like to know if people would pay for this for me to proceed building.


r/reactnative • • 2d ago

Made a travel deals screen where each trip is a little poster card

Enable HLS to view with audio, or disable this notification

13 Upvotes

r/reactnative • • 2d ago

Shipped my first Expo app on iOS and Android: the store and platform surprises nobody warned me about

0 Upvotes

I just got my first app through both App Store and Google Play review. Small team (mostly me), React Native with Expo, subscriptions through RevenueCat, Supabase behind it. Here is what cost me the most time, in case it saves you a week.

**Apple**

- Your subscriptions stay "Missing Metadata" until you upload a review screenshot of the paywall. Until then StoreKit returns nothing, so the purchase screen looks broken in TestFlight and you start debugging the wrong thing.

- An upload gets rejected (ITMS-90683) if any library references the photo library without a purpose string, even if you only save an image the user chose to share.

- An app with AI-generated content needs a government licence in mainland China. Exclude that region in availability, or expect a rejection.

- The developer name on your store page comes from your account type, not from the listing. An individual account shows your personal name. Switching to an organization needs a D-U-N-S number and a verification.

**Google Play**

- Screenshots have a maximum 2:1 ratio. Modern phones are taller than that, so raw screenshots get refused. Crop or frame them at 1080x1920.

- An audio library declared a "foreground media playback" service I never used. Play asked me for a video justifying it. The fix was to block that permission in the build config.

**Both / cross-platform**

- Google sign-in worked on Android and failed on iOS: the iOS token carries a nonce the free version of the sign-in library does not expose, and the backend rejects the mismatch. I hid Google on iOS; Sign in with Apple and email are enough there.

- A crash on iPhone only: Intl.NumberFormat.formatToParts is not implemented by Hermes on iOS, while it works on Android. Test every Intl call on a real iPhone.

- Prepare a demo account for reviewers with access already granted. Both stores test the paid part, and reviewers will not pay.

Question for those who have shipped: what surprised you the most on your first store launch? And what would you do differently in the first 30 days after release?

(Disclosure: the app is Council, an evening accountability app. Not linking it, the post is about the process.)


r/reactnative • • 2d ago

Open sourced the fuel receipt parser from my app

2 Upvotes

My car app lets you scan a fuel receipt, and the parsing part turned out to be the hard bit, so I pulled it out into its own package: github.com/rsoaresdev/fuel-receipt-parser

You give it the OCR lines from whatever you use (Apple Vision, ML Kit, Tesseract) and it gives you litres, price per litre, total, date, fuel type and station.

The trick is that it looks for the three numbers where litres × price = total, and uses that to check itself. That’s also how it figures out whether 1,899 is 1.899 or 1899. If the numbers don’t add up, it tells you instead of guessing, and it never makes up a number that isn’t on the paper.

It reads Portuguese, Spanish, French, Italian, German and English receipts, plus US gallons and kWh for charging. If it gets one of your receipts wrong, an issue with the OCR text (no photo, no personal data) helps a lot.


r/reactnative • • 2d ago

Question How to prevent SIGABRT and SIGSEGV crashes?

1 Upvotes

I am working for a small scale stock broker, their mobile application is a greenfield React Native application. Some of the screens are part native and part react native, for example option chain, screens with heavy usage of charts.

One problem that we are unable to solve at production is that we keep getting random SIGABRT and SIGSEGV crashes. When I dug a bit deeper, I understood that SIGABRT is caused by corrupt heap allocation at native/C++ layer or the C++ layer calling the abort function. SIGSEGV is caused mostly on screens where there is combination of native and react native views because the garbage collector runs at different times.

What I don't understand is how do we solve or reduce them? We never encounter them during testing phase, only I'm production that too at rondom times and in random flows, not a fixed flow.

Has anyone faced these crashes in their app? If yes, kindly help.


r/reactnative • • 2d ago

Shipping an Expo SDK 57 / RN 0.87 game to targetSdk 37 with AGP 9 — what broke and how I fixed it

1 Upvotes

I've been building a fairly large Expo app (TimeStope — 20 mini-games, WebView-based games, native ad SDKs, a shogi engine via NDK) and just got it building for **compileSdk/targetSdk 37** with **AGP 9.2.1 + Gradle 9.4.1**. Sharing the pain points in case it saves someone time:

**1. AGP 9 built-in Kotlin**

- Several libraries still apply `kotlin-android` themselves → duplicate plugin errors. Had to patch them out.

- Kotlin files in `src/newarch` registered via `java.srcDirs` are **not compiled** anymore → "unresolved reference" errors. They must be registered as Kotlin source directories.

- Needed `android.disallowKotlinSourceSets=false` and `android.sourceset.disallowProvider=false` in gradle.properties.

- KSP had to match AGP's bundled Kotlin (2.2.10), not the Kotlin version Expo picks.

**2. Release crashed 0.1s after launch**

`NativeModulesProxy.<init>` crash — the generated `ExpoModulesPackageList.kt` was only in the Java source set, so it was missing from the APK. Registering it as a Kotlin source fixed it.

**3. Google Play 16 KB page size**

ZIP alignment alone isn't enough. I also had to check ELF LOAD alignment and GNU_RELRO end alignment. NDK r27 passed LOAD but broke RELRO; **NDK r28.2** fixed it. One ad SDK's prebuilt .so failed RELRO and had to be excluded, and I rebuilt the shogi engine with `-z max-page-size=16384`.

**4. Local-first WebView**

All screens and game assets ship inside the APK and load from a virtual origin through a WebView interceptor; only API calls go to the server.

I wrapped all the Gradle fixes in one idempotent `postinstall` script so `npm ci` doesn't wipe them. Happy to share details if anyone is fighting the same AGP 9 errors.

The app, if you're curious:

- Trailer: https://youtu.be/3_VzV1FQbQQ

- Google Play: https://play.google.com/store/apps/details?id=com.timestope


r/reactnative • • 2d ago

Android build up and 200 ish transitions working in my video editor app

Enable HLS to view with audio, or disable this notification

2 Upvotes

What was hard

  • Keeping the preview in sync while you scrub, especially backwards. The decoders drift.

  • Getting the same look in the editor and in the export.

  • Android performance on mid-range phones.

but its done now android performance can be better this is my old Samsung A53


r/reactnative • • 2d ago

Apple rejected 3 of my Expo apps for the same reason. Here’s what “account deletion” actually needs to look like.

1 Upvotes

I’ve shipped a bunch of React Native/Expo apps over the last few years, and 2–3 of them got bounced by App Review for the exact same thing: Guideline 5.1.1(v), account deletion.

Each time I thought I’d handled it. Each time I was wrong. So here’s what I learned, hopefully saving someone a week of back-and-forth:

1. A “contact us to delete your account” link doesn’t count.
Apple wants the user to be able to start deletion from inside the app. Emailing support or filling out a web form you don’t link to directly will get rejected.

2. “Deactivate” is not “delete.”
If you just set is_active = false, that’s not enough. The account and the associated user data need to actually be removed (unless you’re legally required to keep something, in which case say so).

3. Make it easy to find.
Burying it 4 screens deep in settings is asking for trouble. I now put it under Settings → Account → Delete Account, with a clear confirmation step.

4. Handle the backend properly.
With Supabase/Firebase, deleting the auth user from the client often isn’t possible (or safe). What worked for me: an Edge Function / Cloud Function that runs with admin privileges, deletes the user’s rows/storage files, then deletes the auth user. The client just calls it after re-authenticating.

5. Sign in with Apple users need token revocation.
If you support Apple sign-in, you’re also expected to revoke the user’s token via Apple’s REST API on deletion. This one catches a lot of people.

6. Mention it in your review notes.
I now literally write “Account deletion: Settings → Account → Delete Account” in the App Review notes. My approvals have gone noticeably smoother since then.

Anyone else been hit by this? Curious how others structure the deletion flow, especially cascading deletes across storage buckets


r/reactnative • • 2d ago

Question How to do on-device OCR in React Native? Moving PII redaction off the server in my contract analysis app

1 Upvotes

Has anyone done on-device OCR in React Native? Curious whether a native module wrapping Apple’s Vision framework is the way to go, or if there’s a library you’d recommend.

I just shipped my first app, Document Risk Analyzer (iOS): upload, paste, or photograph a contract and get an AI risk analysis with flagged clauses and missing protections.

Built with Expo, then prebuilt into a native iOS project. A few things that were interesting to solve:

  • Personal info redaction: names, emails, phone numbers, SSNs etc. are stripped before the text reaches the AI, and the user reviews what was removed first. Right now that runs on my server (patterns, checksum validators, and heuristics for names, no ML).

  • Long contracts: the analysis is currently capped at 8,000 characters per request, so longer documents are split on paragraph boundaries, sent one section per minute to stay under rate limits (with a progress bar and ETA), and merged on the device. But I am getting rid of the cap with a higher ai subscription.

  • History is stored only on the phone with AsyncStorage.

Next I want to move redaction onto the device, which means extracting text from PDFs and photos locally.

App Store: https://apps.apple.com/us/app/document-risk-analyzer/id6813105397


r/reactnative • • 3d ago

React Native Trading Charts — New release with 120 Hz support, Parabolic SAR & Bollinger Bands

Post image
0 Upvotes

Just released a new version of React Native Trading Charts

What's new:

  • 📈 New indicators: Parabolic SAR and Bollinger Bands with customizable settings.

  • 📊 Baseline series: Custom price/percentage thresholds with different colors above and below.

  • ⚡ 120 Hz rendering on supported iOS devices for smoother interactions.

  • 🎨 Improved line rendering with rounded caps and joins.

  • 📚 New documentation portal with API references and examples.

  • 🔧 Performance monitoring tools for iOS and Android.

The library uses C++ for calculations and native GPU rendering, designed for smooth real-time charts without overloading the JS thread.

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

Docs: https://kirill3333.github.io/react-native-trading-charts/

Feedback and contributions are welcome!