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...?