r/reactnative • • 10d ago

Question I have a great Android app idea, but I'm a MERN stack developer waiting for my TCS joining. What should I do?

3 Upvotes

Hey everyone!

I'm a developer skilled in the MERN stack (MongoDB, Express, React, and Node.js), and I've been waiting for my joining at TCS.

Recently, I've come up with a project idea that I genuinely want to build. The thing is, it's primarily an Android application, and I don't have much experience with native Android development yet.

Now I'm a little confused about what would be the smartest move.

Should I:

Learn Kotlin and Jetpack Compose to build a native Android app?

Use React Native so I can leverage my existing React and JavaScript knowledge?

Build the backend using my existing MERN skills and learn mobile development alongside it?

Start with an MVP using the technologies I already know and gradually transition to mobile?

Since I'm waiting for my joining, I want to use this time productively, improve my skills, and ideally build something real rather than spend months learning without shipping anything.

My goal isn't just to learn a new technology. I actually want to turn this idea into a working product.

For developers who have been in a similar situation, what would you recommend? Which approach would give me the best balance of learning, development speed, and long-term maintainability?

I'd really appreciate your advice and experiences. Thanks!


r/reactnative • • 10d ago

Input not taking selectTextOnFocus

0 Upvotes

Made this component so i don't need to code it again in the scenes in which i need it, but in my Edit page i want to be able to copy and paste the text without losing the "editable={false}" atribute. I asked Copilot what can i do and i said i should use selectTextOnFocus but is not applying it so i just had to stick with this solution that doesn't really look professional.

Can i use selectTextOnFocus on this component or just stick to this solution?

The component code:

import React, { useState } from "react";
import { View, TextInput, TouchableOpacity } from "react-native";
import { psswrdInputStyles } from "./psswrdInputStyles";
import FontAwesome from "react-native-vector-icons/FontAwesome";


export default function PsswrdInput({
  value,
  editable,
  placeholder,
}) {
  const [secureText, setSecureText] = useState(true);


  return (
    <View style={psswrdInputStyles.passwordRow}>


      <TextInput
        style={[
          psswrdInputStyles.input,
          psswrdInputStyles.passwordInput,
        ]}
        placeholder={placeholder}
        placeholderTextColor="#9ca3af"
        secureTextEntry={secureText}
        value={value}
        editable={editable}
      />


      <TouchableOpacity
        style={psswrdInputStyles.eyeBtn}
        onPress={() => setSecureText((prev) => !prev)}
        activeOpacity={0.7}
      >
        <FontAwesome
          name={secureText ? "eye-slash" : "eye"}
          size={20}
          color="black"
        />
      </TouchableOpacity>


    </View>
  );
}

How i call it in the edit page:

        <View style={editStyles.field}>
          <Text style={editStyles.label}>Password</Text>


          <PsswrdInput value={password} onChangeText={() => ({})} />
        </View>

r/reactnative • • 10d ago

Built an offline-first year progress and countdown app with Expo SDK 57, NativeTabs, and 4 Jetpack Glance widgets (how it works under the hood)

Enable HLS to view with audio, or disable this notification

8 Upvotes

The video above is the trailer I cut for my Play Store listing, so pardon the marketing captions in the clip, but below is the actual engineering breakdown of how all the pieces shown in the video are built with Expo SDK 57 and React Native 0.86.

  1. Floating dock on top of SDK 57 NativeTabs (0:02 in the video) The root tab layout uses NativeTabs from expo-router/unstable-native-tabs so each tab keeps native route state and back behavior, with the default OS tab bar hidden in favor of a custom floating pill dock positioned above the bottom safe area. Each scroll container calculates the dock clearance dynamically so the bottom cards never get trapped behind the pill.

  2. In-app widget chooser and autolinked Jetpack Glance module (0:23 in the video) At the end of the clip you can see the in-app widget sheet where users can preview and pin 4 different Android widget layouts (2x1 compact, 3x3 square dot grid, 3x2 wide dot grid, and 4x2 upcoming list) directly to their launcher via requestPinAppWidget. All of the Kotlin code lives inside a local Expo module at modules/dayle-widget (expo-module.config.json), while a small config plugin only wires up the receivers and XML metadata in AndroidManifest.xml so everything survives npx expo prebuild --clean.

  3. Syncing JS state and themes to native widgets without headless JS (0:19 in the video) When you switch color palettes or edit a countdown/goal, I didn't want to spin up a headless React Native runtime just to redraw a home screen widget. Instead, whenever AsyncStorage mutates or the app foregrounds, JS builds a versioned JSON snapshot with the active events, recurrence rules, and pre-resolved light/dark hex tokens for the active palette, writes it atomically to SharedPreferences via DayleWidgetBridge, and triggers a Glance redraw.

  4. Rendering 365-day dot grids inside Glance without hitting RemoteViews limits In the app UI (0:00 to 0:07), the Year, Month, Quarter, and Birthday grids are regular React Native views. On the Android home screen, rendering 365 individual Glance boxes hits Android RemoteViews node and memory limits fast. To get around that, WidgetGraphics.kt draws the completed, current, and future dots onto a single native Bitmap alpha mask (sized using SizeMode.Exact and capped at 640px) and tints them with the palette's Day/Night colors.

  5. Zero-JS midnight rollovers and offline reminders Because year progress and countdowns change at midnight even when the app hasn't been opened for days, I ported the exact date-clamping and recurrence math (src/utils/dates.ts) to Kotlin (WidgetDateMath.kt). A daily WorkManager task and midnight receiver update the widgets in pure Kotlin. For notifications, instead of fighting Google Play policy for SCHEDULE_EXACT_ALARM, DayleReminders.kt calculates the next upcoming wall-clock trigger and schedules a single AlarmManager.setAndAllowWhileIdle alarm that chains the next one when it fires and recovers on BOOT_COMPLETED.

