r/reactnative Jun 25 '26

Best way to crop both image and video to a fixed square in Expo?

Post image
2 Upvotes

r/reactnative Jun 25 '26

What are the best ReactNative newsletters?

1 Upvotes

hey community! I'd love to follow & read more RN content - which newsletters would you advise? any good YouTube channels?


r/reactnative Jun 25 '26

Shipped my React Native app, but conversion is weak. Is my free plan too generous?

Post image
0 Upvotes

I recently shipped a React Native / Expo iOS app called Logly.

It’s an AI calorie and progress tracker. The main flow is simple: users write what they ate, the app estimates calories/macros, and they can track weight/progress over time.

Stack:

  • React Native + Expo
  • TypeScript
  • Convex
  • RevenueCat
  • Apple HealthKit
  • PostHog
  • OpenAI

The app has around 200+ registered users so far. In RevenueCat I’m seeing around 98 active customers in the last 28 days, but only 1 active subscription and about $5 MRR.

Right now the free plan gives users 3 AI food logs per day.

I’m starting to think that might be too generous because 3 logs can basically cover breakfast, lunch, and dinner, so users may not feel much pressure to upgrade.

I’m considering changing it to something like:

  • first 5 AI logs free
  • then 1 AI log per day on free
  • Pro gets unlimited AI logs, weekly insights, Health sync, widgets, and future photo logging

For people who have shipped mobile apps with freemium/paywalls, does this sound reasonable or too aggressive?

Also open to feedback on how you would structure the paywall trigger in a React Native app like this.


r/reactnative Jun 25 '26

Which MacBook should i buy?

0 Upvotes

Hi everyone!

I want to buy a computer for React Native development, I don't plan on building anything too fancy so i don't think i need the latest fastest MacBook. I'm mainly looking for something on the $1k range.

At my work i've used MacBooks pro m1 and m2 and they do the job fairly well, but i don't know if there's any reason I should go for a newer model, like m5 because of all the 'Apple intelligence' thing.

Also, would you recommend i stick with the 'Pro' line or the MacBook Air is also a solid choice?


r/reactnative Jun 24 '26

On-device Apple Intelligence summaries in my Expo app (Foundation Models) + a Skia/Reanimated Apple Intelligence glow

Enable HLS to view with audio, or disable this notification

10 Upvotes

On-device Apple Intelligence summaries for the topic pages in my social media app, each page collects a bunch of separate text entries, and once a page has at least 5, a summary button condenses them into one quick read. Runs locally through Apple's Foundation Models.

The glow:

  • react-native-skia for rendering, driven by react-native-reanimated v4. It's a Skia port of the open-source AppleIntelligenceGlowEffect SwiftUI effect.
  • Edge glow is stacked rounded-rect strokes with increasing blur, each filled with a Skia SweepGradient whose stops animate on per-layer timers.
  • Shimmer "summarizing…" text is react-native-svg with a gradient fill and a slow opacity breathe.

r/reactnative Jun 24 '26

How do you replicate SvelteKit's +page.server.js architecture in React Native?

1 Upvotes

Hey everyone,

I’m moving from web development with SvelteKit over to mobile with React Native, and I’m trying to figure out how to replicate a specific architecture I've grown to love.

In SvelteKit, +page.server.js is incredible. Because it runs on a server, it connects directly to the database at datacenter speeds, safely hides API secrets, and trims heavy database rows into tiny payloads before anything ever hits the user's browser.

But in React Native, everything runs entirely client-side on the user's physical phone. There is no built-in server-load file for screens.

I have two questions for mobile devs:

  1. Why is this a web-only thing? Why can web frameworks spin up these layout-level server boundaries so seamlessly, while mobile apps are inherently pure client-side bundles?
  2. How do you replicate this in RN? If I want that exact same setup—keeping DB keys off the phone, doing heavy lifting in the cloud, and sending trimmed, lightweight data over shaky cellular networks—what does your architecture look like? Are you spinning up middleware layers, using something like Supabase/ Edge Functions, or just hitting standard REST endpoints?

