invertase / react-native-firebase

🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
https://rnfirebase.io
Other
11.53k stars 2.19k forks source link

🔥 [Dynamic Links] 🔥 Dynamic Links become malformed/fail when shared using iOS Messages App #3182

Closed harrisrobin closed 4 years ago

harrisrobin commented 4 years ago

Issue

Describe your issue here


When I try to share a dynamic link via Messages app on iOS, the url becomes malformed. This is not an issue when using any other method or copy pasting it manually, only when using Messages app.

I have the following code in my app:

return await dynamicLinks().buildShortLink(
{
        link: `${DEEP_LINK_DOMAIN_PREFIX}/space/${spaceId}`,
        domainUriPrefix: FIREBASE_DYNAMIC_LINK_DOMAIN_PREFIX,
        analytics: {
          campaign: "space-deep-link",
        },
       social: {
          title: title,
          descriptionText: desc,
          imageUrl: featuredImage.url,
        },
        android: {
          packageName: FIREBASE_DYNAMIC_LINK_ANDROID_PACKAGE_NAME,
        },
        ios: {
          bundleId: FIREBASE_DYNAMIC_LINK_IOS_BUNDLE_ID,
          appStoreId: FIREBASE_DYNAMIC_LINK_IOS_APP_STORE_ID,
        },
      }
)

When using Messages app on iOS, the following link is generated for my use-case:

https://upletspace.page.link/s?socialDescription=Charming+625+square+feet+training+studio.+A+1+minute+walk+from+the+Sherbrooke+subway.+The+studio+includes+pilates+equipment,+accessories+and+mats.+Possible+for+private/+duo+teaching+or+mini+group+training+(up+to+20+people+%2B+teacher).+Ideal+for+teaching+pilates,+fitness,+yoga+or+any+type+or+workout+training.+%0ACan+fit+up+to+30+people&socialImageUrl=https://firebasestorage.googleapis.com/v0/b/uplet-14f22.appspot.com/o/manually-uploaded-space-photos%252FAd%2520Vitam%2520Studio%2520(Manu%2520-%2520Montreal)%252FAd_Vitam_Studio_Space_1.jpg?alt%3Dmedia%26token%3D3036c4c5-85e1-42a1-a5b9-c2a98311adc2&socialTitle=Pilates,+Yoga,+Fitness,+Massage+therapy+-+Latin+Quarter+Montreal

This link does not work and is malformed. Even breaks on web.

When using copy/paste or any other method (tested Facebook Messenger, WhatsApp etc), I get the following URL which works as expected:

https://upletspace.page.link/4ZAkhRWt8ufM5BqJ6

Share sheet code:

  await Share.share(
          Platform.select({
            ios: {
              title: options.title,
              // If we only have an url, use the url field otherwise combine with
              // message. This is because some share services don't support sending
              // both url and message.
              url: options.message == null ? link : (undefined as any),
              message: options.message != null ? `${options.message} ${link}` : undefined,
            },
            android: {
              title: options.title,
              message: options.message != null ? `${options.message} ${link}` : link,
            },
          }),
          { subject: options.subject },
        )

Any ideas what could be causing the link to turn out that way when using iOS Messages App?

Project Files

Javascript

Click To Expand

