demo-02-expo-first-steps.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, Platform, StyleSheet, Text, Touchable, TouchableOpacity, View } from 'react-native';
import logo from './assets/icon.png';
import * as ImagePicker from 'expo-image-picker';
import * as Sharing from 'expo-sharing';
import uploadToAnonymousFilesAsync from 'anonymous-files';
 
export default function App() {
 
  const [selectedImage, setSelectetedImage] = React.useState(null);
 
  let openImagePickerAsync = async () => {
    let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
 
    if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return;
    }
 
    let pickerResult = await ImagePicker.launchImageLibraryAsync();
 
    if(pickerResult.cancelled === true)
    {
      return;
    }
 
    if (Platform.OS === 'web'){
      let remoteUri = await uploadToAnonymousFilesAsync(pickerResult.uri);
      setSelectetedImage({ localUri: pickerResult.uri, remoteUri });
    } else {
      console.warn("Platform is not web");
      setSelectetedImage({ localUri: pickerResult.uri, remoteUri: null });
    }
    
  }
 
  let openShareDialogAsync = async () => {
    if (!(await Sharing.isAvailableAsync())) {
      alert('The image is available for sharing at: '+ selectedImage.remoteUri);
      return;
    }
 
    await Sharing.shareAsync(selectedImage.localUri);
  };
 
  if (selectedImage !== null)
  {
    return (
      <View style={styles.container}>
        <Image source={{ uri: selectedImage.localUri }} style={styles.thumbnail}/>
        <TouchableOpacity onPress={openShareDialogAsync} style={styles.button}>
          <Text style={styles.buttonText}>Share this photo</Text>
        </TouchableOpacity>
      </View>
    );
  }
 
  return (
    <View style={styles.container}>
      <Image source={logo} style={{ width: 305, height: 159 }} />
      <Image source={{ uri: "https://i.imgur.com/TkIrScD.png" }} style={styles.logo} />
 
      <Text style={styles.instructions}>
        To share a photo from your phone with a friend, just press the button below!
      </Text>
 
      <TouchableOpacity
        onPress={openImagePickerAsync} style={styles.button}>
        <Text style={styles.buttonText}>Pick a photo</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
}
 
const styles = StyleSheet.create({
  thumbnail: {
    width: 300,
    height: 300,
    resizeMode: "contain"
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 305,
    height: 159,
    marginBottom: 10,
  },
  instructions: {
    color: '#888',
    fontSize: 18,
    marginHorizontal: 15,
  },
  button: {
    backgroundColor: "blue",
    padding: 20,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 20,
    color: '#fff',
  },
});