How to share images of the form data URI scheme within Expo managed workflow?

[mehmetkaplan]

I am trying to share images, through Android and iOS share functionalities (just like import { Share, } from 'react-native';

The problem is, I want to share, not file but an image in base64 data-uri form (which is generated on the fly as base64, not via a file or url).

The things that I tried are:

1. react-native’s Share: It shares only files.
2. react-native-share: this is exactly what I am looking for but it seems it is not included in Expo (yet).
3. expo-sharing’s shareAsync : It seems this is only for file sharing and not giving the user experience of standard social sharing.

Is there any method that I can achieve that purpose?

[notbrent]

i believe you can use FileSystem to write that to disk and then share that file: FileSystem - Expo Documentation

[notbrent]

expo-sharing 's shareAsync : It seems this is only for file sharing and not giving the user experience of standard social sharing.

i’m not sure what you mean by this. it uses the native share dialog just like react-native-share

[notbrent]

here is an example for you: excited cereal - Snack

notice that you need to strip the data-uri prefix from the string before writing to disk

[mehmetkaplan]

First thanks a lot for such a lightening fast response @notbrent, appreciated.

My concerns for expo-sharing sharing are:

• Yes, writing to file and sharing it is an option, but I don’t want to deal with extra permissions (I am trying to keep the app with minimum possible permissions)
• While sharing, I can not add additional auto-generated text into the message (user can write whatever she wants, but I want to embed some default text)

PS: The social experience I wanted to mean was the auto generated text.

[notbrent]

Yes, writing to file and sharing it is an option, but I don’t want to deal with extra permissions (I am trying to keep the app with minimum possible permissions)

your app already includes filesystem permissions in order to use assets and over the air updates, or use asyncstorage, or many other things, so that is not a concern

While sharing, I can not add additional auto-generated text into the message (user can write whatever she wants, but I want to embed some default text)

gotcha. can you show me a screenshot of the ui that you’re going for on ios and android?

[mehmetkaplan]

The filesystem info is a big relief.

For the UI, unfortunately I can not show because it is not ready yet. (For now I am just experimenting with some expo snacks in order to prove myself that I am on the right track. Once I have all pieces ready then I want to start the implementation.) If you want I can show snacks, but they will give you no information because I could not find a method to achieve my target so I have nothing in my hand.

[notbrent]

i mean if you can show me a screenshot from another app that does this same kind of sharing you have in mind it would be useful for me to understand exactly what technique they are using for that

[mehmetkaplan]

Ah, I got it now.

Again there is no solid example that I can present as an application.

But I can point to the method that react-native-share provides: GitHub - react-native-share/react-native-share: Social share, sending simple data to other apps.

Please observe that part in the example code:

const icon = 'data:<data_type>/<file_extension>;base64,<base64_data>';

...
      { // For using custom icon instead of default text icon at share preview when sharing with message.
        placeholderItem: {
          type: 'url',
          content: icon
        },
        item: {
          default: {
            type: 'text',
            content: `${message} ${url}`
          },
        },
...

Here, an image (variable icon is embedded along with text message variable message).

That is what I am trying to achieve.

I hope gives an idea. :-/

[mehmetkaplan]

I think I may have mis-interpret that…

[notbrent]

ah ok, so you would like to have support for Apple Developer Documentation to customize what is shared depending on what the share target supports. that makes sense

[mehmetkaplan]

I think my previous example from react-native-share was something else. My bad, apologies.

I generated some example within WhatsApp.

As you may see, both image and the text are sent in single transaction:

That is what I am trying to automate within an expo application. I am planning to generate the picture on the fly, attach an explanation text, and let the user decide how she wants to distribute it.

I hope this makes it more clear.

[mehmetkaplan]

And here is the snack that I generated. This simply captures the content of a view as a jpeg file and tries to share it.

Problem is, when sharing initiated, only “Apple Drop” is choosable and even that does not send the file.

courageous watermelon - Snack

PS: It should not work in web, only mobile devices because of a limitation in react-native-view-shot which is not relevant with main problem.

[notbrent]

set the mime type like in my snack example and on your device you will see something like this:

this is the exact result i see when i press the button on the snack i shared with you

[mehmetkaplan]

Thanks a lot man. Let me check this as first thing in the morning and reply here as the result. (Timezone diff issue).

Really appreciated.

[mehmetkaplan]

Now checked, confirmed, file sharing works as a charm. (Thanks to @notbrent)

Apparently the ‘file://’ part was missing in my code.

//this works 
let imgFile = `file://${await this.getImageFile()}`;

One final question; in the roadmap of expo-sharing, is there any chance of adding a new parameter of a text message (addition to the exiting file parameter)? File sharing is great, but this extra mile can make it even more useful.

[adrianboisclair]

Nice! Thanks for sharing that. One of the most helpful and active 3rd party software teams out there. Karma rewards those who help others.

-expo advocate

[notbrent]

that would be useful, yeah! here is the corresponding feature request: Add message to shared file, new Sharing API | Voters | Expo

i’m not sure when we will get around to it but anyone reading this wants to put together a pull request it would be very welcome!