[iOS] App doesn't start as extension

[Baskerville42]

Description

Hello! I make a password manager app and I need to use Password Autofill Extension on iOS.

Extension works well with their native view, but when I tried to run RN app inside extension controller, it stops works. I've discovered that a problem appears when my component's tree contains any <Animated.*** /> components from react-native-reanimated package. To prove it - I did a simple realization of my extension inside package's Example app. The code with my implementation you can find here.

The next GIFs show how it should work:

Thanks for any help!

Steps to reproduce

1. Clone my repo from here https://github.com/Baskerville42/react-native-reanimated;
2. Run iOS app;
3. On device/simulator, in settings, in Passwords section, set checkbox to use passwords from ReanimatedExample app;
4. Open Safari, visit any website with login form and try to check password from the app;
5. You can see a blank screen of extension, and your logs contain the next error.

Setup app

Reproduce bug

Metro logs from Example apps

ERROR  [Reanimated] Couldn't determine the version of the native part of Reanimated. Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must use the exact version which is bundled into Expo SDK.
 ERROR  TypeError: Cannot read property 'installCoreFunctions' of undefined, js engine: hermes
 LOG  Running "ReanimatedExample" with {"rootTag":1,"initialProps":{"isAutofillExtensionContext":1,"serviceIdentifiers":["https://github.com/login"]}}
 ERROR  Invariant Violation: "ReanimatedExample" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

Metro logs from my app

ERROR TypeError: undefined is not an object (evaluating 'this. InnerNativeModule.installCoreFunctions')
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Snack or a link to a repository

https://github.com/Baskerville42/react-native-reanimated

Reanimated version

2.7.0

React Native version

0.68.1

Platforms

iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14 Simulator

Acknowledgements

Yes

[tomekzaw]

Hey @Baskerville42, thanks for reporting this issue. The error "[Reanimated] Couldn't determine the version of the native part of Reanimated." occurs when you use a newer version of Reanimated (like 2.14.4) but the native code still runs some older version (like 2.7.0) or Reanimated wasn't initialized on the native side at all (e.g. in brownfield apps). Can you please make sure that you use the same version on JS and native side? In particular, you should run pod install and re-build the app using Xcode.

[Baskerville42]

Hey @Baskerville42, thanks for reporting this issue. The error "[Reanimated] Couldn't determine the version of the native part of Reanimated." occurs when you use a newer version of Reanimated (like 2.14.4) but the native code still runs some older version (like 2.7.0). Can you please make sure that you use the same version on JS and native side? In particular, you should run pod install and re-build the app using Xcode.

Hello tomekzaw Thank you for your attention to my question! Yes, I've produce this issue on my own project and with Example app. I didn't change any version, and the logs in metro are different for my own app and for Example app (I'm using v2.7.0 of Reanimated on my project).

[Baskerville42]

Right now I found this comment. I thinking it's the same issue. Isn't?

[tomekzaw]

I'm not familiar with Password Autofill Extension on iOS but it sounds like it needs to be initialized in a different way (e.g. brownfield) than regular iOS apps and I'm afraid we don't support that out-of-the-box. This is how we initialize Reanimated in regular iOS apps: https://github.com/software-mansion/react-native-reanimated/blob/e5d2361bd914a4ed2d1b30a21a58e9df904ae6bb/ios/native/UIResponder%2BReanimated.mm#L20-L29

[Baskerville42]

Currently, I found a workaround for me - I've different root components (with Reanimated for main app and without for extension) which I'm calling over Lazy API. Do you think it will be enough to call mentioned method in extension?

[tomekzaw]

Yeah it may work as long as they are two separate instances of React Native with separate bridge, UIManager etc.

[Baskerville42]

Thanks a lot! Will try it and keep the comment here if it will help.