Use Cases for Share API

packages/rn-tester/js/examples/Share/ShareExample.js

@@ -16,98 +16,85 @@ const {
   StyleSheet,
   View,
   Text,
-  TouchableHighlight,
+  Button,
   Share,
 } = require('react-native');
 
 type Props = $ReadOnly<{||}>;
 type State = {|result: string|};
 
-class ShareMessageExample extends React.Component<Props, State> {
-  _shareMessage: Function;
-  _shareText: Function;
-  _showResult: Function;
+const shareMessage = () => {
+  Share.share({
+    message: blogPostOne.body
+  })
+    .catch(error => this.setState({result: 'error: ' + error.message}));
+}
 
-  constructor(props) {
-    super(props);
+const shareText = () => {
+  Share.share(
+    {
+      message: blogPostTwo.body,
+      url: 'https://reactnative.dev/blog/2020/07/17/react-native-principles',
+      title: blogPostTwo.title,
+    },
+    {
+      subject: 'MUST READ: ' + blogPostTwo.title,
+      dialogTitle: 'Share React Native Blog',
+      excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'],
+      tintColor: 'blue',
+    },
+  )
+    .catch(error => this.setState({result: 'error: ' + error.message}));
+}
 
-    this._shareMessage = this._shareMessage.bind(this);
-    this._shareText = this._shareText.bind(this);
-    this._showResult = this._showResult.bind(this);
 
-    this.state = {
-      result: '',
-    };
-  }
+const blogPostOne = {
+  title: 'Native Experience',
+  body: `Our top priority for React Native is to match the expectations people have for each platform. This is why React Native renders to platform primitives. We value native look-and-feel over cross-platform consistency.
+        For example, the TextInput in React Native renders to a UITextField on iOS. This ensures that integration with password managers and keyboard controls work out of the box. By using platform primitives, React Native apps are also able to stay up-to-date with design and behavior changes from new releases of Android and iOS.`
 
-  render() {
-    return (
-      <View>
-        <TouchableHighlight style={styles.wrapper} onPress={this._shareMessage}>
-          <View style={styles.button}>
-            <Text>Click to share message</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper} onPress={this._shareText}>
-          <View style={styles.button}>
-            <Text>Click to share message, URL and title</Text>
-          </View>
-        </TouchableHighlight>
-        <Text>{this.state.result}</Text>
-      </View>
-    );
-  }
+}
 
-  _shareMessage() {
-    Share.share({
-      message:
-        'React Native | A framework for building native apps using React',
-    })
-      .then(this._showResult)
-      .catch(error => this.setState({result: 'error: ' + error.message}));
-  }
+const blogPostTwo = {
+  title: 'Massive Scale',
+  body: `Hundreds of screens in the Facebook app are implemented with React Native. The Facebook app is used by billions of people on a huge range of devices. This is why we invest in the most challenging problems at scale.
+        Deploying React Native in our apps lets us identify problems that we wouldn’t see at a smaller scale. For example, Facebook focuses on improving performance across a broad spectrum of devices from the newest iPhone to many older generations of Android devices. This focus informs our architecture projects such as Hermes, Fabric, and TurboModules.`
+}
 
-  _shareText() {
-    Share.share(
-      {
-        message: 'A framework for building native apps using React',
-        url: 'https://reactnative.dev/',
-        title: 'React Native',
-      },
-      {
-        subject: 'A subject to go in the email heading',
-        dialogTitle: 'Share React Native website',
-        excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'],
-        tintColor: 'green',
-      },
-    )
-      .then(this._showResult)
-      .catch(error => this.setState({result: 'error: ' + error.message}));
-  }
+const ShareMessageWithoutTitle = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{blogPostOne.title}</Text>
+      <Text>
+        {blogPostOne.body}
+      </Text>
+      <Button title="SHARE" onPress={shareMessage}></Button>
+    </View>
+  );
+};
 
-  _showResult(result) {
-    if (result.action === Share.sharedAction) {
-      if (result.activityType) {
-        this.setState({
-          result: 'shared with an activityType: ' + result.activityType,
-        });
-      } else {
-        this.setState({result: 'shared'});
-      }
-    } else if (result.action === Share.dismissedAction) {
-      this.setState({result: 'dismissed'});
-    }
-  }
-}
+const ShareMessageWithTitle = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{blogPostTwo.title}</Text>
+      <Text>
+        {blogPostTwo.body}
+      </Text>
+      <Button title="SHARE" onPress={shareText}></Button>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
-  wrapper: {
-    borderRadius: 5,
-    marginBottom: 5,
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  button: {
-    backgroundColor: '#eeeeee',
-    padding: 10,
+  title: {
+    fontSize: 30,
+    margin: 10,
+    textAlign: 'center',
   },
 });
 
@@ -116,9 +103,15 @@ exports.title = 'Share';
 exports.description = 'Share data with other Apps.';
 exports.examples = [
   {
-    title: 'Share Text Content',
+    title: 'Share message',
+    render(): React.Node {
+      return <ShareMessageWithoutTitle />;
+    },
+  },
+  {
+    title: 'Share message, URL (iOS) and title (Android)',
     render(): React.Node {
-      return <ShareMessageExample />;
+      return <ShareMessageWithTitle />;
     },
   },
 ];