Support React Native 0.80.0

[jbroma]

Description

Currently, RN 0.80 is not supported because of new flow syntax that was introduced in the newest release, which results in the following error:

% npm run start             
npm warn Unknown user config "python". This will stop working in the next major version of npm.

> RepackApp@0.0.1 start
> react-native start


▄▀▀▀ ▀▀▀▀   █▀▀█ █▀▀█ ▄▀▀▀ █  █
█    ▀▀▀▀   █▀▀▀ █▀▀█ █    █▀▀▄
▀    ▀▀▀▀ ▀ ▀    ▀  ▀  ▀▀▀ ▀  ▀
5.1.2, powered by Rspack

 r: Reload app
 d: Open developer menu
 j: Open debugger
 a: Run adb reverse

Press Ctrl+c or Ctrl+z to quit the dev server

ℹ [16:28:27.550Z][DevServer] Server listening at http://[::1]:8081 
ℹ [16:28:27.551Z][DevServer] Server listening at http://127.0.0.1:8081 
ℹ [16:28:27.551Z][DevServer] Starting build for platforms: ios, android 
✖ [16:28:30.430Z][LoggerPlugin] Failed to build bundle due to errors 
✖ [16:28:30.430Z][LoggerPlugin] Error in "./node_modules/@react-native/virtualized-lists/Lists/VirtualizedSectionList.js":
  × Module build failed:
  ├─▶   ×   × Expected a semicolon
  │     │      ╭─[/workspace/src/node_modules/@react-native/virtualized-lists/Lists/VirtualizedSectionList.js:613:1]
  │     │  610 │   );
  │     │  611 │ }
  │     │  612 │
  │     │  613 │ const VirtualizedSectionListComponent = VirtualizedSectionList    component
  │     │      ·                                                                   ─────────
  │     │  614 │
  │     │  615 │
  │     │  616 │
  │     │      ╰────
  │     │
  │   
  ╰─▶ Syntax Error
 
✖ [16:28:30.436Z][LoggerPlugin] Failed to build bundle due to errors 
✖ [16:28:30.436Z][LoggerPlugin] Error in "./node_modules/@react-native/virtualized-lists/Lists/VirtualizedSectionList.js":
  × Module build failed:
  ├─▶   ×   × Expected a semicolon
  │     │      ╭─[/workspace/RepackApp/node_modules/@react-native/virtualized-lists/Lists/VirtualizedSectionList.js:613:1]
  │     │  610 │   );
  │     │  611 │ }
  │     │  612 │
  │     │  613 │ const VirtualizedSectionListComponent = VirtualizedSectionList    component
  │     │      ·                                                                   ─────────
  │     │  614 │
  │     │  615 │
  │     │  616 │
  │     │      ╰────
  │     │
  │   
  ╰─▶ Syntax Error

Currently, this needs patching of @react-native/virtualized-lists and removing the special component<> syntax as shown here: #1179 (reply in thread)

Related issues & discussions:
#1179
#1193

After that is fixed, we should also explore if there are any runtime incompatibilites.

Suggested solution

• - needs fixes in flow-remove-types - handling of component<> syntax
• - declare explicit support in versions.json in @callstack/repack/init

Additional context

No response

[jbroma]

PRs in flow-remove-types opened:
facebook/flow#9297
facebook/flow#9300

After patching flow-remove-types locally and bumping the RN in the repo to 0.80.0 there were no further changes needed, so fixing the flow transformation will mark Re.Pack as compatible with RN 0.80.0

[raghav-reglobe]

@jbroma I have raised a pull requested related to Support React Native 0.80.0.
#1213

[jbroma]

All the PRs with support for RN 80 have already landed and should be released soon 🎉

#1225
#1227
#1232