Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 30346

How to open downloaded photo using gallery app in React Native Expo?

$
0
0

I am facing a problem, cannot figure out how to implement such action. I want to Download Photo from external source, and then I want to open it in gallery.

Checked this source: How to open iOS gallery app from React Native app

Here one developer suggest to use this code:

openPhotos = () =>{
switch(Platform.OS){
  case "ios":
    Linking.openURL("photos-redirect://");
  break;
  case "android":
    Linking.openURL("content://media/internal/images/media");
  break;
  default:
    console.log("Could not open gallery app");
 }
}

This code does open gallery, but when I select default gallery app, it shows black screen, if I choose google photos app it opens the gallery without black screen.

My question would be how could I refactor my code, to be able to Download Photo, and open downloaded photo in gallery?

Component code:

import React from "react";
import {View,Text, StyleSheet,Platform,Image,Alert} from "react-native";
import PhotoComments from "./PhotoComments";
import moment from "moment";
import * as MediaLibrary from "expo-media-library";
import * as FileSystem from "expo-file-system";
import * as Permissions from "expo-permissions";
import { Button } from "react-native-elements";
import { Linking } from "expo";

function downloadFile(uri) {
  let filename = uri.split("/");
  filename = filename[filename.length - 1];
  let fileUri = FileSystem.documentDirectory + filename;
  FileSystem.downloadAsync(uri, fileUri)
    .then(({ uri }) => {
      saveFile(uri);
    })
    .catch(error => {
      Alert.alert("Error", "Couldn't download photo");
      console.error(error);
    });
}
async function openPhotos(uri) {
  switch (Platform.OS) {
    case "ios":
      Linking.openURL("photos-redirect://");
      break;
    case "android":
      //Linking.openURL("content://media/internal/images/media/");
      Linking.openURL("content://media/internal/images/media");
      break;
    default:
      console.log("Could not open gallery app");
  }
}

async function saveFile(fileUri) {
  const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
  if (status === "granted") {
    const asset = await MediaLibrary.createAssetAsync(fileUri);
    const data = await MediaLibrary.createAlbumAsync("Download", asset, false);
    console.log("deubeuger");
    console.log(data);
    console.log("buger");

    Alert.alert("Success!", JSON.stringify(fileUri));
    openPhotos(fileUri);
  }
}

const PhotoRecord = ({ data }) => {
  return (
    <View style={styles.container}>
      <View style={styles.infoContainer}>
        <Text style={styles.usernameLabel}>@{data.username}</Text>
        <Text style={styles.addedAtLabel}>
          {moment(new Date(data.addedAt)).format("YYYY/MM/DD HH:mm")}
        </Text>
      </View>
      <View style={styles.imageContainer}>
        <Image source={{ uri: data.links.thumb }} style={styles.image} />
      </View>
      <PhotoComments comments={data.photoComments} />
      <View style={styles.btnContainer}>
        <Button
          buttonStyle={{
            backgroundColor: "white",
            borderWidth: 1
          }}
          titleStyle={{ color: "dodgerblue" }}
          containerStyle={{ backgroundColor: "yellow" }}
          title="Add Comment"
        />
        <Button
          onPress={() => downloadFile(data.links.image)}
          style={styles.btn}
          title="Download"
        />
      </View>
    </View>
  );
};

I managed to implement downloading from external source, but cannot find the working solutions on how to open downloaded photo through gallery app.

Maybe I am looking for solution which is not efficient, maybe there is a better way?


Viewing all articles
Browse latest Browse all 30346

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>