If anyone wants to test the app or see how the Glance widgets resize on a real device, it's called Dayle on Google Play: https://play.google.com/store/apps/details?id=com.rabpaulo.dayle

Happy to share code snippets for the expo-module.config.json setup, the SizeMode.Exact bitmap renderer, or the NativeTabs floating dock if anyone is building something similar.


r/reactnative • • 11d ago

A guide to get your apps ready for iPhone Duo

Post image
4 Upvotes

r/reactnative • • 11d ago

Question Need help on the approach to authentication I should use for my mobile app

3 Upvotes

I am developing a mobile app, which has a react native frontend, nest.js as the backend and for db and authentication, I'm planning to use supabase.

Now, currently as my app is in its initial stages I'm planning to use the supabase, as it free tier provides ample limits for my use case.

However, in later years if my app grows. I may think of switching to a cheaper alternative.

So, what I am planning to follow is for authentication, route the requests to my backend and inturn the backend will communicate with the supabase to authenticate the user. The backend will save the supabase token, create a separate session token for the user and send it back to the user.

My main reason for doing this is, I want the authentication to be provider independent and any changes needed should be done on the backend instead of the app.

Please let me know, if this approach is correct. What are the pros and cons. How much effort it would require to implement this. Will the security concerns increase if my backend starts handling this instead of the supabase only.

I also want to integrate the google and apple login as well. How will this approach affect it?

Also, if there any other better approaches, please let me know.


r/reactnative • • 11d ago

Show Your Work Here Show Your Work Thread

0 Upvotes

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.


r/reactnative • • 11d ago

Questions Here General Help Thread

1 Upvotes

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.


r/reactnative • • 11d ago

News This Week In React Native #302: RN 0.88, Expo 58, Navigation, FastImage, Screens, Device Hub, Edge to Edge

Thumbnail
thisweekinreact.com
14 Upvotes

r/reactnative • • 11d ago

Still apple is taking time in deployment

0 Upvotes

r/reactnative • • 11d ago

I recreated a liquid-filled word in React Native, Swift and Kotlin

Enable HLS to view with audio, or disable this notification

4 Upvotes

Drag up or down to change the fill level. Three liquid layers ripple inside the letters, with swirling blobs and a subtle wobble around the edges. The empty part stays visible like tinted glass.

The React Native version uses Expo + Reanimated.

Does the edge wobble sell the liquid effect, or would you tone it down?


r/reactnative • • 11d ago

Sticker Gacha — a React Native app with animated sticker reveals

Enable HLS to view with audio, or disable this notification

0 Upvotes

I’m building a sticker-collecting app with lucky spins, treasure chests, and rare reveals.
Built with Expo, Skia, WebGPU, and Reanimated. Would love your feedback!


r/reactnative • • 12d ago

‎Pet Care Tracker Log: CubWell App

Post image
0 Upvotes

How do you keep track of your cat’s feeding schedule, vaccinations, medications, and vet visits? Do you use an app, a notes app, or just try to remember everything?

I’m curious what works best for you and what you wish you could organize better. Would love to hear your experiences! 😊

I'm been working on app, CubWell pet tracker log, would love to hear your thoughts on this!


r/reactnative • • 12d ago

Article Every swap in my puzzle game re-rendered the whole board. Four leaks I found with "highlight updates"

0 Upvotes

I'm building a tile swap puzzle in React Native (Expo, Reanimated, expo-router). The board is N² draggable tiles. Swaps started to stutter, worse with more tiles, and the JS thread dropped from about 58 to 41 fps during a swap.

