Add sharing graphs
This commit is contained in:
parent
af835137fb
commit
f15146c0e2
35
ViewBest.tsx
35
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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
19
yarn.lock
19
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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user