search

grahammendick / navigation

Scene-Based Navigation for React and React Native
https://grahammendick.github.io/navigation/
Apache License 2.0
575 stars 40 forks source link

Can't make it work on iOS #632

Closed anhtuank7c closed 2 years ago

anhtuank7c commented 2 years ago

I followed this guide to setup a new project, android one work great but iOS on doesn't. I've tried both new architecture and casual architecture.

Issue: 'react/renderer/components/navigation-react-native/ShadowNodes.h' file not found

image

Dependencies:

"dependencies": {
    "navigation": "^6.1.0",
    "navigation-react": "^4.5.1",
    "navigation-react-native": "^8.10.0",
    "react": "18.0.0",
    "react-native": "0.69.4"
  },

System info

info Fetching system and libraries information...
System:
    OS: macOS 12.5.1
    CPU: (8) x64 Apple M1
    Memory: 31.61 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.7.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
    Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/tuannguyen/.rvm/gems/ruby-2.7.5/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0
      System Images: android-30 | Wear OS 3 - Preview ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-33 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8512546
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.4 => 0.69.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
grahammendick commented 2 years ago

Hey there! The codegen doesn't run on the old architecture so you shouldn't get that error. Can you show me what error you get on the old architecture, please. So run cd ios && pod install

anhtuank7c commented 2 years ago

What do you mean by saying The codegen doesn't run on the old architecture so you shouldn't get that error ? I thought navigation-react-native already support Fabric and the guide says that I could enable it. image

I have Mac M1, Xcode and Terminal run natively (not using Rosetta) I have 2 issue when just execute cd ios && pod install

'react/renderer/components/navigation-react-native/ShadowNodes.h' file not found
'react/renderer/components/navigation-react-native/Props.h' file not found

Screen Shot 2022-08-23 at 20 04 58

One similar issue I have found with React Native 0.69.4 I decided to downgrade to React Native 0.69.3, it works.

Pod install logs:

Resolving dependencies...
Auto-linking React Native module for target `demoNRN`: navigation-react-native
[Codegen] Generating ./build/generated/ios/React-Codegen.podspec.json
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
[Codegen] Found FBReactNativeSpec
Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`
Fetching podspec for `boost` from `../node_modules/react-native/third-party-podspecs/boost.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.69.4)
Installing FBReactNativeSpec (0.69.4)
Installing Flipper (0.125.0)
Installing Flipper-Boost-iOSX (1.76.0.1.11)
Installing Flipper-DoubleConversion (3.2.0.1)
Installing Flipper-Fmt (7.1.7)
Installing Flipper-Folly (2.6.10)
Installing Flipper-Glog (0.5.0.5)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.4.3)
Installing FlipperKit (0.125.0)
Installing OpenSSL-Universal (1.1.1100)
Installing RCT-Folly (2021.06.28.00-v2)
Installing RCTRequired (0.69.4)
Installing RCTTypeSafety (0.69.4)
Installing React (0.69.4)
Installing React-Codegen (0.69.4)
Installing React-Core (0.69.4)
Installing React-CoreModules (0.69.4)
Installing React-RCTActionSheet (0.69.4)
Installing React-RCTAnimation (0.69.4)
Installing React-RCTBlob (0.69.4)
Installing React-RCTImage (0.69.4)
Installing React-RCTLinking (0.69.4)
Installing React-RCTNetwork (0.69.4)
Installing React-RCTSettings (0.69.4)
Installing React-RCTText (0.69.4)
Installing React-RCTVibration (0.69.4)
Installing React-bridging (0.69.4)
Installing React-callinvoker (0.69.4)
Installing React-cxxreact (0.69.4)
Installing React-jsi (0.69.4)
Installing React-jsiexecutor (0.69.4)
Installing React-jsinspector (0.69.4)
Installing React-logger (0.69.4)
Installing React-perflogger (0.69.4)
Installing React-runtimeexecutor (0.69.4)
Installing ReactCommon (0.69.4)
Installing SocketRocket (0.6.0)
Installing Yoga (1.14.0)
Installing YogaKit (1.18.1)
Installing boost (1.76.0)
Installing fmt (6.2.1)
Installing glog (0.3.5)
Installing libevent (2.1.12)
Installing navigation-react-native (8.10.0)
Generating Pods project
/Users/tuannguyen/projects/demoNRN/ios/Pods/Target Support Files/Pods-demoNRN/Pods-demoNRN.release.xcconfig
/Users/tuannguyen/projects/demoNRN/ios/Pods/Target Support Files/Pods-demoNRN/Pods-demoNRN.debug.xcconfig
/Users/tuannguyen/projects/demoNRN/ios/Pods/Target Support Files/Pods-demoNRN-demoNRNTests/Pods-demoNRN-demoNRNTests.release.xcconfig
/Users/tuannguyen/projects/demoNRN/ios/Pods/Target Support Files/Pods-demoNRN-demoNRNTests/Pods-demoNRN-demoNRNTests.debug.xcconfig
Setting REACT_NATIVE build settings
Integrating client project
Pod installation complete! There are 57 dependencies from the Podfile and 48 total pods installed.
grahammendick commented 2 years ago

