Base64 Image sharing stopped working on iOS 11 for Facebook.

Hi I am using react-native-share to share screenshot of my app to Facebook.

var share_options = {
          message: "SOME_MESSAGE",
          social: "facebook"
        }
Share.shareSingle(Object.assign(share_options, {
            url: uri
          })).then(()=>console.log('sharing successful'))
          .catch((err)=>console.log(err));

Where uri is a local file saved by taking a screenshot of the app and looks something like this

file:///data/data/com.example.game/cache/ReactNative-snapshot-image981754109.jpeg

Now I am getting the sharing successful log and the app gets redirect to browser with this url in the address.

http://www.facebook.com/dialog/return/close?#_=_

And the screen remains blank white with nothing happening in the browser.

If I am trying to achieve the same using base64 image with this code.

            Share.shareSingle(Object.assign(share_options, {
              url: 'data:image/jpeg;base64,'+imageBase64
            }));

where imageBase64 is the base64 encoded string for the same image(uri). Then again it gets redirected to the browser with following address in browser address bar and again the browser remains white blank with nothing happening.

https://www.facebook.com/sharer/sharer.php?u=data%3Aimage%2Fjpeg%3Bbase64%imageBase64

Where the imageBase64 is the same base64 string we passed in share options. I have started facing this issue recently with iOS 11. With previous iOS version it is working fine with opening of ShareSheet. But with iOS 11 it is not opening the ShareSheet and instead it is redirecting to safari and finally failing there.

[MrHazimAli]

@rverbytskyi , thank you for replying 👍 no worries if you reply late…

I just added after saw your message… but now when I click on ios device, it doesnt open anything now… before this it open a browser…

<key>LSApplicationQueriesSchemes</key>
  <array>
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
    <string>whatsapp</string>
    <string>mailto</string>
  </array> 

and here is my sharing code

let shareOptions = {
      title: "Share my progress",
      message: "Share my progress",
      url: 'data:image/png;base64,somethingbase64jaskldjkalsdjkalsjdkas'
    };

		Share.shareSingle(Object.assign(shareOptions, {
      "social": "facebook"
    }));

[rverbytskyi]

It happens due to SLServiceTypeFacebook which is deprecated in iOS 11.0 and as you could already guess shareSingle() uses SLServiceTypeFacebook.

You may use an installed app. For this purpose, you have to modify GenericShare.m. You may use the approach I used in my fork https://github.com/rverbytskyi/react-native-share/blob/master/ios/GenericShare.m There I check if Facebook or Twitter app is installed (corresponding to the request) instead of just checking [SLComposeViewController isAvailableForServiceType:serviceType] 'cause normally this check returns false. After in JS code you may catch and check error message if it includes “Not installed” or rewrite GenericShare.m to return a specific string and after show an alert.

I do not pretend that my solution is the best solution, but at least it works for me on iOS 11.2.1.