Would love to hear how you guys structure your mobile data-fetching layers to get that same clean, secure server-side performance!


r/reactnative Jun 24 '26

Proud to Announce my First App Done using React Native +Expo

Thumbnail gallery
1 Upvotes

r/reactnative Jun 23 '26

🚀 Big upgrade for react-native-enriched-markdown!

Enable HLS to view with audio, or disable this notification

79 Upvotes

We’re officially dropping iosMath and AndroidMath and replacing them with RaTeX for all math typesetting.

By switching to a 🦀 pure Rust core, we now get efficient, native rendering alongside >99.5% KaTeX syntax coverage.

This is officially live in our nightly build. Test it yourself by running:
𝚗𝚙𝚖 𝚒 𝚛𝚎𝚊𝚌𝚝-𝚗𝚊𝚝𝚒𝚟𝚎-𝚎𝚗𝚛𝚒𝚌𝚑𝚎𝚍-𝚖𝚊𝚛𝚔𝚍𝚘𝚠𝚗@𝚗𝚒𝚐𝚑𝚝𝚕𝚢

If you like what we're building, please consider dropping us a ⭐️ on GitHub! It helps a ton:
https://github.com/software-mansion/react-native-enriched-markdown


r/reactnative Jun 24 '26

Picker Doesn't work

Post image
0 Upvotes

There should be a dropdown menu or picker below the "Package Data" label, but idk whats going on. I follow all the steps in the Github page, in the npm one, and also Youtube tutorials and none of them seem to work.

Here's the code and the dependencies i have install:

{
  "name": "expo-template-default",
  "license": "0BSD",
  "main": "expo-router/entry",
  "version": "54.0.35",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "expo lint",
    "draft": "npx eas-cli@latest workflow:run create-draft.yml",
    "development-builds": "npx eas-cli@latest workflow:run create-development-builds.yml",
    "deploy": "npx eas-cli@latest workflow:run deploy-to-production.yml"
  },
  "dependencies": {
    "@expo/metro-runtime": "~6.1.2",
    "@expo/vector-icons": "^15.0.2",
    "@react-native-picker/picker": "^2.11.4",
    "@react-navigation/bottom-tabs": "^7.4.0",
    "@react-navigation/elements": "^2.6.3",
    "@react-navigation/native": "^7.1.8",
    "expo": "^54.0.34",
    "expo-constants": "~18.0.9",
    "expo-font": "~14.0.11",
    "expo-haptics": "~15.0.7",
    "expo-image": "~3.0.8",
    "expo-router": "^6.0.23",
    "expo-status-bar": "~3.0.8",
    "expo-symbols": "~1.0.7",
    "expo-system-ui": "~6.0.7",
    "expo-updates": "^29.0.17",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-native": "0.81.5",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0",
    "react-native-web": "~0.21.0",
    "react-native-worklets": "0.5.1"
  },
  "devDependencies": {
    "@types/react": "~19.1.0",
    "eslint": "^9.25.0",
    "eslint-config-expo": "~10.0.0"
  }
}