#### `package.json`: ```json { "name": "OMITTED, "version": "1.3.5", "build": 76, "private": true, "scripts": { "start": "node ./node_modules/.bin/react-native start", "test": "jest", "tsc": "tsc -b" }, "dependencies": { "@invertase/react-native-apple-authentication": "^0.1.1", "@react-native-community/async-storage": "^1.7.1", "@react-native-community/masked-view": "^0.1.6", "@react-native-community/netinfo": "^5.3.3", "@react-native-firebase/analytics": "^6.3.1", "@react-native-firebase/app": "^6.3.1", "@react-native-firebase/auth": "^6.3.1", "@react-native-firebase/crashlytics": "^6.3.1", "@react-native-firebase/dynamic-links": "^6.3.1", "@react-native-firebase/firestore": "^6.3.1", "@react-native-firebase/functions": "^6.3.1", "@react-native-firebase/messaging": "^6.3.1", "@react-native-firebase/perf": "^6.3.1", "@react-native-firebase/remote-config": "^6.3.1", "@react-native-firebase/storage": "^6.3.1", "@react-navigation/bottom-tabs": "^5.0.0", "@react-navigation/material-top-tabs": "^5.0.0", "@react-navigation/native": "^5.0.0", "@react-navigation/native-stack": "^5.0.0", "@segment/analytics-react-native": "^1.1.0", "@segment/analytics-react-native-mixpanel": "^1.1.0", "@turf/distance": "^6.0.1", "@turf/helpers": "^6.1.4", "algoliasearch": "^4.0.1", "expo-asset": "^8.0.0", "expo-font": "^8.0.0", "expo-haptics": "^8.0.0", "i18n-js": "^3.5.1", "instabug-reactnative": "^9.0.6", "libphonenumber-js": "^1.7.34", "lottie-ios": "3.1.6", "lottie-react-native": "^3.3.2", "mobx": "^4.15.1", "mobx-react-lite": "^1.5.2", "mobx-state-tree": "^3.15.0", "moment": "^2.24.0", "numeral": "^2.0.6", "rambdax": "^3.5.0", "ramda": "^0.27.0", "react": "16.12.0", "react-dom": "^16.12.0", "react-native": "0.62.0-rc.1", "react-native-animatable": "^1.3.3", "react-native-appearance": "^0.3.2", "react-native-calendars": "^1.261.0", "react-native-country-picker-modal": "^1.10.0", "react-native-device-info": "^5.5.1", "react-native-dotenv": "^0.2.0", "react-native-exception-handler": "^2.10.8", "react-native-fast-image": "^7.0.2", "react-native-fbsdk": "^1.1.2", "react-native-geolocation-service": "^4.0.0", "react-native-gesture-handler": "~1.5.6", "react-native-google-signin": "^2.1.1", "react-native-image-picker": "^2.2.1", "react-native-intercom": "^14.0.0", "react-native-iphone-x-helper": "^1.2.1", "react-native-keychain": "^4.0.5", "react-native-localize": "^1.3.3", "react-native-maps": "^0.26.1", "react-native-permissions": "^2.0.9", "react-native-reanimated": "~1.7.0", "react-native-redash": "^9.6.0", "react-native-responsive-screen": "^1.4.0", "react-native-safe-area-context": "^0.7.2", "react-native-screens": "2.0.0-beta.2", "react-native-smooth-pincode-input": "^1.0.9", "react-native-snap-carousel": "^3.8.4", "react-native-splash-screen": "^3.2.0", "react-native-swipeable-list": "^0.0.9", "react-native-tab-view": "^2.13.0", "react-native-unimodules": "^0.7.0", "react-native-web": "^0.12.0-rc.1", "react-native-webview": "^8.0.3", "reanimated-bottom-sheet": "^1.0.0-alpha.18", "rn-placeholder": "^3.0.0", "shortid": "^2.2.15", "tipsi-stripe": "^7.5.1", "validate.js": "^0.13.1", "version_compare": "^0.0.3" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.7.4", "@babel/plugin-proposal-decorators": "^7.7.4", "@babel/plugin-proposal-optional-catch-binding": "^7.7.4", "@babel/plugin-transform-flow-strip-types": "^7.7.4", "@storybook/react-native": "^5.2.8", "@types/i18n-js": "^3.0.1", "@types/jest": "^24.0.23", "@types/moment": "^2.13.0", "@types/numeral": "^0.0.26", "@types/ramda": "^0.26.38", "@types/react": "^16.9.16", "@types/react-native": "^0.60.24", "@types/react-native-fbsdk": "^1.0.0", "@types/react-native-snap-carousel": "^3.7.4", "@types/turf": "^3.5.32", "auto-changelog": "^1.16.2", "babel-jest": "^25.1.0", "babel-plugin-transform-inline-environment-variables": "^0.4.3", "babel-plugin-transform-remove-console": "^6.9.4", "babel-preset-expo": "^8.0.0", "deep-keys": "^0.5.0", "flipper-plugin-react-native-performance": "^0.4.3", "jest": "25.1.0", "jest-expo": "^36.0.1", "jest-fetch-mock": "^3.0.1", "jetifier": "^1.6.5", "mock-async-storage": "^2.2.0", "npm-run-all": "^4.1.5", "pretty-quick": "^2.0.1", "react-native-infinite-flatlist-patch": "^1.0.4", "react-native-testing-library": "^1.12.0", "react-powerplug": "^1.0.0", "react-test-renderer": "^16.12.0", "reactotron-core-client": "^2.8.8", "reactotron-mst": "^3.1.3", "reactotron-react-js": "^3.3.7", "reactotron-react-native": "^4.0.3", "ts-node": "^8.5.4", "typescript": "^3.7.5" }, "jest": { "preset": "jest-expo", "setupFiles": [ "/test/setup.ts" ], "testPathIgnorePatterns": [ "/node_modules/" ], "transformIgnorePatterns": [ "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo|instabug-reactnative|@react-native-firebase/.*)" ], "collectCoverage": true, "collectCoverageFrom": [ "./**/*.{js,ts}", "!./**/*.action.{js,jsx,ts,tsx}", "!./**/index.{js,jsx,ts,tsx}", "!**/node_modules/**", "!**/vendor/**" ] }, } ``` #### `firebase.json` for react-native-firebase v6: ```json # N/A ``` ### iOS

