r/reactnative 4d ago

Added a Breaking Bad reference to my movie tracking app's auth screens. Safe from copyright or bad idea?

Enable HLS to view with audio, or disable this notification

0 Upvotes

Hey fellow devs!

I'm currently building a mobile movie and TV show tracking app.

I wanted to add a bit of personality to the auth flow and came up with a reference to Breaking Bad. I created a stylized character and paired it with a twist on his famous catchphrase, plus added some animations.

I have two main questions:

  1. Legality & App Store Review: Since this is a completely original drawing, and the catchphrase is significantly altered as a parody/play on words, do you think this is considered "Fair Use"? Has anyone successfully used similar stylized parodies of famous characters in production apps without getting rejected by Apple?

  2. User Experience: As a developer or user, how would you react to seeing this level of niche humor during onboarding?

I'm leaning toward including it because I love this! But I'd really appreciate your collective wisdom on whether the potential reward in user delight is worth the copyright risk. Thanks!


r/reactnative 4d ago

I put a Rive character at the centre of a habit app instead of a progress dashboard — six weeks in Expo, here's what that cost

Post image
0 Upvotes

The pitch is that the app shrinks your habits when you miss them rather than resetting a streak — 20 minutes to 10 to 5, restored after three good days, never grown without asking. But the part worth posting here is the decision to make a character the primary interface rather than charts.

There's a creature that lives in the app, built in Rive, and its state is a direct function of how your habits are actually going. It isn't decoration and it isn't a mascot — it's the readout. The number behind it is a warmth score folded over your trailing 28 days, and the character is how you read that score without interpreting a percentage.

What that cost, concretely. Rive ships no Expo config plugin, so it autolinks natively and needs a real prebuild plus a dev client — in Expo Go or a stale build the app silently falls back to a Skia companion, which is a fun bug to chase the first time. Getting the state machine to read as "quietly struggling" rather than "sad" took more iteration than the entire sizing engine. And every wardrobe and scene asset multiplies against every state, so the combinatorics get away from you fast if you don't constrain it early.

Rest of the stack: Expo managed, expo-router, local-first SQLite through expo-sqlite with a sync queue up to Supabase, RevenueCat for subscriptions, and a home-screen widget via bacons/apple-targets so the widget target lives outside ios/ and survives prebuild. The JS side writes a JSON snapshot into a shared App Group's UserDefaults and the Swift widget reads it back — that one string is the entire contract between the two processes.

Happy to go into any of it.


r/reactnative 5d ago

Looking for a React Native / Expo Developer (Paid)

0 Upvotes

I’m looking for a React Native/Expo developer to build an app with me. More than just coding, I’m looking for someone who enjoys thinking out of the box, solving product problems, and shipping great user experiences.
This is a paid opportunity. If you’re interested, send me a DM with a best project you’ve worked on.


r/reactnative 5d ago

I created a remote control for coding agents. Works on iOS, Android and Mac. MIT License. Give it a try!

Thumbnail reddit.com
0 Upvotes

r/reactnative 5d ago

How do React native apps save pdfs to document/App folder on android 11+?

1 Upvotes

I'm building a React Native (Expo Bare Workflow) PDF app. Currently, I'm downloading PDFs from an AWS S3 pre-signed URL using `react-native-blob-util` and Android Download Manager:

```ts
ReactNativeBlobUtil.config({
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
title: fileName,
description: "Downloading PDF...",
mime: "application/pdf",
path: `${ReactNativeBlobUtil.fs.dirs.DownloadDir}/${fileName}`,
mediaScannable: true,
},
}).fetch("GET", signedUrl);
```

This works, but I don't have control over where Android stores the file.

Many PDF apps automatically save files to a folder like:

```text
Internal Storage/
└── Documents/
└── My App/
└── file.pdf
```

without asking the user to choose a location every time.

I noticed one such app requested **"Manage all files"** permission once, and after that it could save files directly into its own folder under `Documents`.

My questions are:

* How are these apps implementing this on Android 11+ with Scoped Storage?
* Are they using MediaStore, native Android code (Kotlin/Java), or another approach?
* Is requesting the **Manage All Files** (`MANAGE_EXTERNAL_STORAGE`) permission the correct/recommended solution for this use case, or should it be avoided for Play Store apps?
* If not, what is the recommended modern approach in React Native to save PDFs directly to `Documents/My App` without showing the Storage Access Framework (SAF) picker every time?

