How do I social share post to Instagram with Share.open?

[beaux-riel]

Ask your Question

Hi everyone,

I'm attempting to use React Native Share to share an image to an Instagram post. My issue is I can't seem to get the payload correct as I'm only ever presented with Instagram Reels as an option. I don't really want to create a custom modal to manually create shareSingle options if I can avoid it.

Any help from anyone who has experienced this is issue would be most appreciated.

import React, { useContext } from 'react';
import { Platform } from 'react-native';
import Share, { Social } from 'react-native-share';

import Button from './Button';

import { heartIcon } from '$components/icons/HeartIconBase64';
import { ActivitiesState } from '$hooks/context/ActivitiesCtx';
import { formatDuration } from '$lib/utils/formatTime';

const url = 'https://kardioactive.com';
const title = 'I am crushing my Kardio goals! 💪';
const message = 'My workout left me pumped! 💪';
const icon = heartIcon;

export default function ShareButton() {
  const { state } = useContext(ActivitiesState);
  const shareActivity = state ? state.shareActivity : null;

  const share = async () => {
    const shareImage = shareActivity?.shareImageBase64;

    const activityMessage = shareActivity
      ? `Check out my ${shareActivity.type.toLowerCase()} workout! ${formatDuration(shareActivity.duration)} of Kardio fun, ${shareActivity.points} points for my efforts and all with an average heart rate of ${shareActivity.avg_hr}bpm.`
      : 'My workout left me pumped! 💪';

    const options = Platform.select({
      ios: {
        activityItemSources: [
          {
            // Text content
            placeholderItem: { type: 'text', content: activityMessage },
            item: {
              default: { type: 'text', content: activityMessage },
            },
            subject: { default: title },
            linkMetadata: {
              title,
              icon: shareActivity ? shareActivity.icon : '',
            },
          },
          {
            // Image content
            placeholderItem: { type: 'url', content: icon },
            item: {
              default: { type: 'url', content: shareImage },
            },
          },
        ],
      },
      default: {
        heartIcon,
        title,
        subject: title,
        message: `${message}`,
      },
    });

    try {
      await Share.open(options);
    } catch (error) {
      console.log(error);
    }
  };

  return <Button title="Share Activity" onPress={share} textColor="black" />;
}

[beaux-riel]

I have found that if I pass my shareable image directly:

try {
  await Share.open({url:shareImage});
} catch (error) {
  console.log(error);
}

};

Then it works. I can share the image anywhere and anyway I like, I just can't modify the share sheet or add a title, subject, or message. If I do, it reverts back to only allowing me to share to a reel...?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and i will leave this open

[ceconcarlsen]

u got use the shareSingle method

Share.shareSingle({
       url: uri,
       title: 'Hey',
       social: Share.Social.WHATSAPP,
   });

[singgih20]

I have found that if I pass my shareable image directly:

try {
  await Share.open({url:shareImage});
} catch (error) {
  console.log(error);
}

};

Then it works. I can share the image anywhere and anyway I like, I just can't modify the share sheet or add a title, subject, or message. If I do, it reverts back to only allowing me to share to a reel...?

have you found the solution?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and i will leave this open