How to Use Flutter in Your React Native App

You already have a solid React Native app – it works well, your team knows it inside out, and you’ve shipped multiple versions successfully. Then comes Flutter, with its silky-smooth animations and pixel-perfect UI consistency across devices. Tempting, right? You start wondering: Do you need to rebuild everything in Flutter? Not at all – you can simply embed Flutter within your existing React Native app as a feature module. This lets you explore Flutter’s performance and UI capabilities without any long-term commitment. If it works for you, great; if not, you can easily roll it back – no risk, no rework. At PIT Solutions, we’ve successfully integrated a Flutter-based chat module into a React Native app.

Why Mix Flutter With React Native?

React Native gets the job done. But Flutter shines in a few areas:

So instead of committing to a full rewrite, you can drop Flutter in where it matters most—like a fancy new dashboard or an experimental feature.

Flutter as a Module

Think of Flutter like a plug-in. Your React Native codebase continues to run the show, but you bring in Flutter to power certain screens — in other words, add Flutter to existing React Native app. If you like it, keep it. If you don’t, delete the module, and your React Native app goes on like nothing happened.

How to Add Flutter to Your iOS React Native App

Flutter’s official Add-to-App guide shows the basics. Here’s a simplified, React Native–friendly breakdown for iOS.

iOS Setup Steps

1. Create a Flutter Module First, in your project directory (or anywhere, really):

This creates a flutter_feature/ folder, which is basically a self-contained Flutter app you’ll hook into iOS.

2. Hook It Into iOS (CocoaPods)

Open your React Native iOS project and edit your Podfile:

Then run:

3. Show a Flutter Screen

Now you can push a Flutter view controller anywhere in your React Native app’s navigation. For example, inside your AppDelegate or a native module:

Call Flutter from React Native (Bridge Example)

To make this accessible from JavaScript, you’ll need a small Native Module. Objective-C bridge header (for React Native):

Objective-C implementation:

React Native JS code:

Boom. Your React Native app can now launch a Flutter screen with a single JS function call.

Adding Flutter to Your Android React Native App

Android setup follows a similar pattern but uses Gradle instead of CocoaPods.

1. Include the Flutter Module

In your React Native Android project’s settings.gradle:

2. Launch Flutter Activity

In your React Native Android code, you can start a Flutter screen using:

3. Call It from React Native (Java Bridge)

Now in JavaScript, you can use the same function:

And just like that, your Android React Native app launches Flutter screens too.

Is There Any Downside?

Yes—but nothing deal-breaking. Adding Flutter to an existing app brings a small memory and binary size overhead. When the Flutter engine initializes, it adds roughly 20–25 MB of RAM usage for prewarming and the runtime. This helps Flutter screens load faster later. However, this RAM usage isn’t significant for most modern devices. Phones today come with larger memory capacities, so the extra 20–25 MB won’t make a noticeable impact. Also, if you’re embedding Flutter in both iOS and Android, expect your app’s binary size to grow by 10–15 MB because of Flutter engine dependencies. If you’re adding only one or two Flutter modules, this is generally fine. But if your app is already near the App Store or Play Store size limits, it’s something to be aware of. You can find more details on this in Flutter’s official performance guide.

The Safety Net

The best part? This setup is reversible. Don’t like how the Flutter screen turned out? Delete the module, remove the Podfile or Gradle lines, and move on. Your React Native app remains untouched.

Wrapping Up

Adding Flutter to a React Native app isn’t about replacing one with the other. It’s about giving yourself options. You can keep React Native as your foundation, while sneaking in Flutter where performance or UI consistency matters most. So, if you’ve ever thought, “This feature would be so much better in Flutter,” don’t rebuild everything. Just add a module—on iOS or Android. Explore our Flutter Integration Services at PIT Solutions