Post/1/sharing views

ios/Podfile.lock

@@ -182,6 +182,8 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
+  - react-native-view-shot (3.1.2):
+    - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
   - React-RCTAnimation (0.61.5):
@@ -217,6 +219,8 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
+  - RNShare (3.0.0):
+    - React
   - RNVectorIcons (6.6.0):
     - React
   - Yoga (1.14.0)
@@ -238,6 +242,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-view-shot (from `../node_modules/react-native-view-shot`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -249,6 +254,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNShare (from `../node_modules/react-native-share`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -285,6 +291,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-view-shot:
+    :path: "../node_modules/react-native-view-shot"
   React-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -305,6 +313,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNShare:
+    :path: "../node_modules/react-native-share"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -326,6 +336,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
+  react-native-view-shot: 4475fde003fe8a210053d1f98fb9e06c1d834e1c
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -336,6 +347,7 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
+  RNShare: 0e19ddb0bf338b62702ce1d9e001ee14effa68a8
   RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 

package.json

@@ -14,7 +14,9 @@
     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-paper": "^3.6.0",
-    "react-native-vector-icons": "^6.6.0"
+    "react-native-share": "^3.0.0",
+    "react-native-vector-icons": "^6.6.0",
+    "react-native-view-shot": "^3.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

src/@types/externalModules.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-share';

src/main/index.tsx

@@ -1,37 +1,107 @@
 import React, {Component} from 'react';
-import {SafeAreaView, StatusBar} from 'react-native';
-
-import {Avatar, Button, Card, Title, Paragraph} from 'react-native-paper';
+import {Image, SafeAreaView, StatusBar, ScrollView} from 'react-native';
+import ViewShot, {captureRef} from 'react-native-view-shot';
+import Share from 'react-native-share';
+import {
+  Avatar,
+  Button,
+  Card,
+  Title,
+  TextInput,
+  Text,
+  Paragraph,
+} from 'react-native-paper';
 
 import styles from './styles';
 
 class Main extends Component {
+  state = {
+    snapshot: undefined,
+    subtitle: '',
+  };
+
+  card = React.createRef<ViewShot>();
+
+  takeSnapshot = async () => {
+    if (this.card.current) {
+      // const snapshot = await this.card.current.capture!();
+      const snapshot = await captureRef(this.card, {
+        result: 'data-uri',
+      });
+      this.setState({
+        snapshot,
+      });
+    }
+  };
+
+  shareSnapshot = () => {
+    const {snapshot} = this.state;
+    if (snapshot) {
+      Share.open({
+        url: snapshot,
+      })
+        .then((res: any) => {
+          console.log(res);
+        })
+        .catch((err: any) => {
+          err && console.log(err);
+        });
+    }
+  };
+
   renderCard = () => {
     return (
-      <Card>
-        <Card.Title
-          title="This is an example"
-          subtitle="I hope this is useful"
-          left={props => <Avatar.Icon {...props} icon="folder" />}
-        />
-        <Card.Content>
-          <Title>Nicer title</Title>
-          <Paragraph>I like trains</Paragraph>
-        </Card.Content>
-        <Card.Cover source={{uri: 'https://picsum.photos/700'}} />
-        <Card.Actions>
-          <Button>Take Snapshot</Button>
-        </Card.Actions>
-      </Card>
+      <ViewShot ref={this.card}>
+        <Card>
+          <Card.Title
+            title="This is an example"
+            subtitle={this.state.subtitle}
+            left={props => <Avatar.Icon {...props} icon="folder" />}
+          />
+          <Card.Content>
+            <Title>Nicer title</Title>
+            <Paragraph>I like trains</Paragraph>
+          </Card.Content>
+          <Card.Cover source={{uri: 'https://picsum.photos/700'}} />
+          <Card.Actions>
+            <Button onPress={this.takeSnapshot}>Take Snapshot</Button>
+          </Card.Actions>
+        </Card>
+      </ViewShot>
     );
   };
 
   render() {
+    const {snapshot} = this.state;
     return (
       <>
         <StatusBar barStyle="dark-content" />
-        <SafeAreaView style={styles.scrollView}>
+        <SafeAreaView style={styles.container}>
           {this.renderCard()}
+          <ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={styles.scrollViewContent}>
+            <TextInput
+              label="Subtitle"
+              value={this.state.subtitle}
+              onChangeText={subtitle => this.setState({subtitle})}
+            />
+            <Text style={styles.title}> Snapshot</Text>
+            <Button
+              disabled={!this.state.snapshot}
+              icon="share"
+              mode="contained"
+              onPress={this.shareSnapshot}>
+              Share
+            </Button>
+            {snapshot && (
+              <Image
+                source={{uri: snapshot}}
+                resizeMode={'contain'}
+                style={styles.snapshot}
+              />
+            )}
+          </ScrollView>
         </SafeAreaView>
       </>
     );

src/main/styles.ts

@@ -1,17 +1,31 @@
-import {StyleSheet, ViewStyle} from 'react-native';
+import {StyleSheet, ViewStyle, ImageStyle, TextStyle} from 'react-native';
 
 export default StyleSheet.create<{
+  container: ViewStyle;
   scrollView: ViewStyle;
+  scrollViewContent: ViewStyle;
   bottom: ViewStyle;
+  snapshot: ImageStyle;
+  title: TextStyle;
 }>({
-  scrollView: {
+  container: {
     flex: 1,
   },
+  scrollViewContent: {paddingBottom: 40},
+  scrollView: {
+    backgroundColor: '#AF3ABC43',
+    padding: 40,
+  },
+  title: {paddingVertical: 20},
   bottom: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
     justifyContent: 'space-around',
   },
+  snapshot: {
+    height: 300,
+    width: '100%',
+  },
 });

yarn.lock

@@ -5561,6 +5561,11 @@ react-native-safe-area-view@^0.14.6:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
+react-native-share@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-3.0.0.tgz#5e158f773ebc91e35fbe48ffe21c0073c2c8f41a"
+  integrity sha512-5P/Fhou5jW1yY475h+wIR+VZAUZ1Gnx8N4QKGToOLNo1yUhDeLxYRhm3bGCcS/MEy35NOZ222/43SQGfUzCl/g==
+
 react-native-vector-icons@^6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-6.6.0.tgz#66cf004918eb05d90778d64bd42077c1800d481b"
@@ -5570,6 +5575,11 @@ react-native-vector-icons@^6.6.0:
     prop-types "^15.6.2"
     yargs "^13.2.2"
 
+react-native-view-shot@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-3.1.2.tgz#8c8e84c67a4bc8b603e697dbbd59dbc9b4f84825"
+  integrity sha512-9u9fPtp6a52UMoZ/UCPrCjKZk8tnkI9To0Eh6yYnLKFEGkRZ7Chm6DqwDJbYJHeZrheCCopaD5oEOnRqhF4L2Q==
+
 react-native@0.61.5:
   version "0.61.5"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.61.5.tgz#6e21acb56cbd75a3baeb1f70201a66f42600bba8"