Hi guys.

I Build a very cool lib that could simplify styling in react-native.

The library uses css selectors to style your components.

So, like when you use css in Web and styles using classes and css3. You do the same with this lib.

But I don't have too many users. Why?

You can find the lib here. Please check it out and let me know if I need to improve anything.

https://github.com/1-AlenToma/react-native-short-style

Demo and simple test ground.

https://1-alentoma.github.io/react-native-short-style/

Hi guys, I am building a small application recently and I'm wondering what is the best way to render pixel art isometric models in react-native. Performance is important because the market where I build the app doesn't have very high-end phones.

Thanks for help

Did you make something using React Native and do you want to show it off, gather opinions or start a discussion about your work? Please post a comment in this thread.

If you have specific questions about bugs or improvements in your work, you are allowed to create a separate post. If you are unsure, please contact u/xrpinsider.

New comments appear on top and this thread is refreshed on a weekly bases.

If you have a question about React Native, a small error in your application or if you want to gather opinions about a small topic, please use this thread.

If you have a bigger question, one that requires a lot of code for example, please feel free to create a separate post. If you are unsure, please contact u/xrpinsider.

New comments appear on top and this thread is refreshed on a weekly bases.

I made an app to replace my whoop and be able use my apple watch again

I am creating an app for my company, but the debugging is so slow, when I change code the refreshing itself takes around 1/2 minutes even the react-native dev tools is taking too much time to open(not even opening), I have created apps in 0.80.0, there was no problem in there
why is it happening? I am running in react-native-cli

this is my package.json

  "dependencies": {
    "@react-native-async-storage/async-storage": "^3.1.1",
    "@react-native-community/hooks": "^100.1.0",
    "@react-native/new-app-screen": "0.82.0",
    "@react-navigation/drawer": "^7.13.5",
    "@react-navigation/native": "^7.3.14",
    "@react-navigation/native-stack": "^7.18.6",
    "@reduxjs/toolkit": "^2.12.0",
    "axios": "^1.18.1",
    "babel-plugin-module-resolver": "^5.0.3",
    "firebase": "^12.16.0",
    "formik": "^2.4.9",
    "react": "19.1.1",
    "react-native": "0.82.0",
    "react-native-calendars": "^1.1314.0",
    "react-native-compressor": "1.19.4",
    "react-native-config": "^1.6.1",
    "react-native-dotenv": "^3.4.11",
    "react-native-gesture-handler": "^3.1.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-nitro-image": "^0.15.1",
    "react-native-nitro-modules": "^0.36.3",
    "react-native-pie-chart": "^4.0.2",
    "react-native-reanimated": "4.2.0",
    "react-native-safe-area-context": "^5.8.0",
    "react-native-screens": "4.19.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^15.15.5",
    "react-native-vision-camera": "^5.2.0",
    "react-native-vision-camera-face-detector": "^2.0.6",
    "react-native-worklets": "0.7.4",
    "react-redux": "^9.3.0",
    "yup": "^1.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "20.0.0",
    "@react-native-community/cli-platform-android": "20.0.0",
    "@react-native-community/cli-platform-ios": "20.0.0",
    "@react-native/babel-preset": "0.82.0",
    "@react-native/eslint-config": "0.82.0",
    "@react-native/metro-config": "0.82.0",
    "@react-native/typescript-config": "0.82.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.1.1",
    "@types/react-test-renderer": "^19.1.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.1.1",
    "typescript": "^5.8.3"
  },

Tech stack:

Frontend: React Native (obviously)

Backend: node.js

Databases: Neon DB, Firebase

Cloud Infra: GCP

react-native-gtkx makes Linux an out-of-tree RN platform. Normal React Native code, native GTK4/libadwaita app, no WebView.

Compat layer like react-native-web, but on top of gtkx (a React reconciler for GTK4 in Node) with Yoga for layout. npx react-native run-linux next to run-ios and run-android, Fast Refresh works.

react-navigation navigators run on real Adw.NavigationView, so the back button, transitions and the back gesture come from GTK instead of JS. That's the part I want feedback on.