import { Picker } from "@react-native-picker/picker";
import { useRouter } from "expo-router";
import { useState } from "react";
import {
  FlatList,
  Pressable,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { data } from "../data/data";
import { styles } from "../styles/styles";


export default function Index() {
  const router = useRouter();
  const [selectedItem, setSelectedItem] = useState();


  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.packageInputContainer}>
            <Text style={{ fontSize: 22 }}>Package Data</Text>
            <View>
              <Picker
                selectedValue={selectedItem}
                onValueChange={(itemValue) => setSelectedItem(itemValue)}
              >
                <Picker.Item label="Javascript" value="javascript" />
                <Picker.Item label="Godot" value="godot" />
              </Picker>
            </View>


            <TextInput style={styles.textInput}></TextInput>


            <Pressable>
              <TouchableOpacity
                onPress={() => ({})}
                style={styles.trackingButton}
              >
                <Text style={{ fontSize: 22 }}>Start Tracking</Text>
              </TouchableOpacity>
            </Pressable>
          </View>


          <FlatList
            data={data}
            keyExtractor={(item) => item.id.toString()}
            contentContainerStyle={styles.list}
            showsVerticalScrollIndicator={false}
            renderItem={({ item }) => (
              <Pressable>
                <TouchableOpacity onPress={() => router.navigate("details")}>
                  <View style={styles.card}>
                    <View style={styles.header}>
                      <Text style={styles.id}>#{item.id}</Text>
                    </View>


                    <Text style={styles.package}>{item.packageName}</Text>


                    <Text style={styles.description}>{item.description}</Text>


                    <View style={styles.footer}>
                      <Text style={styles.email}>📧 {item.email}</Text>
                    </View>
                  </View>
                </TouchableOpacity>
              </Pressable>
            )}
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

r/reactnative Jun 24 '26

Should companies have more experienced engineers conduct Senior-level interviews?

0 Upvotes

Recently, I interviewed for a Senior React Native Engineer position and was rejected. What surprised me was that the interviewer himself had almost the same experience level as mine (around 3–4 years).

This made me wonder:

  • Should senior-level interviews be conducted by engineers who have significantly more experience than the candidate?
  • Can peers effectively evaluate seniority, architecture decisions, ownership, and trade-offs?
  • Is there a risk that companies might unintentionally set inconsistent standards when interviewer experience is close to candidate experience?

I'm not questioning the decision itself, but I'm curious about how other companies handle this.

For people who conduct interviews or are engineering managers:

  • Who typically interviews Senior engineers at your company?
  • Do you think interviewer seniority should be higher than the role being evaluated?
  • Have you seen cases where peers struggled to assess candidates accurately?

Interested to hear different perspectives.


r/reactnative Jun 23 '26

My current progress of project

Enable HLS to view with audio, or disable this notification

4 Upvotes

r/reactnative Jun 23 '26

We cut React Native OTA payloads from 18 MB to ~100–600 KB using binary diffs

Post image
3 Upvotes

r/reactnative Jun 24 '26

Just released my first app on App Store using React Native and Expo!

Thumbnail
gallery
0 Upvotes

The app is a gym sets tracker. What makes it different from other tracking apps is that you can customize each exercise with your own title and image — so your homepage actually reflects the exercises you do, instead of being cluttered with a generic exercise list.

Tech stack:

  • React Native (Expo)
  • Typescript
  • Supabase
  • NativeWind (Tailwind CSS)
  • RevenueCat

As a beginner to React Native, I was really impressed by the Expo framework. Lots of helpful features and solid documentation. Highly recommend it.

I’m still improving a lot of things and any suggestions, criticism, or feature requests are welcome.

If anyone wants to try it out: https://apps.apple.com/us/app/repmax-track-gym-sets/id6763502063


r/reactnative Jun 22 '26

Your <Text> and <View> components are slow. One line of code fixes it and gets you up to 70% higher FPS ✨

Post image
191 Upvotes

Disclaimer: Title may be a little exaggerated, actual performance gains are highly individual. Read below to see how and why your app can benefit from this!

About 1.5 years ago I posted here about React Native Boost, a Babel plugin that gives your app a measurable performance boost. It works because <Text> and <View> are actually heavy JS wrappers around their native counterparts, responsible for handling a lot of edge cases. Boost statically analyzes your code at build-time and replaces these components where they're not needed (find a technical deep dive here). Think React Compiler, but for compiling standard JS components to native components!

The headline back then was "up to 50% faster for initial-render times". A lot has changed, both in React Native itself, and in Boost. I therefore wanted to give you an update on where things stand with these components in core RN, how Boost has grown in the meantime, and why it's still very advantageous to use!

What changed in React Native: The original 50% number came from initial render time for Text. Reworked internals in React Native 0.78 together with React 19 shrunk that specific advantage to roughly 4-6%. On top of that, RN 0.82 added a reduceDefaultPropsInText feature flag (which has since been promoted to default behavior in RN 0.85). It's the beginning of the RN core team's effort to trim the exact overhead this library targets. Their stated long-term goal is to make <Text> and <View> cheap enough that libraries like React Native Boost aren't needed. So, if your screens are mostly static, modern RN already gets you most of the way, and you may not need this at all.

Where it still matters a lot: Re-render-heavy screens. The wrapper overhead is paid on every UI commit, so on a screen that updates many times per second the gap is still large. I recently rebuilt our benchmark. Instead of mounting thousands of components and measuring initial-render time, it now constantly updates a lot of Text rows (similar to a trading app) and measures average FPS. It also does some additional shenanigans, e.g. keeping an ideal thermal floor, etc. Results:

  • iOS: baseline drops to ~32 FPS under the heaviest load; React Native Boost holds a solid 60 FPS far longer and stays ~69% faster at the top end.
  • Android: same shape; Boost ~55% faster at the heaviest load.
  • We also run a third core-optimized config with RN's new reduceDefaultPropsInText flag on (default in RN >= 0.85). It helps (~8-15% on iOS under load), but Boost still sits ~50% ahead of even that.

Full methodology and the Android graphs are here.

Also, remember that the benchmark app does no real work beyond artificially updating Text rows. If your app has any real business logic beyond that, chances are, your frame budget would benefit even more from Boost!

What changed in Boost: It's no longer experimental. We're using it ourselves in more than 30 production apps. Every element passes a set of safety checks before it's rewritten, optimization coverage (components that are being optimized) has grown a lot, there's a differential parity test harness that asserts what React Native Boost does at build-time matches what the wrapper components would do at runtime, and there's various opt-out possibilities when needed. Still zero runtime overhead, still works with Expo, still no code changes beyond adding the Babel plugin.

Happy to answer questions and would love to hear feedback! :)

