RueBlur needed a custom Facebook-style reaction tray for their React Native app, but there was one massive constraint.
The client could not share their full, private codebase. It was already live, complex, and contained proprietary logic they needed to protect.
Instead of demanding repo access and running the risk of breaking existing dependencies, we took a different route. We built the entire feature as isolated, plug-and-play React Native components that their internal team could integrate safely in minutes.
Here is exactly how we delivered premium Rive animations and a 1-to-5 rating layer without ever seeing the core app architecture.
Key takeaways
- RueBlur's product is built on a Rate + React™ system, so the reactions aren't decoration — they are the core sentiment mechanic. The component had to feel premium.
- We built it with zero access to their codebase — as an isolated, plug-and-play React Native package the team could drop in.
- Seven custom emojis in Rive (tiny files, 60fps), plus a 1-to-5 rating layer driven by React Native Reanimated.
- The real outcome was trust: respecting their boundaries turned one component into an ongoing relationship.
The Context: Expanding a Live Product
RueBlur is a creator-first social platform built around a Rate + React™ system — reactions that capture real sentiment instead of a single hollow like. They had already built a functioning, engaging React Native app and weren't looking for an agency to rebuild their foundation.
That detail mattered for our scope: because reactions are the product's core mechanic, the tray couldn't feel like a generic add-on. It had to be expressive enough to carry the brand.
They discovered Eightinity online after seeing the quality of our product UI and our approach to native mobile animations. They didn't need full-stack development; they needed a highly specific, custom interaction component that their current team didn't have the specialized animation bandwidth to build.
When founders hire an external team for a specific feature, trust is the highest barrier. Handing over the keys to a live, revenue-generating codebase is a risk most aren't willing to take — and rightly so. It's the same governance concern we cover in how to de-risk hiring a boutique agency.
The Challenge: Building Inside Boundaries
Building a reaction tray sounds simple on the surface. But doing it well, inside strict boundaries, changes the engineering approach entirely.
The reaction tray couldn't rely on the host app's state management libraries (like Redux or Zustand) because we didn't know what they were using. It couldn't introduce heavy, conflicting dependencies.
The component had to feel custom, not generic. The animations needed to hit a consistent 60fps inside React Native without dropping frames on older Android devices.
Beyond just selecting an emoji, the tray required a secondary interaction layer: users needed to select a reaction and immediately assign it a rating from 1 to 5. Managing this two-step gesture fluidly inside a modular component was the technical crux of the project.
Designing Custom Rive Emoji Reactions
We started with the visual foundation. Using standard iOS or Android emojis wasn't going to cut it for a brand that prides itself on unique community expression.
We designed seven custom emoji reactions from scratch. Instead of using heavy Lottie files or static PNGs, we built them using Rive. Rive gave us incredibly small file sizes, interactive state machines, and buttery smooth playback on both iOS and Android.
These emojis were crafted specifically to match RueBlur’s energetic product personality.
Building the Plug-and-Play Component
To ensure the client could drop this into their app seamlessly, we built the feature as an isolated NPM-style package.
We exposed a clean, strictly typed API. The client simply imported the ReactionTray component, passed in an onSelect callback, and the component handled the rest. All animation logic, gesture tracking, and state management lived entirely inside our encapsulated boundary.
| Standard Agency Approach | Our Plug-and-Play Approach |
|---|---|
| Requires full Git repository access | Requires zero codebase access |
| Directly mutates global app state | Communicates via isolated callback props |
| High risk of dependency conflicts | Strictly controlled dependency footprint |
| Weeks of onboarding and environment setup | Shipped as an independent testing sandbox |
Adding the 1-to-5 Rating Layer
The interaction didn't stop at selecting a smiley face. Once an emoji was dragged or tapped, a fluid micro-interaction revealed a 1-to-5 rating slider.
We used React Native Reanimated to handle the gesture math. Bridging the Rive animation state with the Reanimated shared values allowed us to scale and highlight the emoji dynamically as the user's thumb slid across the rating scale.
It felt like a native iOS interaction, completely masking the fact that it was built in React Native.
Delivery Without Codebase Access
This workflow is the blueprint for how we work with international clients who prioritize security and velocity.
We didn't spend a week signing NDAs just to look at their routing structure. We built the reaction tray inside a blank, isolated React Native sandbox environment.
When it was ready, we delivered the source code for the component alongside a working Expo Go sandbox. The client’s engineers could scan a QR code, test the animations on their physical devices, verify the callbacks, and then simply drag the folder into their actual project.
By making the component completely self-contained, we reduced back-and-forth communication to near zero.
The honest trade-off: isolation meant we couldn't deep-integrate with their existing gesture or state systems. We didn't know their navigation, their store, or their animation stack — so we standardized on a clean callback API instead of reaching into their internals. That is a deliberate constraint, not a free win: the host team owns wiring the callbacks into their data layer. For this engagement, that boundary was exactly the point.
The Result: Trust Outweighs Features
The first delivery aligned perfectly with RueBlur’s expectations. The component dropped into their app without throwing dependency errors, and the custom Rive animations felt premium.
But the best outcome wasn't just the successful delivery of an emoji tray. The real result was establishing deep, verifiable trust.
Because we proved we could deliver high-end engineering independently and respectfully, RueBlur continued to work with Eightinity. That initial plug-and-play component evolved into an active, ongoing client relationship, leading to further work on complex UI/UX cards and custom React Native animations.
What This Means for Your React Native App
If you are a founder running a live social, dating, wellness, or consumer app, your engineering team is likely focused on core business logic and backend scaling.
When you need a highly polished feature—like custom reactions, a fluid onboarding animation, or complex micro-interactions—you don't have to hire a full-time motion engineer or hand your entire repository over to a foreign agency.
If your app already has a working codebase and you only need that extra layer of UI/UX polish, Eightinity can work strictly within the boundaries you set. We design, build, and deliver isolated, production-ready React Native components that your team can integrate safely and quickly.
What Founders Can Take From This
- You can buy a feature without selling access. A well-scoped, isolated component delivers premium polish without exposing your proprietary codebase — the trust concern that stops most outsourced work before it starts.
- Choose the right animation tool for the platform. Rive over Lottie or PNGs kept files tiny and playback smooth at 60fps on both iOS and Android — a reminder that React Native quality often comes down to native-aware choices, as we discuss in our native vs hybrid breakdown.
- Define the boundary before the build. The callback-only API wasn't a limitation we hit late — it was scoped up front. Naming the integration surface early is exactly what our scoping questions are designed to surface.
FAQ
Can an agency build a React Native feature without access to my codebase?
Yes. We build the feature as an isolated, plug-and-play component in a blank sandbox, expose a clean callback API, and deliver the source plus a runnable demo. Your team drops it in — no repository access, no shared secrets, no dependency conflicts with your live app.
Why use Rive instead of Lottie for custom emoji animations?
Rive gives much smaller file sizes, interactive state machines, and smooth 60fps playback on both iOS and Android. For custom, brand-specific reactions that respond to gestures, Rive's state machines beat pre-baked Lottie JSON or static PNGs on both performance and flexibility.
How do you deliver a component the client can test safely?
We ship it with a working Expo Go sandbox. The client's engineers scan a QR code, run the animations on their own devices, verify the callbacks, then drag the folder into their project. It removes onboarding friction and proves the component works before any integration.
Is React Native good enough for premium, native-feeling interactions?
For interaction-heavy UI, yes — when built with the right tools. Pairing Rive with React Native Reanimated let us bridge animation state to gesture math so the 1-to-5 rating felt like a tuned native interaction, masking that it was React Native at all.
Need Custom React Native Components?
Let’s build a polished, plug-and-play feature that your internal team can integrate with confidence—without exposing your proprietary codebase.