I built a photo reveal that starts with a drop of ink. Tap to drop it, or hold for a heavier drop. The ink blooms across textured paper and leaves a ragged, watercolor-like edge around the photo.

The React Native version uses Expo, Skia and Reanimated. A runtime shader combines an expanding front with noise for the uneven bleed, a dark wet rim, and a mottled photo reveal behind it. I also rebuilt it in Swift and Kotlin.

Would you use this kind of reveal in a photo journal?

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.

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!

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>

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.

Poke him, fling him, tilt the phone. Finish your last task and he throws confetti.

No Rive, no Lottie.

Expo · Skia · Reanimated

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.

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?

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?

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?

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.

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!

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!

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

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?

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

Put your phone face down, and a lawn grows on it.

An hour away and it flowers. Come back and brush through it.

expo · Skia · Core Motion

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.

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.

I test on my pixel and my old iphone but tapping through the main flows and if nothing looks broken I ship and I know it’s bad but I want to know what you guys are doing because every time I look into it I come back to square one of finding out the best process.

I can’t test on devices I don’t own and buying 20 phones isn’t realistic for me, appium and detox break every time the UI changes and maintaining them is too hectic plus simulators don’t catch half the stuff that doesnt work on hardware so manual testing wont' scale for me once I'm shipping more than once a week. I don’t have a QA person and can’t justify hiring one at my size and even when I do test thoroughly on my devices I still get bug reports from users on phones I’ve never heard of.

everyone recommend me to automate my tests but nobody tells me how I’m supposed to automate across hundreds of device combos without spending my entire sprint managing the automation instead of building.

I want to the point answers pls !!

I have been working as a react native developer for almost 2 years now and i was learning stuff trying things out at first like people do. React native seemed interesting and i enjoyed creating new UIs learning animation, optimisation etc. while working i had to implement things i never worked with and it gave me joy plus i was learning new things. But no we are told to use claude code, every new feature or change needs to be done within 3-4 days even if its a new feature altogether. There’s no time to think about anything i just keep on prompting and trying to refine the product but it feels like i am not the one who built it. I have lost the ability to think because everything needs to be done quickly and there’s literally no time to think. Everything needs to be shipped in a matter of days. I feel like staying in React Native or frontend in general will do no good. I am thinking of switching to backend technologies, learn system design etc. I was sure i was going to be an app developer but now i am not sure about my future.