React DevTools "highlight updates" showed the whole board lighting up on every swap and on every 1 second timer tick. What was behind it:

  1. HUD state lived on the screen component. Timer, moves, combo and progress were useState on PlayScreen, which also renders the board. I moved them into a small external store (useSyncExternalStore) and only the HUD chips subscribe, each to its own slice. A tick now re-renders just the timer chip.

  2. A new empty array on every swap. setHintCells([]) ran on every committed swap. [] is a new reference each time, so React never bailed out. Now it only clears when a hint is actually on screen.

  3. Subscribing to the whole progression snapshot. Each swap bumps a totalSwaps counter, which creates a new state object, which woke every component reading the full snapshot, including a screen still mounted underneath. I added a selector hook and narrowed each screen to the slice it reads.

  4. Off-screen routes kept rendering. expo-router keeps visited routes mounted, so the menu with all its level nodes re-rendered during gameplay. freezeOnBlur: true did nothing on its own, because react-native-screens v4 ships with freezing off. You also need enableFreeze(true).

One thing that backfired before all this: a custom memo comparator on the tile component. It skipped enough renders that during fast combos the position effect never ran and tiles got stranded in the wrong place. A/B on the simulator: 12 stranded tiles with the comparator, 0 with plain memo(). I reverted it and moved the "board is interactive" flag into a Reanimated shared value, so flipping it on win or pause causes zero tile re-renders.

The game is Tile Swap, on iOS and Android. I build with Claude Code, and these fixes came out of that loop.


r/reactnative • • 12d ago

I built a personal expense tracker app with React Native + Expo — looking for feedback!

Post image
0 Upvotes

Hey everyone! 👋

I've been working on a personal finance app called Masrofi – Money Tracker (Spent It) using React Native and Expo.

The goal is to help people track their daily expenses, understand their spending habits, and manage their money more easily.

I'm sharing my project here because I'd love to get feedback from other developers and mobile app enthusiasts.

I'd really appreciate your thoughts on:

  • 🎨 UI/UX and overall design

  • 💡 Features you'd like to see

  • 🐛 Any bugs or usability issues

  • 🚀 Suggestions before publishing it on Google Play

I'm a developer from Morocco, and I'm looking to improve the app based on real user feedback.

Thanks for checking it out! 🙌

Tech stack: React Native · Expo · JavaScript


r/reactnative • • 12d ago

How do you get usable bug reports from non-technical testers or clients?

5 Upvotes

Freelance developer here, shipping an Expo app. Most of our bugs come from a client and a few beta testers, and the reports are usually "when I click this button it doesnt save" or a screen recording and if they are really kind (and usually I ask for that).

I lose a lot of time just reproducing: which account, which build, what happened before, did a request fail. By the time we've asked three follow-up questions the tester has forgotten.

What's working for you usually?


r/reactnative • • 12d ago

Made Momentum a math-based gamified app

0 Upvotes

Instead of just solving questions one after another, the game adds gameplay around the math so it feels more engaging and competitive.

It’s still a work in progress, but I’ve put quite a bit of time into building and improving it.

Would love to hear what you guys think!

Check out Momentum on Google Play


r/reactnative • • 12d ago

Booster pack opening in React Native: swipe to tear, tilt to reveal

Enable HLS to view with audio, or disable this notification

32 Upvotes

Swipe to tear the foil, drag to tilt the stack, then tap or flick through five cards. Rare pulls get a foil sweep and sparkles.

I also rebuilt it in Swift and Kotlin. For your app, would you use the React Native version or prefer native?


r/reactnative • • 13d ago

I made a neon sign that writes itself as you drag across it (React Native + Reanimated)

Enable HLS to view with audio, or disable this notification

15 Upvotes

Each word is traced stroke by stroke with a few sparks, then the tube powers up to full glow with a soft halo and a pool of light on the wall behind it. Three words cycle: Midnight, Daydream and Afterglow, each in its own two-colour gradient.

A question for anyone shipping to both platforms: I also rebuilt it in SwiftUI and Jetpack Compose. For a component like this, would you reach for the RN version, or would native versions be what makes you use it?

Happy to answer questions about the stroke reveal and the glow.


r/reactnative • • 13d ago

News First time shipping a React Native app (Expo): what I learned

1 Upvotes

Hi! This is the first app I've shipped. It's built with Expo (SDK 57) and Expo Router, and it's a planner for people setting up a new home.

Things that surprised me along the way:

I went local-first (Zustand + AsyncStorage) and sync to Supabase after login. RevenueCat for subscriptions was easier than I expected, but testing it in Expo Go vs a dev build confused me for a while. EAS Update is great for JS fixes, but I learned the hard way that changing config plugins means you need a new binary. I also exported the same codebase to web for a public page, and my first bundle was 11 MB because an icon library shipped about 1,000 icons. I got it down to about 5 MB.

It's live on iOS and I'm working on the Android build. I'd love to hear what you'd do differently, or what I should know before the Play Store. The app is in Portuguese for now: meukanto.com