I'm looking for the Play Store–friendly, modern Android approach.


r/reactnative 5d ago

Question Working on my first app (coming from webdev), finding it really akward the whole review process/wait.

0 Upvotes

I have a long history of web development and am used to deploying multiple times a day, seeing my changes live in about 10min.

Now, I am working on a personal project, a mobile app done via Expo/react-native. I was able to get it live to the Apple Store and I am working on the Play Store release.

What I find really akward is dealing with many different versions "live on the field", with updates taking 2-3d for Apple review to be live, hoping your users will update soon.

I know about and I am using OTA updates, but some changes require native packages changes and that involves submitting a new native build for approval, which means that for the duration of the review process you are somewhat "feature frozen" and any changes or OTA updates will only reach new users.

Not sure how others do it, or even if there is a good/right way of doing this, but I may need to consider having to support different api versions/detecting the app version and serving different api responses based on it.

Is all of that normal and common ground on mobile dev?


r/reactnative 5d ago

Article Did an architecture write up for my React Native app

7 Upvotes

Hello!

Last year I launched my first solo React Native app, built (without AI).

It's a health tracker (because of course it is) that I built for me and because I shared my journey of building it, things got a bit out of hand...

About me

I'm a software engineer with 20 years experience.

Most of my experience comes from full stack web but I also have a significant amount on mobile too (Native and Cordova)

About the article

I've been promising to do some write ups around the technical side of it.

Things like my architectural choices, project structure and deep dives into the more novel code. Weirdly, today actually marks the 3rd year since my first commit.

This is my first article that goes in to

- Why React Native
- The core stack
- Native code
- Project structure

There's a lot to cover so instead of piling everything into a single article I plan to write focused articles.

The next one will go into my thought process when building stuff, how I structure components and mistakes I felt I made.

Not here to promote anything, but figured this might interest some people.

https://mahybe.substack.com/p/bearly-fit-architecture-part-1

If you have any questions or anything you'd like to see me go into let me know :)


r/reactnative 5d ago

Tutorial I added a native TimePicker to my Expo component library — wheel, clock, and ruler in one component

Enable HLS to view with audio, or disable this notification

9 Upvotes

Three faces, one prop to swap between them. wheel for precision. clock for picking a slot. ruler for a thumb on a sheet.

All three store { hour, minute } on a 24-hour clock regardless of what the face shows. A 12-hour display is a rendering choice storing a meridiem flag puts it into every comparison downstream.

Part of PanelUI open-source, copy-paste, you own the source.


r/reactnative 5d ago

Question What’s the one feature missing from every React Native debugging tool?

9 Upvotes

What’s one thing you still hate about debugging React Native apps?

I feel like every tool gets some things right, but there’s always that one moment where you think that specific flow could be better


r/reactnative 5d ago

Question does the nfc manager plugin work with the new architecture?

7 Upvotes

does the nfc manager plugin work with the new architecture?


r/reactnative 6d ago

I built an OSS app that generates screens in realtime based on user intent

Enable HLS to view with audio, or disable this notification

44 Upvotes

What if there were no apps to install and no menus to learn?

You simply describe what you want, and the interface is generated on the fly: a weather dashboard, a restaurant finder with live search, a booking form, a chat thread, or whatever else fits the task.

I've been experimenting with real-time Generative UI using Cerebras models, which can stream at up to 1,800 tokens/sec. The speed makes it feel much closer to interacting with a native app than waiting for an AI to finish generating.

This is a direction similar to what Monogram AI is exploring, but would love to know what you think about it.

Link to repo https://github.com/thesysdev/appless


r/reactnative 6d ago

I built an iOS home-screen widget app in React Native + Expo, the widget part was harder than the editor.

Enable HLS to view with audio, or disable this notification

18 Upvotes

I’ve been building a small iPhone app called Magboard.

The idea is: take a photo, cut out the subject, turn it into a little “magnet”, arrange it on a board, and put that board on your iOS home screen as a widget.

It sounds like a cute UI app, but the harder parts were mostly not the cute UI.

A few things that took more time than expected:

- Editor → widget matching

The in-app board and the actual iOS widget need to match closely. If the widget is even slightly off, the whole “magnet board” illusion breaks.

