Invalid image path obtained from ShareExtension.data

[BigPun86]

When i navigate to the Host Application and pass the image url which i have obtained from value of ShareExtension then in my real device the imgPath wont work! I actually cannot use the url which looks like this:

/private/var/mobile/Containers/Data/PluginKitPlugin/09BD2F36-975D-4DB4-80FD-2446799A48AE/tmp/RNSE_TEMP_IMG.png

I have tried to check if the imgPath is available. I did this with react-native-fs and there i get for the imgPath the error that the file is not there.

Everything works great on Android (Simulator & RealDevice) as well as on the iOS Simulator. But it fails on iOS RealDevice.

Receiving ShareData:

try {
    const { type, value } = await ShareExtension.data();
    let error;
    const url = `shareExtensionApp://shareImage/${value}`;
    ShareExtension.openURL(url);
    ShareExtension.close();
} catch (e) {
    Alert.alert(null, e);
}

Use value for my Image component:

<Image source={{uri: value}}/>

[isaachinman]

I just ran into this issue myself when testing on a real iOS device. Functionality works perfectly on iOS simulator and Android, but not on a real iOS device (iPhone 6, iOS 11.3).

My received share path looks virtually identical to OP's (eg /private/var/mobile/Containers/...).

@BigPun86 Did you find a way to solve this?

From my limited understanding, this has to do with app containers/permissions.

[BigPun86]

@isaachinman i forked this project and and dis some stuff in the iOS part, which finally works not. You can have a look here: https://github.com/BigPun86/react-native-share-extension/tree/master/ios

You will need to enable App Groups for both targets (MainApp and Share Extension)

[isaachinman]

@BigPun86 Thanks! Lot of work getting this project to actually work cross-platform...

What was your methodology? Are you copying files to a temporary shared dir between the two apps (via App Group), or did you find a way to share the path by itself without copying?

It would be super helpful if you can open a PR, at least so people like myself can see the diff. I doubt it'll ever get merged, based on how this project is managed...

[BigPun86]

@isaachinman well i am actually creating a directory related to the app group and then i combine the app group path/url together with my file path/url. I am not good in explaining, but you can have a look at the ShareMaster.h/m => Readme.md and this part https://github.com/BigPun86/react-native-share-extension/blob/master/ios/ReactNativeShareExtension.h#L7

I hope this helps you, it took me 2 weeks to completely integrate the share-extension for ios and android :D

[isaachinman]

@BigPun86 With app groups in place, it's actually way easier to achieve this than the way you're doing it.

You only need app groups and react-native-fs to accomplish it:

const data = await ShareExtension.data()

if (Platform.OS === 'ios') {
    const appGroupPath = await RNFS.pathForGroup('group.com.myapp')

    await Promise.all(data.map(async (image) => {
        const filename = path.basename(image.value)
        const destination = `${appGroupPath}/${filename}`
        await RNFS.copyFile(image.value, destination)
    }))
}

For any future readers that might need help with this, just let me know.

[BigPun86]

@isaachinman thanks a lot, i tried it with react-native-fs, maybe i have missed something. But thanks, i will update my code and test your snippet :)

[isaachinman]

Cool! The main takeaway here is that what we both want to do is fully possible with react-native-share-extension, no fork needed. (Although I'm actually using a different fork to allow multi-item sharing.)

By the way, I got this idea from #73, which should definitely be merged into master.

[ahmedjamshed]

@isaachinman my code is stuck at this line in share extension.
await RNFS.copyFile(image.value, destination)

I am able to show the image from path in share extenion but not in main app. So I decided to configure app group. I only configured the app group in share extension for now and I am able to get the app group path from this line.

const appGroupPath = await RNFS.pathForGroup('group.com.myapp')

My problem is that when i try to execute this line

await RNFS.copyFile(image.value, destination)

it never fullfills the promise and the lines below this line never get executed although the extension does not crash

Here is my full code

async componentDidMount() {
try {
  const { type, value } = await ShareExtension.data()
  const appGroupPath = await RNFS.pathForGroup('group.com.myapp')
  const filename = path.basename(value)
  const destination = `${appGroupPath}/${filename}`
  await RNFS.copyFile(value, destination) // even tried with seprate then/catch block
 // lines never get executed, promise never gets fulfilled
 ShareExtension.openUrl('myapp://${value}') // gets executed when remove this line
//await RNFS.copyFile(value, destination)
} catch(e) {
 console.log(e.message) // No error returned here because changing state here in actual code
}
}

More Info:

• I am new to react native and iOS so there could be some odd reason.
• Changed nothing in plist of share extenion except NSExtensionActivationRule key so could be permisson issue but I am not sure.
• Enabled group from xcode for share extenison only.

What could be the problem? Can you guide me? BTW sorry for bad formatting.

[isaachinman]

@ahmedjamshed First, you should always format code when you write in a GitHub issue. Second, how could I possibly help without any error or any information whatsoever? If you post more information here in the proper way, I am happy to help you.

[ahmedjamshed]

@isaachinman Sorry for bad formatting. I have updated my previous comment,

[isaachinman]

The whole point of an app group in this case is that it creates a shared directory between your share extension and main app, where both processes can access (read/write).

Sounds like you need to add your main app to the app group, at the very least.

That being said, if copyFile is hanging - ie not throwing and not resolving - it actually sounds like a RNFS bug...

Can you print out image.value and destination?

[ahmedjamshed]

Can you print out image.value and destination?

Yes, I am able to show the value and destination on extenion UI by calling setState

[isaachinman]

I meant, can you write it here?

[ahmedjamshed]

@isaachinman Thanks for helping. My app groups weren't properly configured due to some Bundle Identifier issue. Changing bundle identifier and cleaning the code solved my problem.

[isaachinman]

Ah, good to hear.