react-native-share: Share instagram story is not work properly
Steps to reproduce
I tried to run the next code:
import Share from 'react-native-share';
const shareToInstagramStoryUnsafe = async () => {
const shareOptions = {
backgroundImage:
'https://hatrabbits.com/wp-content/uploads/2016/12/rare-combinaties.jpg',
method: Share.InstagramStories.SHARE_BACKGROUND_IMAGE,
social: Share.Social.INSTAGRAM_STORIES,
};
console.log(' --- xdebug shareOptions', shareOptions);
const ShareResponse = await Share.shareSingle(shareOptions);
console.log(' --- xdebug ShareResponse', ShareResponse);
};
shareToInstagramStoryUnsafe();
As a result I see next:
D/ViewRootImpl@1618a00[MainActivity]: ViewPostIme pointer 0
D/ViewRootImpl@1618a00[MainActivity]: ViewPostIme pointer 1
I/ReactNativeJS: ' --- xdebug shareOptions', { backgroundImage: 'https://hatrabbits.com/wp-content/uploads/2016/12/rare-combinaties.jpg',
method: 'shareBackgroundImage',
social: 'instagramstories' }
I/System.out: SHARE SINGLE METHOD
I/System.out: com.instagram.android
I/System.out: INSTALLED
I/ReactNativeJS: ' --- xdebug ShareResponse', { message: true, app: 'com.instagram.android' }
D/SensorManager: unregisterListener ::
D/ViewRootImpl@1618a00[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 0 1
D/InputMethodManager: prepareNavigationBarInfo() DecorView@88a9ff6[MainActivity]
getNavigationBarColor() -855310
D/ViewRootImpl@1618a00[MainActivity]: stopped(false) old=false
D/SensorManager: registerListener :: 1, LSM6DSO Acceleration Sensor, 66667, 0,
D/ViewRootImpl@1618a00[MainActivity]: Relayout returned: old=(0,0,1080,2400) new=(0,0,1080,2400) req=(1080,2400)0 dur=14 res=0x1 s={true 522197549056} ch=false
D/ViewRootImpl@1618a00[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1
D/InputMethodManager: prepareNavigationBarInfo() DecorView@88a9ff6[MainActivity]
getNavigationBarColor() -855310
Expected behavior
Instagram story sharing should work properly
Actual behavior
After invoking .shareSingle(...) will be opened a new activity and very quickly closed and a result { message: true, app: 'com.instagram.android' } Instagram didn’t open
Also, I tried to use example/App.js and the same problem:
- activity opened and closed immediately
- result:
{ message: true, app: 'com.instagram.android' }
Environment
- React Native version: 0.61.x
- React Native platform + platform version: Android 10.
react-native-share
Version: 3.5.0
Link to repo (highly encouraged)
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 22
- Comments: 51
Also facing the same issue on android and working fine on IOS.
Maybe it helps to understand the problem(
I use a workaround with a local file and it works on Android without asking Storage permissions.
@lcsvcn
To work for me on Andoird I did the next:
android/app/src/main/AndroidManifest.xml.shareSingle(...)with aforceDialogflag and images as base64!nothing is working, no instagram story , no facebook story
@mikehardy @MateusAndrade
During the sharing process (on Adnroid 10) you will see next exceptions:
There is a full logcal output:
Click to expand a logcal output
Same issue…
AndroidManifest.xml
` <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.android.test">
</manifest> `filepaths.xml
<?xml version="1.0" encoding="utf-8"?> <paths xmlns:android="http://schemas.android.com/apk/res/android"> <external-path name="myexternalimages" path="Download/" /> </paths>Logcat
2020-07-09 15:11:55.979 17376-17463/com.android.test I/System.out: SHARE SINGLE METHOD 2020-07-09 15:11:55.982 17376-17463/com.android.test I/System.out: com.instagram.android 2020-07-09 15:11:55.994 17376-17463/com.android.test I/System.out: INSTALLED 2020-07-09 15:11:56.007 17376-17463/com.android.test W/System.err: java.io.FileNotFoundException: /storage/emulated/0/Download/background.jpg (Permission denied) 2020-07-09 15:11:56.008 17376-17442/com.android.test D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 14 11 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at java.io.FileOutputStream.open0(Native Method) 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at java.io.FileOutputStream.open(FileOutputStream.java:308) 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at java.io.FileOutputStream.<init>(FileOutputStream.java:238) 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at java.io.FileOutputStream.<init>(FileOutputStream.java:180) 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at cl.json.ShareFile.getURI(ShareFile.java:117) 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at cl.json.social.ShareIntent.open(ShareIntent.java:146) 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at cl.json.social.SingleShareIntent.open(SingleShareIntent.java:40) 2020-07-09 15:11:56.010 17376-17463/com.android.test W/System.err: at cl.json.social.InstagramStoriesShare.open(InstagramStoriesShare.java:27)
WRITE_EXTERNAL_STORAGE permission won’t even be granted in modern android if I understand correctly https://developer.android.com/preview/privacy/storage#permissions
So that solution should be discarded immediately for new solutions
It’s my understanding from native android that granting URI access is the right way to do it basically at all times, along with a FileProvider configured in android resource XML paths, some example:
Great! So it is easy to reproduce with code the maintainers have access to, since you didn’t include a link to the repo
It’s pretty easy to hack System.err.println(“ReactNativeJS”, “whatever you want to log here”) lines into the Java implementation directly in node_modules and trace it through. What did you see as arguments and return values in logcat when you did that and attempted to access the underlying system APIs?
It’s not possible. From the docs: “The Uri needs to be a content Uri to a local file on the device.”
https://developers.facebook.com/docs/instagram/sharing-to-stories
I have spent a couple on days on the problem by myself and with my colleagues, and tried every single solution I found. @retyui’s solution also didn’t work for me. Moreover, his solution worked on one half of the phones and didn’t work on the other half, e.g. it didn’t work on some high-end phones and didn’t work on some mid-end phones. The was no relationship between the processor power and Android version. We came to the conclusion that the bug is in the
react-native-sharelibrary, but we were wrong, more on this later in the text. I have also implemented a native module with the method that was wrote as on Instagram Platform documentation page. Still wasn’t working. Then I dived into the logs trying out how to find the right combination ofextrasandflagsfor theIntenton Android to mimic the Intent that is passed when sharing from the Share Menu and make it work. The solution is working on all devices and Android versions that we have to test on. The key is to useIntent.EXTRA_STREAM. Here is the code:However, one problem persists: now we cannot pass in additional parameters such as
"top_background_color"and"bottom_background_color"that you can also need. We needed them. Spent another day on this trying every combination of Intentactionsandextras,dataandClipData. It worked only on the second call of the method where the first call only opened Instagram camera. Some hours ago an update with the new version of Instagram arrived to the Play Store without any information of the update changes. I updated Instagram on the phone and it magically worked! So I tried the initial implementation of the sharing to Instagram Stories in our app that usesreact-native-shareand checked that it works now! The native implementation as described on Instagram Platform documentation page also works from now as it should have.The conclusion of the story is that sharing to Instagram Stories is finally fixed in the Instagram app itself and works! There was a bug of their side. The version of Instagram app with the fix is
182.0.0.29.124. To cover every user of our app with the working solution we now use the implementation withreact-native-shareand check the version of Instagram installed on the user’s device withPackageManageron Android to fallback to the native module implementation that I wrote above.Same issue here, it works on iOS and not android… If I use shareSingle, it doesn’t work
but, if I use Share.Open like this :
And then, going to instagram stories, it works…
Do you have an idea why ?
@retyui @alicaglayan
I found a workaround that seems to be working consistently.