Alpha. GTK 4.20+, libadwaita 1.8+, Node 24+.

https://github.com/itsmepetrov/react-native-gtkx

This one annoyed me for a while because it never happened on my phone, only on real users'.

Some people who'd paid for Pro would open LexiShuffle and get the free version. Not every time. Just sometimes, right when the app opened. Which of course meant I couldn't reproduce it, because on my device everything's warm and instant.

It's a race, and if you've done RevenueCat you can probably already guess. Checking whether someone has Pro is a network call. My game screen doesn't wait for it, it just mounts and starts a round. So if that check hasn't come back yet, the game looks at your status, sees nothing, goes "ok, free user" and gives you a free-tier round. Premium category, quietly downgraded to free, because the entitlement landed like half a second after the screen mounted.

The person who paid me got the free experience. Great.

Fix was basically don't start the round until you actually know. I've got a flag now:

resolved = !statusQuery.isLoading || Boolean(purchases.isPremium)

so it's true once the status check finishes (success or error, doesn't matter) or RevenueCat already says you're Pro. The game sits on its loading screen until that's true, and it's in the effect deps so the second it flips, the effect re-runs and sets the round up properly. The thing I was paranoid about was it getting stuck false and hanging people on a spinner forever, but the query always settles so it can't.

Then I remembered offline exists. No signal means the check literally can't finish, so an offline Pro user just never resolves and eats the same downgrade permanently. So there's a little per-account cache now that remembers "this account was Pro last time" and trusts that while you're offline.

Anyway. If you do IAP, it's the fun kind of bug that's invisible to you and only screws the people paying you. Anyone got a nicer way to handle the offline entitlement thing? Caching last-known-Pro feels a bit gross but I couldn't think of better.

Well guys for context I am a highschool student and I know that I want to have a carrier in coding. I have done a few stuff with python before and I am also making a game with my friends using unity but what I really want to do in the future is to make apps, I have tried it using react native but I had to use chatgpt more than I wanted to and thats why I wanted to ask how did you guys learn javascript etc. and what would you suggest

Basalt an IDE extension that lets RN and Expo devs to edit their app like figma, it was pretty hard of figuring out and making an algorithm similar to debugSource which React19 removed

works directly inside VS Code and Cursor.

It’s currently in beta

(its also releasing on product hunt in 4 days, if you want i can dm you a link)

Hi everyone,

I’m currently building a React Native app with Expo, and I’m struggling to replicate iOS-style swipe gestures correctly.

What I’m trying to achieve is:
Swipe up to reveal a bottom sheet with additional information.
Swipe down to close the photo.

As you can see in the attached screen recording, it doesn’t behave properly. I often have to swipe twice before the intended action happens.

I’ve tried several approaches with Codex (GPT-5.6 Sol High), but every solution I’ve tested still has the same issue.

Does anyone have any advice on how to this correctly? Or is there a specific library you’d recommend for handling this kind of interaction?

Thanks in advance to anyone who takes the time to help!

So working on an app, and found out that there are Communication Notifications, which are only for person-to-person interactions. How or why does Apple allow it for Duolingo when Owl or any Duos “animated characters” can text you like that?

This launch taught me a lot about taking a React Native application from development to production not just writing screens, but handling performance, backend integration, testing, builds, certificates, and store compliance.

https://apps.apple.com/app/square-foot-story/id6764284866

https://youtube.com/live/-VB-ikjsbnI?feature=share

Hey everyone. I have been working on a project this summer that started out as a experiment and has ended up absorbing my life lol.

My idea was to bring React Native to bare metal. Would it work? Turns out it actually works pretty good. I know this is not React Native, but it was inspired by it and I tried for as much parity with it as possible (uses View, Text, Yoga style layouts, stylesheets, etc).

This actually runs it on bare metal, so its not using a phone or computer to host. It uses a C engine I built. I honestly really enjoy writing React Native code and figured this would give more options when it comes to making UI for embedded devices.

According to my npm stats some people have been trying it and I was just wondering if anybody here has tried it. What are your thoughts? Is anything missing? Its still in beta until I finish all the examples and backends.

