Flutter app with React Native brownfield POC

This repo contains a proof-of-concept for adding React Native to an existing Flutter app for iOS and Android.

It contains a basic Flutter app with added React Native brownfield integration. It leverages both platforms' abilities to host native platform views, which serve as the briding layer.

Scope

• Basic React Native brownfield setup
• Added some popular React Native libraries:
  • React Navigation
  • Reanimated
  • React Native WebView
• Functioning hot reload for both React Native and Flutter

Running

1. Run yarn install
2. Install Cocoapods: cd ios; pod install
3. Start Metro bundler in the root folder: yarn start
4. Open the root folder in VS Code
5. In VS Code, open main.dart and open Run -> Start Debugging menu option

Screenshots

iOS	Android

References

• Flutter docs: Host a native iOS view
• Flutter docs: Host a native Android view
• React Native docs: Integration with Existing Apps
• React Native docs: Integration with Android Fragment

To Do

• Support for React Native new architecture
• Improve Flutter to React Native navigation to be more seamless
• Add TypeScript support
• Improved type safety and error handling on both Flutter and React Native side