The Navigation router does work on Fabric. But I thought you said that you tried it on iOS on the old architecture and got that error?

grahammendick commented 2 years ago

If you're running the old arch you should run cd ios && pod install If you're running the new arch you should run cd ios && RCT_NEW_ARCH_ENABLED=1 pod install

If you don't pass RCT_NEW_ARCH_ENABLED=1 then React Native won't run the codegen

anhtuank7c commented 2 years ago

I've tried old arch (cd ios && pod install) and new arch. (cd ios && RCT_NEW_ARCH_ENABLED=1 pod install)

I confirm that old arch on React Native 0.69.3 does work with navigation-react-native but new arch doesn't.

And navigation-react-navitve doesn't work on React Native 0.69.4

anhtuank7c commented 2 years ago

Your's example also relies on RN 0.69.3

grahammendick commented 2 years ago

I just updated the twitter sample to React Native 0.69.4 and it works great on iOS (and Android), #633

grahammendick commented 2 years ago

@anhtuank7c The twitter sample is on the latest React Native so are you happy to close this?

anhtuank7c commented 2 years ago

@grahammendick Super weird.

I tried to pull the latest twitter sample, install pod again pod install, it throw exactly 2 issues image

image

If I go with RCT_NEW_ARCH_ENABLED=1 pod install it just throw 'react/renderer/components/navigation-react-native/ShadowNodes.h' file not found

Could you please run npx react-native info to compare with mine?

info Fetching system and libraries information...
System:
    OS: macOS 12.5.1
    CPU: (8) x64 Apple M1
    Memory: 47.19 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.7.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
    Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/tuannguyen/.rvm/gems/ruby-2.7.5/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0
      System Images: android-30 | Wear OS 3 - Preview ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-33 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8512546
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.4 => 0.69.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

I have ruby 2.7.5p203

grahammendick commented 2 years ago

I tried to pull the latest twitter sample, install pod again pod install, it throw exactly 2 issues

From your first screenshot, it looks like it worked. The pod install completes successfully. After running, pod install you should run npx react-native start and npx react-native run-ios.

The Twitter example is an old architecture example. So you shouldn't run RCT_NEW_ARCH_ENABLED=1 pod install because this runs the codegen and the old architecture doesn't know what to do with it.

anhtuank7c commented 2 years ago

Sure, I go with the old architecture, pod install. both npx react-native run-ios and run ios project from Xcode failed.

grahammendick commented 2 years ago

But you've already run RCT_NEW_ARCH_ENABLED=1 pod install on it so that's broken it. Please can you try again from a clean start? So download the example into a brand new folder and then run

cd ios && pod install
npx react-natve start
npx react-native run-ios
anhtuank7c commented 2 years ago

@grahammendick Hum, slow it down a bit. I said that I tried old architecture but it doesn't work (1), then I continue with the new architecture (2), but it failed too. I will try to clone the project again and then follow exactly what you've posted above.

anhtuank7c commented 2 years ago

It works now. Thank you so much.