rn-flutter

Embeds an instance of Flutter as a prebuilt npm package that can be loaded into an existing React Native Web app.

Below you can find instructions on how to use this package in your React Native app.

Getting started

$ npm install flutter-module-rn --save
or
$ yarn add flutter-module-rn

Installation

Android

Add following repositories in your android/build.gradle file:

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

Configure package in the MainApplication class:

import com.reactlibrary.FlutterEngineHelper;

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterEngineHelper.initEngineGroup(this);
        // React Native code ...
    }
}

iOS

Add following to your Podfile:

require_relative '../node_modules/flutter-module-rn/ios/pods'
...

target 'ReactNativeApp' do
    ...
    use_flutter_module_rn!()
    ...
end

Run cd ios && pod install

Configure package in the AppDelegate class:

// AppDelegate.h

#import <FlutterEngineProvider.h>

@interface AppDelegate : RCTAppDelegate<FlutterEngineProvider>
@end

// AppDelegate.mm

@implementation AppDelegate

  @synthesize engines;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // React Native code ...

  self.engines = [[FlutterEngineGroup alloc] initWithName:@"io.flutter" project:nil];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
// ...

Web

Flutter web artifacts must be copied into host app's build output.
In webpack, CopyWebpackPlugin can be used for this:

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
  new CopyWebpackPlugin({
    patterns: [
      { 
        from: 'node_modules/flutter-module-rn/build/web', 
        to: 'flutter',
      }]
  })
]

Note that artifacts should be excluded from additional compression or minification in order to avoid issues with the source maps generated by Flutter.

If you wish to render Flutter in a div element instead of iframe, you need to inject flutter.js script into html page.
In webpack, AddAssetHtmlPlugin can be used for this:

const CopyWebpackPlugin = require('copy-webpack-plugin')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { 
          from: 'node_modules/flutter-module-rn/build/web', 
          to: 'flutter' 
        }
      ]
    }),
		new AddAssetHtmlPlugin({
      filepath: path.resolve(
        appDirectory, // 
        'node_modules/flutter-module-rn/build/web/flutter.js',
      ),
      outputPath: 'flutter',
      publicPath: 'flutter',
    }),
  ]
}

Usage

import { FlutterView } from 'flutter-module-rn';

<FlutterView />

Development

We use Flutter for development.

To build artifacts you can run yarn android:build, yarn ios:build or yarn web:build