CODEWITHSUNDEEP
reactjsreact-native
somesh
somesh

Reputation: 2579

Customizing react native share message based on app

I am looking at using ReactNative's share component in my app: https://facebook.github.io/react-native/docs/share#share

Is there a way I can customize the message depending on the app the user chooses to share with? Like I would want to give a shorter message if the user say shares via twitter as opposed to a longer message for a share via email.

Thanks!

Upvotes: 3

Views: 2061

Answers (1)

neydroid
neydroid

Reputation: 1951

Yes, you can, if the user did share you just need to use result.activityType like this to check if it was shared to WhatsApp for example:

result.activityType === 'net.whatsapp.WhatsApp.ShareExtension'

Check this snack https://snack.expo.io/@neydroid/stack-overflow-test

import * as React from 'react';
import { Alert, Button, Text, View, Share, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      })

      if (result.action === Share.sharedAction) {
        if (result.activityType && result.activityType === 'net.whatsapp.WhatsApp.ShareExtension') {
          // shared with WhatsApp
          Alert.alert(result.activityType);
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Something To Share" onPress={this.onShare}>Share</Button>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

Upvotes: 1

Related Questions