Click To Expand

#### `ios/Podfile`: - [ ] I'm not using Pods - [x] I'm using Pods and my Podfile looks like: ```ruby platform :ios, "10.0" require_relative "../../../node_modules/react-native-unimodules/cocoapods" require_relative "../../../node_modules/@react-native-community/cli-platform-ios/native_modules" # (CUSTOMRN): Uncomment if using Custom RN this handy script doesn"t exist in offical repo published to npm. # require_relative "../../../node_modules/react-native/scripts/autolink-ios" def flipper_pods() flipperkit_version = "0.30.2" pod "FlipperKit", "~>" + flipperkit_version, :configuration => "Debug" pod "FlipperKit/FlipperKitLayoutPlugin", "~>" + flipperkit_version, :configuration => "Debug" pod "FlipperKit/SKIOSNetworkPlugin", "~>" + flipperkit_version, :configuration => "Debug" pod "FlipperKit/FlipperKitUserDefaultsPlugin", "~>" + flipperkit_version, :configuration => "Debug" pod "FlipperKit/FlipperKitReactPlugin", "~>" + flipperkit_version, :configuration => "Debug" pod "flipper-plugin-react-native-performance", :path => "../../../node_modules/flipper-plugin-react-native-performance/ios", :configuration => "Debug" end # Post Install processing for Flipper def flipper_post_install(installer) installer.pods_project.targets.each do |target| if target.name == "YogaKit" target.build_configurations.each do |config| config.build_settings["SWIFT_VERSION"] = "4.1" end end end file_name = Dir.glob("*.xcodeproj")[0] app_project = Xcodeproj::Project.open(file_name) app_project.native_targets.each do |target| target.build_configurations.each do |config| cflags = config.build_settings["OTHER_CFLAGS"] || "$(inherited) " unless cflags.include? "-DFB_SONARKIT_ENABLED=1" puts "Adding -DFB_SONARKIT_ENABLED=1 in OTHER_CFLAGS..." cflags << "-DFB_SONARKIT_ENABLED=1" end config.build_settings["OTHER_CFLAGS"] = cflags end app_project.save end installer.pods_project.save end def shared_pods # Pods for App pod "FBSDKLoginKit" pod "GoogleSignIn", "~> 5.0.0" pod "Intercom" permissions_path = "../../../node_modules/react-native-permissions/ios" pod "Permission-LocationAlways", :path => "#{permissions_path}/LocationAlways.podspec" pod "Permission-LocationWhenInUse", :path => "#{permissions_path}/LocationWhenInUse.podspec" pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications.podspec" pod "react-native-geolocation", path: "../../../node_modules/@react-native-community/geolocation" # (CUSTOMRN): Uncomment if using Custom RN. this handy script doesn"t exist in offical repo published to npm. # use_react_native!(path: "../node_modules/react-native", fabric_enabled: false) # (CUSTOMRN): Comment below if using CUstom RN as script above achieves all this. pod "FBLazyVector", :path => "../../../node_modules/react-native/Libraries/FBLazyVector" pod "FBReactNativeSpec", :path => "../../../node_modules/react-native/Libraries/FBReactNativeSpec" pod "RCTRequired", :path => "../../../node_modules/react-native/Libraries/RCTRequired" pod "RCTTypeSafety", :path => "../../../node_modules/react-native/Libraries/TypeSafety" pod "React", :path => "../../../node_modules/react-native/" pod "React-Core", :path => "../../../node_modules/react-native/" pod "React-CoreModules", :path => "../../../node_modules/react-native/React/CoreModules" pod "React-Core/DevSupport", :path => "../../../node_modules/react-native/" pod "React-RCTActionSheet", :path => "../../../node_modules/react-native/Libraries/ActionSheetIOS" pod "React-RCTAnimation", :path => "../../../node_modules/react-native/Libraries/NativeAnimation" pod "React-RCTBlob", :path => "../../../node_modules/react-native/Libraries/Blob" pod "React-RCTImage", :path => "../../../node_modules/react-native/Libraries/Image" pod "React-RCTLinking", :path => "../../../node_modules/react-native/Libraries/LinkingIOS" pod "React-RCTNetwork", :path => "../../../node_modules/react-native/Libraries/Network" pod "React-RCTSettings", :path => "../../../node_modules/react-native/Libraries/Settings" pod "React-RCTText", :path => "../../../node_modules/react-native/Libraries/Text" pod "React-RCTVibration", :path => "../../../node_modules/react-native/Libraries/Vibration" pod "React-Core/RCTWebSocket", :path => "../../../node_modules/react-native/" pod "React-cxxreact", :path => "../../../node_modules/react-native/ReactCommon/cxxreact" pod "React-jsi", :path => "../../../node_modules/react-native/ReactCommon/jsi" pod "React-jsiexecutor", :path => "../../../node_modules/react-native/ReactCommon/jsiexecutor" pod "React-jsinspector", :path => "../../../node_modules/react-native/ReactCommon/jsinspector" pod "ReactCommon/callinvoker", :path => "../../../node_modules/react-native/ReactCommon" pod "ReactCommon/turbomodule/core", :path => "../../../node_modules/react-native/ReactCommon" pod "Yoga", :path => "../../../node_modules/react-native/ReactCommon/yoga", :modular_headers => true pod "DoubleConversion", :podspec => "../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" pod "glog", :podspec => "../../../node_modules/react-native/third-party-podspecs/glog.podspec" pod "Folly", :podspec => "../../../node_modules/react-native/third-party-podspecs/Folly.podspec" use_unimodules!(modules_paths: ["../../../node_modules"]) use_native_modules! end target "App" do shared_pods end target "App-Dev" do shared_pods target "AppTests" do inherit! :search_paths end end # For enabling Flipper. # Note that if you use_framework!, flipper will not work. # Disable these lines if you are doing use_framework! flipper_pods() post_install do |installer| flipper_post_install(installer) end ``` #### `AppDelegate.m`: ```objc /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ #import "RNSplashScreen.h" #import "AppDelegate.h" #import #import #import #import #import #import #import // Flipper #if DEBUG #ifdef FB_SONARKIT_ENABLED #import #import #import #import #import #import #import #import #endif #endif @import Firebase; @implementation AppDelegate @synthesize window = _window; - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { #pragma mark - Set up default firebase app if ([FIRApp defaultApp] == nil) { [FIRApp configure]; } [self initializeFlipper:application]; #pragma mark - Set up facebook SDK // Set up Facebook SDK [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions]; self.moduleRegistryAdapter = [[UMModuleRegistryAdapter alloc] initWithModuleRegistryProvider:[[UMModuleRegistryProvider alloc] init]]; RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; #if DEBUG #ifdef FB_SONARKIT_ENABLED [[FlipperReactPerformancePlugin sharedInstance] setBridge:bridge]; #endif #endif RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"Uplet" initialProperties:nil]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; [super application:application didFinishLaunchingWithOptions:launchOptions]; #if !DEBUG [RNSplashScreen show]; #endif return YES; } - (void)application:(__unused UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { [Intercom setDeviceToken:deviceToken]; } - (void) initializeFlipper:(UIApplication *)application { #if DEBUG #ifdef FB_SONARKIT_ENABLED FlipperClient *client = [FlipperClient sharedClient]; SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; [client addPlugin: [FlipperReactPerformancePlugin sharedInstance]]; [client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application withDescriptorMapper: layoutDescriptorMapper]]; [client addPlugin: [[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; [client addPlugin: [FlipperKitReactPlugin new]]; [client addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; [client start]; #endif #endif } - (NSArray> *)extraModulesForBridge:(RCTBridge *)bridge { NSArray> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge]; // You can inject any extra modules that you would like here, more information at: // https://facebook.github.io/react-native/docs/native-modules-ios.html#dependency-injection return extraModules; } - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #ifdef DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"apps/uplet-app/index" fallbackResource:nil]; #else return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; #endif } #pragma mark - Handle incoming universal links - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options: (NSDictionary *)options { BOOL facebook = [[FBSDKApplicationDelegate sharedInstance] application:application openURL:url sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey] annotation:options[UIApplicationOpenURLOptionsAnnotationKey]]; BOOL google = [RNGoogleSignin application:application openURL:url options:options]; return facebook || google; } @end ```

