Add sharing graphs
This commit is contained in:
parent
af835137fb
commit
f15146c0e2
35
ViewBest.tsx
35
ViewBest.tsx
|
@ -7,14 +7,23 @@ import {
|
||||||
useRoute,
|
useRoute,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import * as shape from 'd3-shape';
|
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 {Text, useColorScheme, View} from 'react-native';
|
||||||
import {IconButton} from 'react-native-paper';
|
import {IconButton} from 'react-native-paper';
|
||||||
|
import Share from 'react-native-share';
|
||||||
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
||||||
|
import ViewShot from 'react-native-view-shot';
|
||||||
import {DatabaseContext} from './App';
|
import {DatabaseContext} from './App';
|
||||||
import {BestPageParams} from './BestPage';
|
import {BestPageParams} from './BestPage';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {formatMonth} from './time';
|
import {formatMonth} from './time';
|
||||||
|
import {FileSystem} from 'react-native-file-access';
|
||||||
|
|
||||||
interface Volume {
|
interface Volume {
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -30,6 +39,7 @@ export default function ViewBest() {
|
||||||
const db = useContext(DatabaseContext);
|
const db = useContext(DatabaseContext);
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const dark = useColorScheme() === 'dark';
|
const dark = useColorScheme() === 'dark';
|
||||||
|
const viewShot = useRef<ViewShot>(null);
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
|
@ -38,9 +48,26 @@ export default function ViewBest() {
|
||||||
headerLeft: () => (
|
headerLeft: () => (
|
||||||
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
|
<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,
|
title: params.best.name,
|
||||||
});
|
});
|
||||||
}, [navigation, params.best.name]),
|
}, [navigation, params.best]),
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -80,7 +107,7 @@ export default function ViewBest() {
|
||||||
const xAxisHeight = 30;
|
const xAxisHeight = 30;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{padding: 10}}>
|
<ViewShot style={{padding: 10}} ref={viewShot}>
|
||||||
<Text>Best weight per day</Text>
|
<Text>Best weight per day</Text>
|
||||||
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
|
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
|
||||||
<YAxis
|
<YAxis
|
||||||
|
@ -151,6 +178,6 @@ export default function ViewBest() {
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</ViewShot>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,10 +32,12 @@
|
||||||
"react-native-reanimated": "^2.9.0",
|
"react-native-reanimated": "^2.9.0",
|
||||||
"react-native-safe-area-context": "^4.3.1",
|
"react-native-safe-area-context": "^4.3.1",
|
||||||
"react-native-screens": "^3.14.0",
|
"react-native-screens": "^3.14.0",
|
||||||
|
"react-native-share": "^7.9.0",
|
||||||
"react-native-sqlite-storage": "^6.0.1",
|
"react-native-sqlite-storage": "^6.0.1",
|
||||||
"react-native-svg": "^12.3.0",
|
"react-native-svg": "^12.3.0",
|
||||||
"react-native-svg-charts": "^5.4.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": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.9",
|
"@babel/core": "^7.12.9",
|
||||||
|
|
19
yarn.lock
19
yarn.lock
|
@ -6026,10 +6026,12 @@ __metadata:
|
||||||
react-native-reanimated: ^2.9.0
|
react-native-reanimated: ^2.9.0
|
||||||
react-native-safe-area-context: ^4.3.1
|
react-native-safe-area-context: ^4.3.1
|
||||||
react-native-screens: ^3.14.0
|
react-native-screens: ^3.14.0
|
||||||
|
react-native-share: ^7.9.0
|
||||||
react-native-sqlite-storage: ^6.0.1
|
react-native-sqlite-storage: ^6.0.1
|
||||||
react-native-svg: ^12.3.0
|
react-native-svg: ^12.3.0
|
||||||
react-native-svg-charts: ^5.4.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
|
||||||
typescript: ^4.4.4
|
typescript: ^4.4.4
|
||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
@ -7475,6 +7477,13 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"react-native-sqlite-storage@npm:^6.0.1":
|
||||||
version: 6.0.1
|
version: 6.0.1
|
||||||
resolution: "react-native-sqlite-storage@npm:6.0.1"
|
resolution: "react-native-sqlite-storage@npm:6.0.1"
|
||||||
|
@ -7542,6 +7551,16 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"react-native@npm:0.69.1":
|
||||||
version: 0.69.1
|
version: 0.69.1
|
||||||
resolution: "react-native@npm:0.69.1"
|
resolution: "react-native@npm:0.69.1"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user