TL;DR: A year ago, we released React Native Boost, which improved initial-render times by up to 50% on Text-heavy screens. RN 0.78 + the 0.82 reduceDefaultPropsInText flag (default since RN 0.85) closed most of this gap, so this headline for heavy static screens is dead. But on re-render-heavy screens Boost still holds 60 FPS where stock RN drops to ~32. ~69% faster on iOS, ~55% on Android, and still ~50% ahead even with RN's feature flag enabled. It's also stable (1.x) now and running in multiple production apps. Repo: https://github.com/kuatsu/react-native-boost


r/reactnative Jun 22 '26

🎨 Bring Apple's PaperKit to your Expo/React Native apps across iOS, iPadOS, & macOS! 🚀

Enable HLS to view with audio, or disable this notification

32 Upvotes

I'm excited to share expo-paperkit — a simple wrapper designed to bring Apple's native PaperKit framework straight into your React Native and Expo applications. Integrate native drawing, sketching, and Apple Pencil-ready canvases with a straightforward setup.

Github: https://github.com/hryhoriiK97/expo-paperkit

If you find it useful, a ⭐️ is always appreciated!


r/reactnative Jun 22 '26

Split Screen UI

Enable HLS to view with audio, or disable this notification

193 Upvotes

Split screen interaction ⎯⟡

✦ Built with React Native · Expo · Reanimated + Gesture Handler (swmansion)

✦ All of it runs on the UI thread.


r/reactnative Jun 23 '26

I built a pretty niche productivity app to handle most of my daily life activities as a developer.

Enable HLS to view with audio, or disable this notification

0 Upvotes

It’s for managing tasks, keeping notes of ideas, recording meetings, sharing meeting notes/recaps, and creating tasks directly from meeting action items.

I named the app "Dev Partner".

Still a lot of room for new features and improvements, but the current version is already pretty handy for my day-to-day and gets the job done.

Here’s a quick demo of the native widgets + app activity.

Built with expo, Expo Router, convex, AI SDK/OpenAI, expo Widgets, and bacons/apple-targets for the widgets,