--- ## Environment
Click To Expand

**`react-native info` output:** ``` System: OS: macOS 10.15.4 CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz Memory: 1.65 GB / 32.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: Android NDK: 17.2.4988734 IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild ``` - **Platform that you're experiencing the issue on**: - [x] iOS - [ ] Android - [ ] **iOS** but have not tested behavior on Android - [ ] **Android** but have not tested behavior on iOS - [ ] Both - **`react-native-firebase` version you're using that has this issue:** - `6.3.1` - **`Firebase` module(s) you're using that has the issue:** - `Dynamic Links` - **Are you using `TypeScript`?** - `Y` & `3.7.5`

---
stale[bot] commented 4 years ago

Hello 👋, to help manage issues we automatically close stale issues. This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs. Thank you for your contributions.

stale[bot] commented 4 years ago

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

gabrieldefazio commented 3 years ago

I think this is more of an issue with the iOS native sharing logic than it is with the react-native-firebase link builders or consumers, if I'm not mistaken. The share logic seems to over-eagerly interpret the short link for its own display. I resolved mine by passing a "message" instead of a "url". It works almost the same, but doesn't look as cute. I'll fix that later!

JuanpaG94 commented 3 years ago

This is still an issue on iOS 14.

mikehardy commented 3 years ago

This was last commented in April last year. @JuanpaG94 are you doing anything to show a minimal reproduction and/or pursue this upstream? There will be no progress on it without some effort from someone

