Setup instructions wrong or incomplete

[mchisolm0]

Problem

Trying to get the environment setup to be able to help with issues and contribute. After I clone the repo, copy .env.example to .env, and npm i, I cannot get the react-native run-ios to work. I get the following output:

zsh: command not found: react-native

Admittedly, all my React Native experience has been using Expo, but I am struggling to find the setup instructions for a bare-workflow of React Native since they have switched to suggesting Expo as the primary method of building React Native apps.

TL;DR

It may be an error on my part, but I cannot get the repo working with the instructions in README.md or any docs I have found. Any suggestions would be appreciated 😁

What I have tried

• react-native run-ios
  Resulting output: zsh: command not found: react-native
• Use npx react-native run-ios
  Resulting output:
  (in a new terminal window)

env: node: No such file or directory
Process terminated. Press <enter> to close the window

• npx react-native start
  Resulting output:

Welcome to React Native v0.77
Starting dev server on http://localhost:8081


                        ▒▒▓▓▓▓▒▒
                     ▒▓▓▓▒▒░░▒▒▓▓▓▒
                  ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒
                 ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓
                 ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓
                 ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓
                 ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓
                  ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒
                     ▒▓▓▓▒░░░░▒▓▓▓▒
                        ▒▒▓▓▓▓▒▒


                Welcome to Metro v0.81.3
              Fast - Scalable - Integrated


 INFO  Dev server ready. Press Ctrl+C to exit.
 INFO  Key commands available:

   r  - reload app(s)
   d  - open Dev Menu
   j  - open DevTools

But I could not figure out how to connect it to the device

• Make sure pods were installed correctly with cd ios and pod install
  Resulting output:

[!] Invalid `Podfile` file: uninitialized constant Pod::Podfile::FlipperConfiguration.

 #  from ~/code/raindropio-mobile/ios/Podfile:16
 #  -------------------------------------------
 #  # ```
 >  flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
 #  linkage = ENV['USE_FRAMEWORKS']
 #  -------------------------------------------

• Comment out the flipper_config line since it is not used anywhere else in the file and npm i again and pod install again
  Resulting output:

Longer output...

