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

• [x] Basic React Native brownfield setup
• [x] Added some popular React Native libraries:
  • [x] React Navigation
  • [x] Reanimated
  • [x] React Native WebView
• [x] 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