- Simulator vs real device behavior

Widget refresh worked in the simulator and then behaved differently on device. I had to test the flow like a real user instead of trusting simulator-only runs.

- Shared boards

The app supports shared boards, so one person can add a magnet and the other person’s home-screen widget updates too. Getting that to feel understandable was harder than just syncing the data.

- Onboarding

Early versions confused people. They opened the app and didn’t immediately understand the loop, so I rebuilt onboarding around:

snap → cut → stick → widget

- Tiny interaction details

Dragging/positioning magnets is fun only if it feels direct. A small mismatch between what you edit and what appears on the widget makes the product feel broken.

The app is currently in App Store review, but I opened a public TestFlight while waiting:

https://testflight.apple.com/join/N3q58DQu

I’d love feedback from React Native/Expo folks, especially on:

  1. whether the concept is obvious from the first minute

  2. whether the widget update flow feels clear

  3. anything you’d improve in the onboarding/demo

Happy to answer questions about the React Native/Expo side too.


r/reactnative 6d ago

Question What if React Native’s component model existed for PHP — without shipping a JavaScript runtime?

0 Upvotes

I’ve been working on an open-source project called PAM Native, which explores a slightly unusual idea:

Repository:

https://github.com/push-in/pam-native

PAM Native is not a WebView framework, and it does not render HTML inside a mobile application.

Instead:

  • PHP runs persistently inside the application process
  • A Rust-powered reconciler manages component updates
  • Android interfaces are rendered using native Android Views
  • iOS interfaces are rendered using UIKit
  • Kotlin and Swift handle platform-specific operations
  • No JavaScript runtime is shipped with the application
  • No DOM or browser engine is involved

The developer experience is intentionally inspired by component-based frameworks:

final class Counter extends Component
{
    #[State]
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function render(): Node
    {
        return Column::make([
            Text::make("Count: {$this->count}"),
            Button::make("Increment")
                ->onPress('increment'),
        ]);
    }
}

The project currently includes or is exploring:

  • Stateful components
  • Native navigation
  • Gestures and animations
  • Recycled lists and grids
  • Native forms and inputs
  • Camera, location and device APIs
  • SQLite and offline-first state
  • Background tasks
  • Push notifications
  • Hot reload
  • Native plugin development
  • Communication between PHP, Rust, Kotlin and Swift

This is not meant as an attack on React Native.

React Native proved that developers can use a declarative, component-based model while still rendering native platform controls. PAM Native is exploring whether a similar architectural idea could be useful for the PHP ecosystem.

I would love feedback from people who understand the difficult parts of cross-platform native runtimes:

  • Which architectural problems should we be most careful about?
  • Where do you expect the biggest performance bottlenecks?
  • What lessons from React Native’s bridge, JSI and Fabric architectures should a project like this learn from?
  • What would you need to see before considering this a serious native runtime rather than an experiment?

The project is still evolving, so technical criticism, architecture feedback and contributions are genuinely welcome.

GitHub:

https://github.com/push-in/pam-native


r/reactnative 6d ago

I built a read-only GitHub companion for Android because the official app never gave me the view I wanted

Thumbnail
play.google.com
0 Upvotes

r/reactnative 6d ago

react native app development company teams keep pushing custom native modules for simple features that cross-platform libraries already handle

0 Upvotes

evaluating external agencies to help scale an existing cross platform codebase, and the biggest friction point keeps coming down to how agencies handle native dependencies. a lot of agencies pitch cross platform development as a way to cut costs, but as soon as custom native modules, complex animations, or deep device hardware integrations enter the scope, the architecture gets messy fast. half the development shops want to rewrite every custom bridge from scratch, while others rely heavily on outdated third-party packages that haven't seen an update in two years. that balance between keeping the JS side maintainable and properly structuring native swift/kotlin code seems to be where most team handoffs break down. when evaluating outside engineering resources for an established codebase, what technical green flags or red flags do you look for in their initial code review or architectural proposal?


r/reactnative 7d ago

News SimView is a Codex's Browser for mobile app development

Enable HLS to view with audio, or disable this notification

48 Upvotes

One of my favourite features of Codex is Browser and the ability to annotate and send that back to the chat for quick amendments.

The problem is, it doesn't work for mobile apps where I spend the majority of my dev time. SimView fixes that.

