Optimizing Performance and Building a Rich Text Editor for a Chat Platform

Cutting Android startup times

When we first began working with Filament, their Android app took from 6 to even 10 seconds to launch cold – a delay long enough to discourage new users before they even sent their first message. So, we set out to analyze and optimize the startup flow. 

Our performance analysis pointed to three major issues: oversized JavaScript bundles, use of libraries that weren’t optimized for native platforms, and slow secure token storage caused by the chosen encryption algorithm. To address these, we:

• Replaced the encryption algorithm used in secure storage, which had been a hidden bottleneck, but only on certain devices. This allowed us to cut cold-start time on Android from 6-10 s down to ~2 s.
• Reduced the JavaScript bundle size to shorten parsing and evaluation during startup.
• Replaced the app’s syntax-highlighting library, which wasn’t optimized for mobile, with a custom React Native wrapper that ensures only a single engine is initialized instead of several competing ones. This further decreased app startup time on test devices from ~2 seconds to just 800–900 milliseconds.

Not only did these activities improve app performance on Android, they also removed a major barrier to adoption, making the Filament app feel instantly responsive and ready to use.

Bringing truly native rich text editing to the React Native community

Messaging apps live or die on their input fields, and Filament’s users needed more than plain text – mentions, styled text, inline formatting, and structured output were all must-haves. The client’s first approach, using an existing tool to provide rich WYSIWYG style text editing, quickly proved limiting. It was slow to mount, introduced inefficient scrolling and keyboard interactions, and made even basic styling difficult, since all CSS and fonts had to be pushed into the WebView.

Together with Filament, we decided to start fresh and build something fully native the client and the entire open source community would benefit from.

This is how react-native-enriched was born. At its heart is EnrichedTextInput, a fully native text input component that brings:

• High performance thanks to direct interaction with platform components (no unnecessary state or prop overhead)
• Synchronous text styling, so formatting updates feel instant
• Live style detection and HTML parsing, making rich content easy to handle
• Customizable styling, fitting any design system
• Support for mobile apps using the New Architecture

EnrichedTextInput is uncontrolled, meaning it doesn’t use state or props to store its value. Instead, it communicates directly with underlying platform-specific components, keeping typing buttery smooth while offering advanced features.

By sponsoring this effort, Filament not only refined their product but also contributed greatly to the React Native ecosystem. We hope the library will soon stand as a building block for any React Native team needing structured, styled text input.

Working on the web platform

Filament wanted to bring to life a browser version of the app and focus on truly multiplatform support. By reusing much of the existing mobile platform logic, we were able to deliver the same core experience on the web.

Along the way, we needed to switch the bundler from Webpack to Metro, which unified builds across mobile and web and unlocked smoother cross-platform development. 

We also addressed library compatibility issues, ensuring that dependencies worked reliably in both mobile and browser environments. Finally, we focused on certain platform-specific features that needed tailored implementations: for example, photo uploads rely on native pickers on mobile, but on the web we had to implement a drag-and-drop interface, preserving the same user experience in a way that made sense for each platform.

Thanks to these improvements, Filament achieved a single codebase spanning iOS, Android, iPad, and web, giving users the freedom to stay connected wherever they prefer to chat.

Streamlining onboarding with App Clips

As already mentioned, Filament is an invite-only platform, so joining the app starts with an invitation link. Originally, new users had to manually copy their invite code from an email or web page into the app after downloading, which created a negative first impression.

To simplify this process, we introduced App Clips on iOS and Google Play Referrer parameters on Android. Thanks to these, even first-time users who click an invite link can install or open the app directly from the link, have their invite code automatically pre-filled (eliminating the need for copy-paste) and smoothly move from the invitation to an active conversation.