wix-incubator / react-native-wix-engine-playground Goto Github PK

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `SettingsScreen`.

This error is located at:
    in RCTView (at SettingsScreen.js:18)
    in SettingsScreen (at ComponentWrapper.js:37)
    in WrappedComponent (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

Steps to replicate:

1. clone repo
2. cd app-example
3. yarn && yarn ios
   errors

Also tried doing yarn inside both module folders then re-run, same error.

https://medium.com/wix-engineering/react-native-at-wix-the-architecture-ii-deep-dive-9cfcb3c2822c

To release your application to the store, you can create a simple script using Engine CLI to inject the bundle into the pre-built binary and send it to App Store and Google Play.

Did anyone manage to figure out how to publish the main "app-example" app?

@bruchim Thanks for the great article and sample repos, can you please also share the script to publish this to the app stores.

Hello @bruchim,

I am trying to understand the package structure between modules and the engine. It was my understanding that modules should not install any native deps, but rather get those deps from the engine itself. Can you explain why module-blog has native deps installed? How are js deps handled in each module?

That seems to be one thing that is not explained in detail in the deep dive for module repos. (https://medium.com/wix-engineering/react-native-at-wix-the-architecture-ii-deep-dive-9cfcb3c2822c)

Thanks in advance! This architecture is super interesting. Hoping to implement a similar solution.

AJ

Hi everyone, I am trying to migrate this engine demo to RN 0.66.4 and "react-native-navigation": "7.24.3" but getting an error in theyarn build-ios step

You can download my WIP 0.66.4 migration repo here to replicate build error, steps are in the README

=== BUILD TARGET ReactNativeEngine66 OF PROJECT ReactNativeEngine66 WITH CONFIGURATION Debug ===
/Users/yw/dev/ReactNativeEngine66/internal/ReactNativeEngine66Internal/ios/ReactNativeEngine66/AppDelegate.m:34:26: warning: 
      'bootstrapWithDelegate:launchOptions:' is deprecated: Use bootstrapWithBridge: instead [-Wdeprecated-declarations]
  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];
                         ^
In file included from /Users/yw/dev/ReactNativeEngine66/internal/ReactNativeEngine66Internal/ios/ReactNativeEngine66/AppDelegate.m:5:
/Users/yw/dev/ReactNativeEngine66/internal/ReactNativeEngine66Internal/ios/Pods/Headers/Public/ReactNativeNavigation/ReactNativeNavigation.h:14:20: note: 
      'bootstrapWithDelegate:launchOptions:' has been explicitly marked deprecated here
    __attribute__((deprecated("Use bootstrapWithBridge: instead")));
                   ^
1 warning generated.
=== BUILD TARGET ReactNativeEngine66 OF PROJECT ReactNativeEngine66 WITH CONFIGURATION Debug ===
ld: warning: directory not found for option '-L-L/Users/yw/dev/ReactNativeEngine66/internal/ReactNativeEngine66Internal/ios/DerivedData/ReactNativeEngine66/Build/Products/Debug-iphonesimulator/CocoaAsyncSocket'
ld: library not found for -lCocoaAsyncSocket
clang: error: linker command failed with exit code 1 (use -v to see invocation)
** BUILD FAILED **

My project was generated using the npx react-native init and CocoaAsyncSocket exist, how can I point react-native-router to it?

Hey @bruchim,

One point I am stuck on within the build process is how module resolution occurs from a module repo. I do not see any hard coded paths to the local source files. Is there some magic with watchman or the metro bundler that is resolving require('wix-engine-playground-module-blog').default in engine_autogenerated/modules.js?

From what I can tell you are manually spinning up the react-native packager and pointing it to the local folder for module-blog. That would cover watching and rebuilding the module source files correct?

From there I am just confused as to how the engine is resolving the modules.js require.

Any info you could provide on this would be much appreciated.

Thanks!

Two questions, and this gets more towards organizational behavior but,

• How do you handle a breaking change to a module that is installed in the engine? Is this a coordinated rollout with feature teams?
• Who manages the UI regression testing? Engine team or feature team? When the engine team makes a change, how do they know if it will break any of the consuming modules?