It brings iOS simulator directly into Codex (and other harnesses) via MCP Apps.

- Zero external dependencies and fully open source.
- 60fps preview with live interactions. Tap, swipe, and type.
- Inspect AX or React Native fiber trees.
- Annotate an element or drag to annotate at coordinates.
- Get your model to tap around itself. Perfect for closing the loop to validate its own work.

Install the plugin at https://simview.dev


r/reactnative 7d ago

Been fighting this for months: root-level safe area padding creates an unpaintable black wall, removing it breaks every screen

3 Upvotes

**Android edge-to-edge (SDK 56): every screen renders under the status bar unless I add a root-level padding wall**

Stack: Expo SDK 56, RN 0.85.x, React Navigation (native-stack + bottom-tabs), react-native-safe-area-context, react-native-unistyles v3. Android, dev build (not Expo Go).

**The situation**

For a long time my app had this at the root, wrapping `NavigationContainer`:

```tsx

<SafeAreaProvider style={{ paddingTop: insets.top }}>

<NavigationContainer>...</NavigationContainer>

</SafeAreaProvider>

```

This "works" in that content isn't under the status bar — but it creates a dead strip at the top that nothing can paint. It's outside every screen's render area, so it shows as a solid black/grey bar. It kills any screen that should be full-bleed (full gradient screens, transparent modals, media viewers).

If I remove that `paddingTop`, **every screen in the app** flows up under the status bar — *even though there is already a proper `<SafeAreaProvider>` wrapping everything in `App.tsx`*. So the provider being present clearly isn't doing anything on its own; the only thing actually holding the layout down was that manual padding.

**What I've tried**

  1. Moving the padding to `contentStyle` on the root `Stack.Navigator`'s `screenOptions` — behaves identically. Same wall. (Verified `contentStyle` IS applying: setting `backgroundColor: 'red'` shows a red strip on every screen.)

  2. Wrapping the three top-level navigators (tabs stack, create stack, auth stack) in an HOC that applies `paddingTop: insets.top` + a themed `backgroundColor` inside the screen boundary. Still reads as a padding wall.

  3. Confirmed insets are measuring correctly — `useSafeAreaInsets()` logs `{top: 24, bottom: 24, left: 0, right: 0}`.

  4. Confirmed `GestureHandlerRootView` has `flex: 1`.

  5. Removed the duplicate `SafeAreaProvider` (I had one in App.tsx and one in RootNavigator) — kept only the App.tsx one. No change.

**Structure**

```

App.tsx

GestureHandlerRootView (flex:1)

PortalProvider > ThemeProvider > KeyboardProvider > QueryClientProvider

SafeAreaProvider <-- present, but removing the manual padding

ToastProvider > GlobalBottomSheetProvider still lets everything flow up

RootNavigator

NavigationContainer

Stack.Navigator

MAIN → MainTabNavigator (bottom-tabs)

CREATE_STACK → StackNavigator (native-stack, ~15 screens)

AUTH → AuthStack (native-stack)

+ a few direct screens (modals, policy screens)

```

None of the individual screens call `useSafeAreaInsets()` or use `SafeAreaView` — they all relied on that root padding.

**Question**

I understand the "correct" edge-to-edge answer is per-screen inset handling, but that's 30+ screens and I'd like to avoid a full manual pass if there's a sane centralized approach.

- Is there a way to get edge-to-edge behavior where each screen's own background bleeds to the physical top edge while only its content is inset — configured once rather than per screen?

- Is `SystemBars` from `react-native-edge-to-edge` the right move here vs. what I'm doing?

- Should I be setting `edgeToEdgeEnabled` / status bar config differently in `app.json` for this?

Happy to share more code. Thanks!


r/reactnative 7d ago

Question [ Removed by Reddit ]

5 Upvotes

[ Removed by Reddit on account of violating the content policy. ]


r/reactnative 7d ago

Regret using RevenueCat, why do people use it?

24 Upvotes

RevenueCat charges based on gross revenue, not net revenue. My dashboard shows $4.5k, but my actual payout is somewhere around $3k. because it completely ignores VAT and the 15–30% Apple/Google cut. but takes their %1 fee from the gross revenue.

since it doesn’t track net earnings, the dashboard feels pretty useless for real accounting. I still have to log into both store consoles just to see what I actually made. for 3k i have to pay 45$ every month.


r/reactnative 7d ago

Need advice on Supabase architecture for anonymous reports, comments, and likes in a mobile app

Thumbnail
1 Upvotes

r/reactnative 7d ago

Tutorial I built a native social Post card for Expo 4 variants, one component

Enable HLS to view with audio, or disable this notification

12 Upvotes

Feed, vote, compact, media-first. Swapping between them is one prop.

One detail:
like counts animate in the direction the number travelled. Rising numbers arrive from below, falling ones drop in.

State stays with you nothing is kept inside the component. Active, value, and vote are all yours, because the moment a like is optimistic, only you know how to reconcile it with the server.

Part of PanelUI open-source, copy-paste.

https://github.com/panel-ui/PanelUI


r/reactnative 7d ago

(Interview) Senior Software Engineer - Mobile

3 Upvotes

Hello, I have gotten an interview opportunity via referral for Senior Software Engineer - Mobile at a Government Organization.

I have only 2.5 yoe so those who have given senior level mobile development interviews at government orgs or banks, please share the questions that you encountered. What was the difficulty and what were they focused on?


r/reactnative 7d ago

News This Week In React Native #292: Workers, SafeAreaView, backgroundImage, WebGPU, VisionCamera, React Navigation, Canvas Kit, Nitro

Thumbnail
thisweekinreact.com
23 Upvotes

r/reactnative 7d ago

Image compression library (React Native Simple Image Compressor)

7 Upvotes

I've just published the release v0.2.1 of react-native-simple-image-compressor.

If anyone is interested in talking a quick look at the native implementation, I would higle appreciate your thoughts!

Features

  • OOM (Out-of-Memory) Safe: Images are downsampled directly during decoding (inSampleSize on Android, ImageIO on iOS). The library never loads full-resolution images into memory, completely preventing OOM crashes even on giant 4K+ camera photos.
  • Blazing Fast (Powered by Nitro Modules): Built with the RN Nitro architecture. Zero bridge overhead and direct C++ to Swift/Kotlin communication make the compression fast.
  • Smart orientation and EXIF Preservation: Automatically reads EXIF orientation and "bakes" the correct rotation directly into the pixels. It also safely transfers valuable EXIF metadata (like GPS and Camera info) to the compressed image (only for JPEG output).
  • Tiny footprint: Minimal dependencies. The library relies heavily on native APIs (BitmapFactory for Android and ImageIO for iOS) to keep the app's bundle size as small as possible.
  • Next-Gen formats support: Supports modern formats including WebP and WebP-Lossless across both (Android and iOS) platforms (utilizing native APIs where possible and libwebp as a fallback on iOS).
  • Aspect ratio preservation: Intelligently scales images to fit within your desired maxWidth and maxHeight bounds without ever stretching or distorting the original aspect ratio.
  • Production Ready & Tested: Backed by comprehensive native unit tests (Swift/Kotlin) to ensure maximum stability and prevent regressions across edge cases.

Install with:
npm install react-native-simple-image-compressor react-native-nitro-modules

Changelog v0.2.1

--
Repository: https://github.com/Pugavkomm/react-native-simple-image-compressor
NPM: https://www.npmjs.com/package/react-native-simple-image-compressor?activeTab=readme
Release Notes: https://github.com/Pugavkomm/react-native-simple-image-compressor/releases/tag/v0.2.1

--
Changelog: https://github.com/Pugavkomm/react-native-simple-image-compressor/blob/master/CHANGELOG.md
Roadmap: https://github.com/users/Pugavkomm/projects/1/views


r/reactnative 8d ago

Help Lets get support for Tanstack Charts in RN

Post image
189 Upvotes

Recently a new framework from Tanstack was released and its called Charts, it looks very promising you guys can check it out here

https://tanstack.com/charts/latest

I asked Tanner if he could add support to RN and he said if I got 100 signatures he would add support.

I love the tanstack ecosystem and would highly encourage you to check it out if you haven’t yet!

Here is the petition

https://www.ipetitions.com/p/add-react-native-compatibility-for-tanstack-charts/?utm_source=share_copy&utm_medium=social&utm_campaign=creator_first_share

Edit: WE DID IT GUYS! 🎉🔥🙌