JuanpaG94 commented 3 years ago

@mikehardy Currently I'm working on a project where we are facing that issue and the only workaround we've found to avoid it is to use ActivityItemSource from iOS UIKit to detect when we are sharing a dynamic link on iMessage or we are sharing it on any other app. When we detect iMessage, we share the link as text to avoid iMessage to fetch link metadata and break the link.

I would love to make a PR if I had the necessary knowledge to work between react & native code but I don't have this experience and I've never done anything like that. What can I do is to share the scenario where we're still having this issue like the OP said a year ago, but this scenario, what's happening to links, dependencies, and code is near exactly the same that the OP filled in this (closed) issue.

If you prefer, I can fill a new issue specifying the same problem. Thank you for your response despite this is a closed(but not solved) issue

mikehardy commented 3 years ago

Fascinating - so, to state succinctly, on iOS, if you share in Messages app, you must share text only (do you have some example?) or it breaks? This will probably be reproducible in firebase-ios-sdk via quickstart then you may see relief - https://github.com/firebase/quickstart-ios/tree/master/dynamiclinks

JuanpaG94 commented 3 years ago

I'll share some code of my project, where I'm using:

I generate the dynamic link using this:

const url = await dynamicLinks().buildShortLink(
      {
        domainUriPrefix: DOMAIN_URI_PREFIX,
        link: `${LANDING_URL}/${linkType}/${id}`,
        ios: { bundleId: BUNDLE_ID, appStoreId: APPSTORE_ID },
        android: { packageName: 'PACKAGE_NAME' },
        social: {
          title,
          description,
          imageUrl,
        },
      },
      dynamicLinks.ShortLinkType.SHORT,
    );

And of course, we get a dynamic link looking like this: https://MY_DOMAIN.page.link/UJjq

If we share this generated link by using react native sharesheet implementation with this:

Share.share(
          Platform.select({
            ios: {
              url,
            },
            android: {
              title: title,
              message: url,
            },
          }),
          { subject: title },
        )

The link you build and share doing this, works flawlessly on any third party app because the link is what it is, and the metadata fetching to get the thumbnail, title, etc of the link gets processed on each app after sending the link. On any app, the link shows its metadata properly and it works.