Auto-linking React Native modules for target `rn3`: RNAppleAuthentication, RNCAsyncStorage, RNGestureHandler, RNGoogleSignin, RNIap, RNInAppBrowser, RNLocalize, RNReanimated, RNScreens, RNShare, ReactNativeKeyboardManager, react-native-config, react-native-date-picker, react-native-document-picker, react-native-image-picker, react-native-progress-view, react-native-safe-area-context, and react-native-webview
get_default_flags is deprecated. Please remove the keys from the `use_react_native!` function
if you are using the default already and pass the value you need in case you don't want the default
Framework build type is static library
[Codegen] warn: using experimental new codegen integration
[Codegen] Adding script_phases to ReactCodegen.
[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
[Codegen] Analyzing /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/package.json
[Codegen] Searching for codegen-enabled libraries in the app.
[Codegen] The "codegenConfig" field is not defined in package.json. Assuming there is nothing to generate at the app level.
[Codegen] Searching for codegen-enabled libraries in the project dependencies.
[Codegen] Found @react-native-async-storage/async-storage
[Codegen] Found @react-native-community/progress-view
[Codegen] Found @react-native-google-signin/google-signin
[Codegen] Found react-native
[Codegen] Found react-native-date-picker
[Codegen] Found @react-native-documents/picker
[Codegen] Found react-native-gesture-handler
[Codegen] Found react-native-image-picker
[Codegen] Found react-native-localize
[Codegen] Found react-native-reanimated
[Codegen] Found react-native-safe-area-context
[Codegen] Found react-native-screens
[Codegen] Found react-native-share
[Codegen] Found react-native-webview
[Codegen] Searching for codegen-enabled libraries in react-native.config.js
[Codegen] Processing rnasyncstorage
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, macos, tvos, visionos for rnasyncstorage
[Codegen] Processing progressview
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, macos for progressview
[Codegen] Processing RNGoogleSignInCGen
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios for RNGoogleSignInCGen
[Codegen] Processing FBReactNativeSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Processing rncore
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Processing RNDatePickerSpecs
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios for RNDatePickerSpecs
[Codegen] Processing rndocumentpickerCGen
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios for rndocumentpickerCGen
[Codegen] Processing rngesturehandler_codegen
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, macos, tvos, visionos for rngesturehandler_codegen
[Codegen] Processing RNImagePickerSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios for RNImagePickerSpec
[Codegen] Processing RNLocalizeSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, macos, tvos, visionos for RNLocalizeSpec
[Codegen] Processing rnreanimated
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, macos, tvos, visionos for rnreanimated
[Codegen] Processing safeareacontext
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, macos, tvos, visionos for safeareacontext
[Codegen] Processing rnscreens
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, tvos, visionos for rnscreens
[Codegen] Processing RNShareSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios for RNShareSpec
[Codegen] Processing RNCWebViewSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios, macos, visionos for RNCWebViewSpec
[Codegen] Generating Native Code for rnasyncstorage - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for progressview - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for RNGoogleSignInCGen - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] [Codegen - FBReactNativeSpec] Skipping iOS code generation for FBReactNativeSpec as it has been generated already.
[Codegen] [Codegen - rncore] Skipping iOS code generation for rncore as it has been generated already.
[Codegen] Generating Native Code for RNDatePickerSpecs - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for rndocumentpickerCGen - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for rngesturehandler_codegen - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for RNImagePickerSpec - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for RNLocalizeSpec - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for rnreanimated - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for safeareacontext - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for rnscreens - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for RNShareSpec - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating Native Code for RNCWebViewSpec - ios
[Codegen] Generated artifacts: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios
[Codegen] Generating RCTThirdPartyComponentsProvider.h
[Codegen] Generated artifact: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios/RCTThirdPartyComponentsProvider.h
[Codegen] Generating RCTThirdPartyComponentsProvider.mm
[Codegen] Crawling @react-native-community/progress-view library for components
[Codegen] Match found RNCProgressView -> RNCProgressViewComponentView
[Codegen] [DEPRECATED] @react-native-community/progress-view should add the 'ios.componentProvider' property in their codegenConfig
[Codegen] Crawling @react-native-google-signin/google-signin library for components
[Codegen] Match found RNGoogleSigninButton -> RNGoogleSignInButton
[Codegen] [DEPRECATED] @react-native-google-signin/google-signin should add the 'ios.componentProvider' property in their codegenConfig
[Codegen] Crawling react-native-date-picker library for components
[Codegen] Match found RNDatePicker -> RNDatePicker
[Codegen] [DEPRECATED] react-native-date-picker should add the 'ios.componentProvider' property in their codegenConfig
[Codegen] Crawling react-native-webview library for components
[Codegen] Match found RNCWebView -> RNCWebView
[Codegen] [DEPRECATED] react-native-webview should add the 'ios.componentProvider' property in their codegenConfig
[Codegen] Generated artifact: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios/RCTThirdPartyComponentsProvider.mm
[Codegen] Generating RCTAppDependencyProvider
[Codegen] Generated artifact: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios/RCTAppDependencyProvider.h
[Codegen] Generated artifact: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios/RCTAppDependencyProvider.mm
[Codegen] Generated podspec: /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/build/generated/ios/ReactAppDependencyProvider.podspec
[Codegen] Done.

[!] Invalid `Podfile` file: No such file or directory @ rb_file_s_rename - (../node_modules/react-native-document-picker, ../node_modules/react-native-document-picker_).

 #  from /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/code/raindropio-mobile/ios/Podfile:48
 #  -------------------------------------------
 #      exclude.each { |lib|
 >          FileUtils.mv("../node_modules/#{lib}", "../node_modules/#{lib}_")
 #      }
 #  -------------------------------------------

• Install react-native globally with npm i -g react-native and then retry react-native run-ios (same result as npx attempt)
• Follow the docs on setting up the environment on React Native's docs page with no new results

Questions

• Can you share the steps you currently take to get it running?
• Once we get this figured out, would you mind if I document and update the Install instructions of the README.md file?

Thank you in advance. I am excited to help with issues and contributing. Thank you for the awesome app!

[mchisolm0]

It looks like the "Longer output..." section was a problem with react-native-document-picker not being installed even after npm i. Running npm install react-native-document-picker and then re-running pod install got past that section. Now I am running into a problem with a post install script:

undefined method '__apply_Xcode_12_5_M1_post_install_workaround' for an instance of Pod::Podfile

Commenting out the call to that method on line 76 allowed pod install to finish successfully.
Relevant section

# Custom configuration
post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
    # __apply_Xcode_12_5_M1_post_install_workaround(installer)        <------This line

    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            # Fix App extension warnings
            config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO'

            # Same deployment target
            config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.4'
        end
    end
end