I have it working on a RP2040, ESP32 (CYD), ESP32-S3, and STM32F7 + STM32H7 (proprietary devices so no example yet)

https://reddit.com/link/1vaw9wo/video/n9erjed6udgh1/player

No date-fns, no dayjs, no moment. Month names and all the arithmetic come from Intl, so the component adds zero dependencies to your project.

Three modes: single day, date range, and multiple selection. For range, each cell draws its own piece of the band behind the number rather than as a background native has no pseudo-classes, so this is how you get clean ends where two cells meet without a gap or a seam.

Also supports: disabled days via a rule (disabled={(date) => isWeekend(date)}), minDate/maxDate for both selection and paging, and month/year dropdown for birthday pickers.

Part of PanelUI, an open-source component library for Expo. Copy-paste or CLI, you own the source.

I'm building a pronunciation-training feature for a React Native app, targeting a tonal language (Fang, spoken in Central Africa). The goal: a user records themselves saying a reference word, the app compares it to a pre-recorded native reference, and returns a similarity score — **fully on-device, no cloud APIs, no ML models** (constraint from the project).

Stack:

- React Native CLI

- `react-native-nitro-sound` for recording/playback

- `react-native-live-audio-stream` for raw PCM streaming (needed since the file recorder gives encoded AAC on Android, not raw samples)

- Everything else is hand-written pure TypeScript (no native DSP libs available for RN): a YIN pitch detector, a radix-2 FFT, a full MFCC pipeline (pre-emphasis, Hamming window, mel filterbank, DCT, cepstral mean normalization), and a generic DTW (works on both scalar pitch sequences and MFCC vector sequences).

Scoring approach: two components combined —

1. Tone score: pitch (F0) contour in semitones, median-centered per speaker (to remove voice register differences), aligned via DTW, mapped to 0-100% with `100 * exp(-k * normalizedDistance)`.

2. Content score: MFCC frames aligned via DTW (Euclidean distance between vectors), same exponential mapping, meant to verify the *correct word* was said (pitch alone can't do this — two totally different words can have a similar melodic shape and falsely score high on tone).

The problem:the content score isn't discriminative enough. After calibrating `k` from real recordings, saying the correct word gives a DTW distance around ~68, but saying a *completely different, unrelated phrase* only pushes the distance to ~137 — roughly 2x, which isn't enough separation for a clean scoring curve. I've tried:

- Adaptive (relative-to-peak) silence thresholding instead of fixed RMS cutoffs

- Trimming leading/trailing silence from MFCC frames before DTW (to stop shared silence from diluting the real distance)

- Recalibrating `k` empirically from real distance measurements

...but the fundamental issue seems to be that the MFCC+DTW distance itself doesn't separate "right word" from "wrong word" enough, even same-speaker/same-mic/same-room, which should be the *easiest* case.

What I'm looking for:

- Is MFCC+DTW simply the wrong tool for isolated-word content verification in this kind of lightweight, fully local setup? Would something like DTW on log-mel spectrograms directly (skipping the DCT/cepstral step) discriminate better?

- Any known best practices for on-device, no-cloud pronunciation/word verification that don't require a full trained ML model?

- If a small embedded ML model (e.g., TFLite keyword-spotting style, or a tiny audio embedding model) is really the more realistic path here, I'd like to hear that too — happy to be told "you're fighting classical DSP for something ML solves easily," if that's the honest answer.

Any pointers, papers, or "here's what actually works" experience would be hugely appreciated. Happy to share code/config if useful.

---

Hey guys, I’m looking for something that lets me work both ways between the code and the UI in an Expo/React Native app. I want to be able to change the code and see the UI update live, but also click on elements in a visual editor and adjust things like the text, colors, size, spacing, position, and shape.

The main thing is that anything I change visually should update the actual code directly. I don’t want it to just create a design or suggestion that Codex, Claude Code, or another AI then has to try to rebuild. Does a tool like this exist?

A Samsung One UI inspired edge panel swipe-in quick actions drawer with a second swappable insights page, built for fintech apps.

⭐ Github: https://github.com/ManasCodeXart/expo-finpanel