BUT, if you share a link through iMessage on iOS, Apple processes the link before you send it and it's attaching the preview card on your message before sending it, you see the link preview fine, but internally is broken, and when you send it, it changes from something like

https://MY_DOMAIN.page.link/UJjq (this is correct)

to something like

https://MY_DOMAIN.page.link/s?socialDescription=descriptionText&socialImageUrl=https://domain.com/some-image.jpg&socialTitle=socialTitle (this is not correct, iMessage broke the link)

So, the link is being shared in a malformed way when you send it through iMessage due to it's spider/scrapper/whatever they use to get the link metadata, resulting in a broken link that doesn't work and it shows a blank page from Firebase if you open it in browser.

And, why are we reporting this into react-native-firebase? because this doesn't happen on iOS native implementation of Firebase in a native Swift project, and it seems this is a problem of how the links are getting generated or post-processed by spiders/scrappers to get its metadata, and it should probably be related to react-native-firebase

Hope this helps, regards :)

JuanpaG94 commented 3 years ago

I think this is more of an issue with the iOS native sharing logic than it is with the react-native-firebase link builders or consumers, if I'm not mistaken. The share logic seems to over-eagerly interpret the short link for its own display. I resolved mine by passing a "message" instead of a "url". It works almost the same, but doesn't look as cute. I'll fix that later!

were you able to fix by yourself that issue you mentioned here? the part where you say "I'll fix that later", thanks

mikehardy commented 3 years ago

Again fascinating! So to be clear: if you were to do this using a firebase-ios-sdk quickstart, it does not reproduce? i.e., you were able to use native iOS code (both firebase and I suppose an iOS share request?) and it works, but only in react-native context (react-native-firebase + react-native-share) it breaks?

And as @JuanpaG94 you were able to work around it? Do you detect in react-native-share somehow that you are sending to iOS Messages app and only send text of link, not the URL?

Osebrian commented 3 years ago

SOLUTION

The solution is to pass the link to the message field in the react native's Share library as opposed to the url field. Basically this:

try {
  await Share.share({ message: link });
} catch (err) {
  throw err;
}

When shared directly to iMessage with the link passed in the url (as opposed to the message) field, apple parses the link but the url path gets replaced with the data in the social field from the dynamic link, which makes the link malformed

Benjamin94116 commented 2 years ago

Instead of passing url to your activityViewController, pass a string

ZarSaeed commented 2 years ago

I'm facing same issue when sharing dynamic link on LinkedIn. using firebase dynamic native sdk for ios and android, we have native apps. Can any one help?

ZarSaeed commented 2 years ago

Instead of passing url to your activityViewController, pass a string

I'm sending a string but still facing the issue on linkedin app.

Benjamin94116 commented 2 years ago

That what I did. I passed the string and that was a fix for iMessage. If you don’t pass the string I believe it will work for linkedIn, but it won’t for iMessage. Sincerely, Kadjo Benjamin Anoh

On Dec 1, 2021, at 5:34 AM, ZarSaeed @.***> wrote:

I'm facing same issue when sharing dynamic link on LinkedIn. using fireabse dynamic native sdk for ios and android, we have native apps. Can any one help?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/invertase/react-native-firebase/issues/3182#issuecomment-983552676, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKOMHZMZFYUG2ZR43735RP3UOYB43ANCNFSM4KRQ4EPQ.

tsheaff commented 1 year ago

I don't think this should be closed. This is still an issue. For me (react-native@0.70.5 and @react-native-firebase/dynamic-links@17.3.0), using react-native's Share module, passing Share.share({ message: dynamicLinkURL }); does NOT work. I still get the garbage out from iMessage share like https://mypage.page.link/s?... which just shows a blank white screen.

tsheaff commented 1 year ago

For me, this was the only thing that fixed it:

Share.share({
  message: `Some other string before the url ${url}`
});

Neither of these worked

Share.share({
  message: url
});
Share.share({
  url: url
});
roger-o3h commented 11 months ago

This is still an issue using short dynamic links on Messages in iOS 16.5.1 (not just in react native). This needs to be reopened.

JuanpaG94 commented 11 months ago

Google is winding down Firebase dynamic links in 2024, so probably this won't be fixed.

Source: https://firebase.google.com/support/dynamic-links-faq