Flutter and React are trending mobile app development frameworks accessing one Android SDK to develop apps. As an open-source framework, Flutter offers a single codebase to manage productive and complete versatile app development. All credit goes to Google for its launch to support rapid development.

React native is emerging as the rival of Flutter to develop the cross-platform application. Thus, the single codebase can support the accessibility for multiple platforms. It includes Android, iOS, MacOS, tvOS, web, Windows, VR development, etc. It does not compromise in any scenarios with productivity, quality, and functionality. Rapid load time makes it an efficient option for development.

Build an Android App With a Blend of Flutter and React Native

Flutter and React Native are the best mobile app development frameworks in their zone. They can unleash the wonderful functionalities and bring the best product. The battle is on between the two.

Building your entire application in a flutter is impossible in the real world. You can only partially rely on this to make the app experience seamless and efficient. It will feel like a burden to you and take a long time to get in-market ready.

Their combination will generate the spark even being the top competitor's frameworks. But for this, the developer news a basic understanding of both. So they can understand the flow.

There are two ways to blend the two as a single Android application. Either you can install React Native’s plugins to Flutter or launch the Flutter module to react native package.

Here in this blog, we are proceeding with the second method:

To get started, you should have Node, Flutter, android Studio, Xbox, and Cocoapods.

Unleash the Android App Potential with Flutter and React Native

Run this command to initiate your React Native host project.

$ npx react-native init ReactNativeApp --version 0.66.0-rc.4

Run this command to create your Flutter module:

$ flutter create -t module --org com.example flutter_module_rn

Access the Flutter module directory/ library and initiate the React Native Package.

.gitignore and README.md will get overwritten by the following command:

$ npx create-react-native-module flutter_module_rn --package-name flutter-module-rn

As we are integrating the two different concepts, here requires a modification.

We don't need any mess, so modify android to android-rn. Secondly, add a js file to declare the new path references. It’s react-native. config. js

module.exports = {
  dependency: {
    platforms: {
      ios: {
        project: './ios-rn/FlutterModuleRn.xcworkspace',
      },
      android: {
        sourceDir: './android-rn/',
      },
    },
  },
};

In addition, there is a file android-rn/build.gradle and package.json, which need some updates. Subsequently, if you are creating something for iOS, we need to value the iOS dependencies standards. Thus, we will modify the file name flutter_module_rn.podspec as FlutterModuleRn.podspec.

module.exports = {
  dependency: {
    platforms: {
      ios: {
        project: './ios-rn/FlutterModuleRn.xcworkspace',
      },
      android: {
        sourceDir: './android-rn/',
      },
    },
  },
};

Access ReactNative App’s host package.json and initiate the following one:

"flutter-module-rn": "file:../flutter_module_rn"

Hold on to the installation for a while!

Here, the initial setup ends. Now we can roll on the main Android App build and integration process. It will include the following action:

• Flutter Library Construction

• AAR artifacts

• Repository configuration

• Initialize flutter module dependencies

• Profile built type

• RN package reference separated from package.json

• Flutter Screen

Flutter Library Construction

The process starts with creating a generic local Maven repository or library. AARs and POMs artifacts will also be there. It is the smooth path of production for the host App. Additionally, it eliminates the need for flutter SDK installation. Ultimately, it saves time and effort for a mobile app development company.

• There is a directory named flutter_module_rn. We will run the following command to launch AAR artifacts and initiate the construction of the local maven repository.

$ flutter build aar

• While you access the console, it will show some instructions for the integration. Do some modifications to access flutter_module_rn/android-rn/build.gradle and configure the repositories before moving forward.

repositories {
    maven {
        url "$rootDir/../build/host/outputs/repo"
    }
    maven {
        url "https://storage.googleapis.com/download.flutter.io"
    }
}

• Move on to Dependencies

dependencies {
    debugImplementation 'com.example.flutter_module_rn:flutter_debug:1.0'
    profileImplementation 'com.example.flutter_module_rn:flutter_profile:1.0' 
    releaseImplementation 'com.example.flutter_module_rn:flutter_release:1.0'
    //noinspection GradleDynamicVersion
    implementation 'com.facebook.react:react-native:+'  // From node_modules
}

• The Next Thing to do is Profile Build Type

android {
  buildTypes {
    profile {
      initWith debug
    }
  }
}

• Next, You Need to Get the Repositories In ReactNativeApp/android/build.gradle

repositories {
    maven {
        url "$rootDir/../node_modules/flutter-module-rn/build/host/outputs/repo"
    }
    maven {
        url "https://storage.googleapis.com/download.flutter.io"
    }
}

Actually, during this Android build process, some unusual event occurs in react native npm module. Due to this host app keep the duplicate repositories.

It’s time to add the Flutter Screen and integrate the Flutter activity into the Android app project. We will work with this flutter_module_rn/android-rn/src/main/AndroidManifest.xml

• Access Android Studio and Navigate to the Android-rn Directory

<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.reactlibrary">
    <application>
        <activity
            android:name="io.flutter.embedding.android.FlutterActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize"
            />
    </application>
</manifest>

• This step is all about merging two package manifests: host and Android. Access flutter_module_rn/android-rn/src/main/java/com/reactlibrary/FlutterModuleRnModule.java and modify startFlutterActivity with the sample method function.

@ReactMethod 

public void startFlutterActivity(String stringArgument, int numberArgument, Callback callback) {
    Activity currentActivity = reactContext.getCurrentActivity();
    // we can pass arguments to the Intent
    currentActivity.startActivity(
            FlutterActivity.createDefaultIntent(currentActivity)
    );
    callback.invoke("Received numberArgument: " + numberArgument + " stringArgument: " + stringArgument);
}

It will begin the Flutter activity for your Android. Do the needful changes to the host app:

import FlutterModuleRn from 'flutter-module-rn';
const startFlutterScreen = () => {
  // call native function
  FlutterModuleRn.startFlutterActivity('', 0, (text: string) => {
    console.log(text);
  });
};

<Button title={'Start Flutter Screen'} onPress={startFlutterScreen} />

Here, we will access the ReactNativeApp and execute the yarn & yarn android. Follow all steps for the successful appearance of the flutter screen.

You can check the comments for every error and resolve them to develop mobile applications smoothly.

Here we are wrapping up the blog.

Further, you can select the better choice Flutter Vs React Native vs Kotlin for the next mobile app development next projects.

Final Words:

React Native and Flutter are prominent choices for app development. As both serve specific functionalities and also complement each other at some point. Here, in this blog, we have showcased the blend of the two. We hope it is understandable and easier to deploy your next Android project using these mobile app development frameworks.