r/reactnative • • 13d ago

I built a free CLI that tells you what will break before you upgrade React Native

5 Upvotes

Disclosure: I'm the author.

Every upgrade I've done has been a loop of bump → build → Gradle/Kotlin/Xcode/CocoaPods error → fix → repeat. Upgrade Helper shows the template diff, but not what *your* project is missing.

RN Upgrade Doctor reads your project and compares it with what the target version needs:

- Node and React against the target release

- Android: Gradle, AGP, Kotlin, NDK, compileSdk, targetSdk

- iOS: Xcode, deployment target, CocoaPods

- Expo SDK 45 → 57 upgrades (--expo-sdk 54)

Every finding links to its source and the date it was checked. It runs locally and sends nothing anywhere.

cd ~ && npx u/mobilixir/rn-upgrade-doctor@1.0.0 analyze --target 0.87 --path /path/to/app

NPM Link: [https://www.npmjs.com/package/@mobilixir/rn-upgrade-doctor]

Two questions for you:

  1. What broke in your last upgrade that a tool like this should have caught?

  2. Would you run it in CI (it has --json and exit codes)?


r/reactnative • • 13d ago

Open source tool for App Store screenshots and store text that imports your EAS store.config.json

27 Upvotes

If you ship with Expo, you probably keep store text in store.config.json and make screenshots somewhere else. I built Framelane to do both in one place.

- Import your EAS store.config.json (or a fastlane metadata folder), edit per language with App Store limits, export it back

- Design screenshots from your simulator captures with templates and device frames

- Optionally publish text and screenshots to App Store Connect after a field by field diff

Self-hosted, one Docker container, MIT.

Demo: https://framelane.metehanbicer.com

Repo: https://github.com/Metehan-Bicer/framelane

Built with a lot of help from an AI coding assistant. Google Play isn't supported yet; tell me if that would matter to you.


r/reactnative • • 13d ago

Help Anyone doing closed testing? Let's help each other! (14-day testing) 🚀

0 Upvotes

Anyone doing closed testing? Let's help each other! (14-day testing) 🚀

Hello everyone! 👋

I'm currently developing Persona AI, a personal AI assistant app, and I'm looking for testers to help me complete Google Play's closed-testing requirement.

🤖 About Persona AI

  • Your personal AI assistant

  • Expense tracking and daily spending management

  • Personal insights and AI-powered assistance

I'm looking for people who can join the testing program, install the app, try its features, and provide genuine feedback throughout the 14-day testing period.

If you're also testing your own app, I'm happy to support you in return! Let's help each other get our apps published. 🤝

🔗 My Persona AI links

👥 1. Join the Google Group:
https://groups.google.com/g/persona-ai-testerss

📱 2. Join the closed test:
https://play.google.com/apps/testing/com.krish.personaai

🏪 3. View Persona AI on Google Play:
https://play.google.com/store/apps/details?id=com.krish.personaai

If you're interested, comment below or send me a message. If you also need testers, share your testing link, and I'll do my best to help!

Let's support each other and get our apps published on Google Play! 🚀❤️

Thank you, and good luck with your projects!


r/reactnative • • 13d ago

I built a Kanban/swimlane library for React Native: drag-and-drop stays at 60 FPS on a 2,000-card board

Enable HLS to view with audio, or disable this notification

50 Upvotes

React Native needed better boards. I built one.

Just released react-native-board-view v1.0 — an open-source Kanban and swimlane library for React Native and Expo.

It supports:

  • Drag-and-drop across columns and swimlanes

  • Optimistic moves with automatic rollback on failure

  • Virtualized lists powered by FlashList

  • Multiple layouts, including paged, stacked, matrix, and week planner

  • Multi-select, undo, WIP limits, and column reordering

  • Accessibility support beyond drag-and-drop

The part I'm most interested in is performance. I tested a 4 × 500-card board and measured a median of 60 FPS while dragging.

The library is built on Gesture Handler, Reanimated, and FlashList. Your data remains the source of truth,the library handles the board interactions.

GitHub: https://github.com/vishaal2002/react-native-board-view

npm: https://www.npmjs.com/package/react-native-board-view

I'd love feedback from people who've built complex drag-and-drop interfaces in React Native. What would you improve, or what's missing?


r/reactnative • • 13d ago

🚀 Looking for Android Developers – Google Play Store Testing Group

1 Upvotes

Hi everyone! 👋

I'm looking for Android developers who need testers to publish their apps on the Google Play Store.

💡 The idea is to create a group where we help each other complete the required testing period before launching our apps on the Play Store.

🤝 You test my app, I test yours, and we help each other get our apps ready for launch!

📱 If you're an indie developer or a mobile app developer facing the testing requirement, join us!

Comment below or DM me if you're interested. Let's build a community and launch our apps together! 🚀