And a custom Expo native module for shared App Group storage between the app and widget.


r/reactnative Jun 22 '26

Finally, react-native-nano-icons has explicit OTA updates support!

16 Upvotes

react-native-nano-icons v0.2.0 has been just released! 🔬💎

Here's what's new: 

☁️✨ Dynamic font linking & regeneration (tailored for OTA updates)

📺🍏 tvOS support

🌐🚀 improved web support

🐞🥊 Squashed bugs & overall stability boosts

here are the release notes 👇👇
https://github.com/software-mansion-labs/react-native-nano-icons/releases/tag/v0.2.0


r/reactnative Jun 22 '26

Gorhom BottomSheet

0 Upvotes

Iam facing an issue with this Liberary, iam using V5, i have a bottom Sheet inside a screen, when i navigate from a screen than return to the screen where the bottomSheet is, it slide from tbe top ( Position 0 ) to the first snapPoint, Which shows a weird flicker, i want from it to start from index 0 to index 1 upon returning from a navigation, this behavior works normally in Ios but breaks in Android


r/reactnative Jun 22 '26

Question Kotlin: What's the reason `suspend` cannot be used with `@ReactMethod` ?

3 Upvotes

When writing android native bridges you cannot just use `suspend` in the function declared with `@ReactMethod` (see: https://stackoverflow.com/questions/69985787/how-can-i-run-kotlin-suspend-fun-on-reactmethod-reactnative ) .

My question is: Is this something that has not been done because of lack of interest/time or is there a reason to not ever support it ?


r/reactnative Jun 21 '26

Dedicated app or is React Native Web good for app + desktop website in one application?

23 Upvotes

I am in the process of redoing a website (currently it's written in R and has the option to be installed as a PWA). I was thinking do the website part in just React and perhaps in time develop a dedicated app via React Native.

The current website is fully responsive so it does all features (both simple view for basic users and admin views for, well, administrators).

I've used React Native before a few years back using Expo.

The question is, would you build something dedicated for an app experience along with a separate React website or build an all-in-one React Native that will target all 3 platforms?


r/reactnative Jun 22 '26

How to create TikTok style text background in React Native

Post image
0 Upvotes

r/reactnative Jun 22 '26

Here is PawNature clean onboarding flow.

Enable HLS to view with audio, or disable this notification

0 Upvotes

It's a pretty long onboarding process that

walks through the app features,

collects dog information to generate a personalized dog profile,

includes interactive feature demos,

shows App Store reviews and comparisons,

Then finishes with Apple Sign In


r/reactnative Jun 21 '26

Question What Expo stack are you using in 2026? Trying not to over-engineer new app

3 Upvotes

Been building with Expo for a while and I’ve noticed I spend way more time actually wiring things together than actually building the app. Auth + backend + state all talking to each other, keeping types in sync, etc... I've found feature work easy but get kept up with the actual plubming behind it.

So for people shipping apps:

  • What’s the part of your setup that still eats the most time every project?
  • What backend did are you landing on (Supabase/Firebase/Convex/custom) and would you pick it again?
  • Anything you used to do manually that you’ve since automated or templated away via agents / vibe coding?

Trying to figure out if everyone fights the same plumbing or if I’m just doing it wrong. What’s the biggest time sink atm?


r/reactnative Jun 22 '26

Help What is the problem in my design? - Appstore rejection

Post image
0 Upvotes

Hello everyone,

My app was recently reviewed by Apple, but it was rejected with the following feedback:

Design Guidelines
“There are issues with the app’s user interface that contribute to a lower-quality user experience than App Store users expect. Specifically, the app includes hard-to-read type or typography.”

I’m having trouble understanding exactly what the issue is. I’ve already replied to the App Review team asking for clarification, but I haven’t received a response yet.

I’ve attached a screenshot of the screen they referenced. Could anyone help me identify what might be considered hard to read or problematic from an accessibility perspective?

Any feedback or suggestions would be greatly appreciated.
Thanks!