Skip to content

Conversation

@palexs
Copy link

@palexs palexs commented Jul 15, 2024

When I attempted to run the react-native example app I faced multiple issues. Most of them stem from the fact that the repo hasn't been updated for a while and unfortunately the codebase looks like it's not actively maintained anymore. In this PR I tried to fix the build and runtime errors I stumbled upon.

Please, keep in mind that these fixes are just a stopgap and the example app should be properly updated to support the newer version of react-native framework and the corresponding build tools (Xcode, Cocoapods, Node, etc).

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 78.98 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
    Watchman: 2024.07.01.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.15.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2024.1 AI-241.15989.150.2411.11948838
    Xcode: 15.4/15F31d - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.11 - /usr/bin/javac
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable these next few lines.
add_flipper_pods!
Copy link
Author

@palexs palexs Jul 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flipper causes a lot of issues, so I decided to de-integrate it to get the example app running.

"version": "0.0.1",
"private": true,
"engines": {
"node": "16.x"
Copy link
Author

@palexs palexs Jul 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes this error spat out by Metro bundler:

Screenshot 2024-07-15 at 15 46 23

"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"metro-react-native-babel-preset": "^0.59.0",
Copy link
Author

@palexs palexs Jul 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes the runtime error:

Screenshot 2024-07-15 at 18 50 55

generationCount);
node->setLayoutHadOverflow(
- node->getLayout().hadOverflow() |
+ node->getLayout().hadOverflow() ||
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes this build error:

Screenshot 2024-07-15 at 14 54 19

"permitted. You must either @synthesize the bridge property, "
"or provide your own setter method.",
- RCTBridgeModuleNameForClass(strongModule));
+ RCTBridgeModuleNameForClass(Class(strongModule)));
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes this build error:

Screenshot 2024-07-15 at 15 11 55

}

-- (NSArray<RCTModuleData *> *)_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules
+- (NSArray<RCTModuleData *> *)_initializeModules:(NSArray<Class> *)modules
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes the build error:

Screenshot 2024-07-15 at 18 35 35

platform :ios, '11.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

def add_flipper_pods!(versions = {})
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the Flipper integration code could be substituted by the usage of the use_flipper script, but this requires upgrading react-native (https://fbflipper.com/docs/getting-started/react-native-ios/#react-native-063).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant