Search code examples
react-nativereact-native-view-shot

Share on facebook after taking viewshot - not showing image on facebook

I am trying to take a view shot then share it on facebook the viewshot however the image sometimes doesn't show up. 

import Share from 'react-native-share';
import ViewShot from 'react-native-view-shot';

class ShareOptions extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onCapture = uri => {
    const { navigation } = this.props;
    const item = get(navigation.state.params, 'itemInfo', {});
    const appId = get(navigation.state.params, 'appId', '');
    const message = item.title;
    const shareOptions = {
      title: 'Share via',
      message: `${message} ${item.link}`,
      social: Share.Social[appId],
      url: uri,
    };
    if (appId === 'MESSENGER') {
      Share.open(shareOptions);
    } else if (appId === 'TELEGRAM') {
      Share.open(shareOptions);
    } else if (appId === 'WHATSAPP') {
      Linking.openURL(`whatsapp://send?text=${`${message} ${item.link}`}`);
    } else if (appId === 'MORE') {
      Share.open(shareOptions);
    } else {
      Share.shareSingle(shareOptions);
    }
  };

  render() {
    const { navigation } = this.props;
    const item = get(navigation.state.params, 'itemInfo', {});
    return (
      <View bg="white">
        <ViewShot
          style={{ backgroundColor: '#fff' }}
          onCapture={this.onCapture}
          captureMode="mount"
          options={{ format: 'png' }}
          f={1}>
          <View
            w={Environment.screenWidth - 40}
            h={Environment.screenHeight - 150}
            bg="white"
            br={5}
            e={8}
            m={20}
            jc="space-between">
            <View>
              {get(item, 'url', '') !== '' && (
                <View>
                  <FastImage
                    style={{
                      height: 150,
                      resizeMode: 'cover',
                      borderRadius: 0,
                    }}
                    source={{
                      uri: item.url,
                      priority: FastImage.priority.normal,
                    }}
                    resizeMode={FastImage.resizeMode.cover}
                  />
                </View>
              )}
              <View ph={10} pt={get(item, 'url', '') !== '' ? 12 : 2}>
                <Text fs={14} lh={19} c={Color.black} sb numberOfLines={2}>
                  {item.title}
                </Text>
                <Text
                  fs={12}
                  lh={17}
                  c={Color.black}
                  numberOfLines={get(item, 'url', '') !== '' ? 8 : 16}
                  mt={5}>
                  {item.description}
                </Text>
              </View>
            </View>
            <View ph={11} pt={25} pb={11.5} row ai="center">
              <Icon
                type="MaterialCommunityIcons"
                name="newspaper"
                size={22}
                color={Color.light}
              />
              <Text ml={8} c={Color.light} fs={14}>
                {item.author}
              </Text>
            </View>
            <View
              h={2}
              w={Environment.screenWidth - 60}
              bg={Color.grey65}
              as="center"
              mv={2}
            />
            <View row ai="center" ph={11} pt={10} pb={15}>
              <Image
                style={{
                  resizeMode: 'contain',
                  height: 18,
                  width: 64,
                }}
                source={require('../../../assets/images/flockby-name.png')}
              />
              <Text ph={8} fs={12}>
                Celebrate wildlife - Chat, meet, share!
              </Text>
            </View>
          </View>
        </ViewShot>
        <View m={20}>
          <Text c={Color.light} fs={12} br={5} e={3} m={4}>
            Read story at {item.link}
          </Text>
        </View>
      </View>
    );
  }
}

export default ShareOptions;

EDIT: So it shows the image the first time however the consecutive times it doesn't work.

So i implemented the below for it to wait for my image to upload.

    <FastImage
                onLoad={this.onImageLoad}
                style={{
                  height: 150,
                  resizeMode: 'cover',
                  borderRadius: 0,
                }}
                source={{
                  uri: item.url,
                  priority: FastImage.priority.normal,
                }}
                resizeMode={FastImage.resizeMode.cover}
              />

However there are certain times when i don't get an image url from backend.

enter image description here

Please help new to react native

Solution

  • Fixed it myself.

                <FastImage
                onLoad={this.onImageLoad}
                style={{
                  height: 150,
                  resizeMode: 'cover',
                  borderTopLeftRadius: 5,
                  borderTopRightRadius: 5,
                }}
                source={{
                  uri: item.url,
                  priority: FastImage.priority.normal,
                }}
                resizeMode={FastImage.resizeMode.cover}
              />

    I am sharing the post now after onImageLoad it fixed my issue.