text: import { StatusBar } from 'expo-status-bar';
  import React from 'react';
  import { Button, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
  import * as ImagePicker from 'expo-image-picker';
  import * as Sharing from 'expo-sharing';
  import uploadToAnonymousFilesAsync from 'anonymous-files';
  import Splash from './src/components/Splash';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import About from './src/components/About';
  
  function AboutScreen() {
    return(
      <About />
    );
  }
  
  function HomeScreen({ navigation }) {
  
    const [selectedImage, setSelectedImage] = React.useState(null);
  
    let openImagePickerAsync = async () => {
      let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();
  
      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);
        setSelectedImage({ localUri: pickerResult.uri, remoteUri });
      } else {
        setSelectedImage({ 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}>
          <Button
          title="Return Home"
          onPress={() => navigation.navigate('Home')}
        />
            <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}>
        <Splash />
  
        <Button
          title="Go to About"
          onPress={() => navigation.navigate('About')}
        />
  
        <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>
        <StatusBar style="auto" />
  
        <TouchableOpacity
          onPress={openImagePickerAsync}
          style={styles.button}>
          <Text style={styles.buttonText}>Pick a photo</Text>
        </TouchableOpacity>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    logo: {
      width: 305,
      height: 159,
      marginBottom: 10,
    },
    instructions: {
      color: '#888',
      fontSize: 18,
      textAlign: 'center',
    },
    button: {
      backgroundColor: "blue",
      padding: 20,
      borderRadius: 5,
      margin: 10
    },
    buttonText: {
      fontSize: 20,
      color: '#fff',
    },
    thumbnail: {
      width: 500,
      height: 500,
      resizeMode: "contain"
    }
  });
  
  const Stack = createStackNavigator();
  
  function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="About" component={AboutScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  
  export default App;