React-native-navigation: V7

[guyca]

V7

We're working on a new version which supports both Turbo Modules and Reanimated 2. Everyone is welcome to try it using 7.0.0-alpha.1 or next tag on NPM.

Highlights

• Support Reanimated 2
• Turbo Modules support
• New layout system on iOS. Layout insets are now handled via constraints and safeAreaLayoutGuide instead of margins and edgesForExtendedLayout as per Apple's recommendations. This change should be transparent to you and won't affect your apps.
• Android development is now done on Hermes. While JSC is still supported, we will no longer support it officially and encourage you to migrate your projects to Hermes.
• Deprecate registerComponentWithRedux. Use registerComponent with providers instead.

Upgrading from v6

iOS

Add extraModulesForBridge in AppDelegate.m:

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
    return [ReactNativeNavigation extraModulesForBridge:bridge];
}

Android

No Change needed 🥳

Breaking changes

• Starting from this version, bothmodalDismissed and modalAttemptedToDismiss events can no longer be handled in components. Handling them is only supported via the Navigation.events().
• dismissModal promise is resolved with the id of the root layout. For example, if a modal which contains a stack and a few children was dismissed, the Navigation.dismissModal promise will be resolved with the stack's id.
• Change Navigation commands promise resolve type from any to string

iOS

• The default value of sideMenu.openGestureMode is now bezel. Up until now entireScreen was the default value which made it difficult for users to interact with scrollable components, Carousel for instance, as the SideMenu intercepted the scroll events. The bezel option solves this issue as the SideMenu will respond only to touch events from the edge of the screen.
• Resolve all Navigation commands with id of root layout instead of actual layout.
• Resolve push command promise with id of pushed layout instead of current layout

Android

• fab.id is mandatory. We plan to rework some of the native components on Android, mainly Fab and BottomTabs. This change is mostly a cosmetic change needed for future work on Fab.

[jinshin1013]

Such an exciting improvement! Can't wait to try out Reanimated 2 😎

[jinshin1013]

I've set up a project with RNN and Reanimated 2 in this repo. And the setup was a breeze! Great work @guyca @yogevbd 🙌

[mattmcdonald-uk]

I'm having an issue installing the associated pod for this version with a mismatch on Folly versions.

[!] CocoaPods could not find compatible versions for pod "Folly":
 In Podfile:
  Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)

React-CoreModules (from `../node_modules/react-native/React/CoreModules`) was resolved to 0.63.2, which depends on
  Folly (= 2020.01.13.00)

ReactNativeNavigation (from `../node_modules/react-native-navigation`) was resolved to 7.0.0-turboModules.1, which depends on
  Folly (= 2018.10.22.00)

[jinshin1013]

Hi @mattmcdonald-uk I've found that usually resolved by deleting Podfile.lock file and re-run pod install.

[mattmcdonald-uk]

Hi @mattmcdonald-uk I've found that usually resolved by deleting Podfile.lock file and re-run pod install.

No luck.

I'd guess it's this which is causing the problem (I'm using RN 0.63)
https://github.com/wix/react-native-navigation/blame/3e9ce5fb5cb79f661c16d308b394e45529258748/ReactNativeNavigation.podspec#L7

[alexandruenache19]

The Navigation.events().registerAppLaunchedListener(()=>{}) doens't get triggered. Any solutions?

[guyca]

@mattmcdonald-uk Seems like you're comparing turbomodules branch with master while v7 is developed in v7 branch. I don't see this line in v7 🤔

[mattmcdonald-uk]

@mattmcdonald-uk Seems like you're comparing turbomodules branch with master while v7 is developed in v7 branch. I don't see this line in v7 🤔

@guyca Neither did I - but the 7.0.0-turboModules.1 release I installed via npm definitely includes the line so I assumed it was cut from that branch instead.

[kanzitelli]

@guyca I had the same issue with 7.0.0-turboModules.1 however everything worked well with 7.0.0-alpha.1.
Then I have changed folly_version in node_modules/react-native-navigation/ReactNativeNavigation.podspec to 2020.01.13.00 as react-native asks. Well it passed the step with pods installation, it was successful. But once I tried to run it from Xcode, it showed me an error that says No matching constructor for initialization of 'facebook::react::ObjCTurboModule'. And indeed, there was a mismatch of arguments number in function that relates to turbo modules from ReactNative. I think the problem is that RNN currently works with RN-0.62 but I am using RN-0.63 as @mattmcdonald-uk said previously and maybe under the hood, they have changed something related to turbo modules functions' signature.

[yusufyildirim]

Amazing work! I'm going to test it.

[danilobuerger]

I hope JSC support won't break anytime soon, as lots of people can't switch to Hermes yet:

Proxy support (for MobX, Immer, etc.) is still in RC (https://github.com/facebook/hermes/issues/33)
Intl support is still being developed (https://github.com/facebook/hermes/issues/23)

[vuongductuanktmt]

please help me! I used module react-native-adapter and upgrade react-native-navigation to v7.0 but i don't understand

react-native-adapter:
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge { NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge]; // If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here! return extraModules; }

react-native-navigation:
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge { return [ReactNativeNavigation extraModulesForBridge:bridge]; }

How to merge it, Thank you.

[danilobuerger]

Well just merge the two arrays... https://developer.apple.com/documentation/foundation/nsarray/1412087-arraybyaddingobjectsfromarray?language=objc

[yogevbd]

@vuongductuanktmt

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
    return [[_moduleRegistryAdapter extraModulesForBridge:bridge] arrayByAddingObjectsFromArray:[ReactNativeNavigation extraModulesForBridge:bridge]]
}

[vuongductuanktmt]

@yogevbd @danilobuerger thank you! ❤️❤️❤️