1import { Asset } from 'expo-asset';
2import * as FileSystem from 'expo-file-system';
3import * as Sharing from 'expo-sharing';
4import React from 'react';
5import { Image, StyleSheet, Text, View } from 'react-native';
6
7import Button from '../components/Button';
8
9// https://www.deviantart.com/squishypanda96/art/ceci-n-est-pas-un-chapeau-296137053
10const image = require('../../assets/images/chapeau.png');
11
12export default class SharingScreen extends React.Component {
13  static navigationOptions = {
14    title: 'Sharing',
15  };
16
17  state = {
18    loading: true,
19    isAvailable: false,
20  };
21
22  componentDidMount() {
23    Sharing.isAvailableAsync().then((isAvailable) =>
24      this.setState({ isAvailable, loading: false })
25    );
26  }
27
28  _shareLocalImage = async () => {
29    const asset = Asset.fromModule(image);
30    await asset.downloadAsync();
31    const tmpFile = FileSystem.cacheDirectory + 'chapeau.png';
32
33    try {
34      // sharing only works with `file://` urls on Android so we need to copy it out of assets
35      await FileSystem.copyAsync({ from: asset.localUri!, to: tmpFile });
36      await Sharing.shareAsync(tmpFile, {
37        dialogTitle: 'Is it a snake or a hat?',
38      });
39    } catch (e) {
40      console.error(e);
41    }
42  };
43
44  render() {
45    return (
46      <View style={styles.container}>
47        <Image source={image} style={styles.image} resizeMode="contain" />
48        <Button
49          onPress={this._shareLocalImage}
50          title="Share local image"
51          disabled={!this.state.isAvailable}
52          loading={this.state.loading}
53        />
54        {!this.state.isAvailable && !this.state.loading && (
55          <Text>Sharing functionality is not available on this platform.</Text>
56        )}
57      </View>
58    );
59  }
60}
61
62const styles = StyleSheet.create({
63  container: {
64    flex: 1,
65    alignItems: 'center',
66    justifyContent: 'center',
67    padding: 40,
68  },
69  image: {
70    marginBottom: 30,
71    width: '100%',
72    flex: 1,
73  },
74});
75