Add sharing graphs

ViewBest.tsx

@@ -7,14 +7,23 @@ import {
   useRoute,
 } from '@react-navigation/native';
 import * as shape from 'd3-shape';
-import React, {useCallback, useContext, useEffect, useState} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {Text, useColorScheme, View} from 'react-native';
 import {IconButton} from 'react-native-paper';
+import Share from 'react-native-share';
 import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
+import ViewShot from 'react-native-view-shot';
 import {DatabaseContext} from './App';
 import {BestPageParams} from './BestPage';
 import Set from './set';
 import {formatMonth} from './time';
+import {FileSystem} from 'react-native-file-access';
 
 interface Volume {
   name: string;
@@ -30,6 +39,7 @@ export default function ViewBest() {
   const db = useContext(DatabaseContext);
   const navigation = useNavigation();
   const dark = useColorScheme() === 'dark';
+  const viewShot = useRef<ViewShot>(null);
 
   useFocusEffect(
     useCallback(() => {
@@ -38,9 +48,26 @@ export default function ViewBest() {
         headerLeft: () => (
           <IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
         ),
+        headerRight: () => (
+          <IconButton
+            onPress={() =>
+              viewShot.current?.capture?.().then(async uri => {
+                const base64 = await FileSystem.readFile(uri, 'base64');
+                const url = `data:image/jpeg;base64,${base64}`;
+                Share.open({
+                  message: `${params.best.name} - Powered by Massive`,
+                  type: 'image/jpeg',
+                  url,
+                  failOnCancel: false,
+                });
+              })
+            }
+            icon="share-social-outline"
+          />
+        ),
         title: params.best.name,
       });
-    }, [navigation, params.best.name]),
+    }, [navigation, params.best]),
   );
 
   useEffect(() => {
@@ -80,7 +107,7 @@ export default function ViewBest() {
   const xAxisHeight = 30;
 
   return (
-    <View style={{padding: 10}}>
+    <ViewShot style={{padding: 10}} ref={viewShot}>
       <Text>Best weight per day</Text>
       <View style={{height: 300, padding: 20, flexDirection: 'row'}}>
         <YAxis
@@ -151,6 +178,6 @@ export default function ViewBest() {
           />
         </View>
       </View>
-    </View>
+    </ViewShot>
   );
 }

package.json

@@ -32,10 +32,12 @@
     "react-native-reanimated": "^2.9.0",
     "react-native-safe-area-context": "^4.3.1",
     "react-native-screens": "^3.14.0",
+    "react-native-share": "^7.9.0",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "^12.3.0",
     "react-native-svg-charts": "^5.4.0",
-    "react-native-vector-icons": "^9.2.0"
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-view-shot": "^3.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

yarn.lock

@@ -6026,10 +6026,12 @@ __metadata:
     react-native-reanimated: ^2.9.0
     react-native-safe-area-context: ^4.3.1
     react-native-screens: ^3.14.0
+    react-native-share: ^7.9.0
     react-native-sqlite-storage: ^6.0.1
     react-native-svg: ^12.3.0
     react-native-svg-charts: ^5.4.0
     react-native-vector-icons: ^9.2.0
+    react-native-view-shot: ^3.4.0
     typescript: ^4.4.4
   languageName: unknown
   linkType: soft
@@ -7475,6 +7477,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-share@npm:^7.9.0":
+  version: 7.9.0
+  resolution: "react-native-share@npm:7.9.0"
+  checksum: 8eb2f5b4be8df11224f8f00b2761c2c3b4231590d945f57e8ed91899a455d7b5083bb62aa8a017ed8c15fbdfb95e85f9ee4060ac00c01897ef5c351e756c46af
+  languageName: node
+  linkType: hard
+
 "react-native-sqlite-storage@npm:^6.0.1":
   version: 6.0.1
   resolution: "react-native-sqlite-storage@npm:6.0.1"
@@ -7542,6 +7551,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-view-shot@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "react-native-view-shot@npm:3.4.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: f42679bdbb55e6bec425a152053ad4d1a79b0847c258526ff00958ab346ac18103a935267525c1dadbe10830f2f277b27d0df3cf61516c53d5a16ccdd87d201c
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.69.1":
   version: 0.69.1
   resolution: "react-native@npm:0.69.1"