I am currently trying to open an image that's saved in the cache from the react-native-camera module. According to this Open android Gallery App from react native app they managed to do it when they passed in the content:// url instead of the file:// url, but after some research I can't find anything on converting file uris to content - only the opposite. I can get the image file paths by:
import RNFS from 'react-native-fs'
import { Linking } from 'react-native'
RNFS.readDir(RNFS.CachesDirectoryPath)
.then(arr => RNFS.readDir(arr[0].path)) // The Camera directory
.then(arr => arr.forEach(item => {
const contentURI = somehowConvertPathToContentURI(item.path)
Linking.canOpenURL(contentURI)
.then(able => able ? Linking.openURL(contentURI) : console.log('No application available'))
.catch(console.log)
}))
.catch(console.log)
A logged path would be /data/user/0/com.myapp/cache/Camera/ad8db2ca-4739-47cc-b18d-c5147c8c26e0.jpg. Adding file:// in front will give me the file uri, what about content://?
As a side note, I'm able to directly show the image if I read and convert it to base64 with react-native-fs, then providing the base64 to react-native's <Image> component - but I'd like to open the app with a gallery application
Related
I am using Ionic React / React Native to develop a mobile app. I want to use Leaflet to display the static map and markers. If the user click the markers, I want to open the coordinate in Google Map / Waze / any native map application then use that native app to navigate the user into the marker.
Is there a way to open the marked place into native map apps?
Google Map provides cross-platform deep linking universal URLs. If the native Google Map app is installed. It will open with that app, otherwise, use the default web browser installed on user's device.
You can use React Native Linking API to dynamically link to a specific location.
import { Linking, Alert } from "react-native";
async function openWithGoogleMap() {
/** Google Map API offers different URL to deep link to various locatioon and map ressources.
* Check their docs - https://developers.google.com/maps/documentation/urls/get-started
*/
const url =
"https://www.google.com/maps/search/?api=1&query=47.5951518%2C-122.3316393";
const supported = await Linking.canOpenURL(url);
if (supported) {
// Opening the link with some app, if the URL scheme is "http" the web link should be opened
// by some browser in the mobile
await Linking.openURL(url);
} else {
Alert.alert(`Don't know how to open this URL: ${url}`);
}
}
I am trying to generate pdf and trying to download the same generated pdf in React Native Expo. I am not able to find any solution that lets me store file directly in my phone memory.The only solution i am getting is using expo-share share the generated pdf . Is there any way to do it ?
This is what my SavePDF functions look like
const SavePDF = async()=> {
const file = await printToFileAsync({
html: "Hello World",
base64: false,
})
await shareAsync(file.uri);
}
am using React Native Expo and I was browsing the web to find a way to download assets, and files to my react native project and came across with this post How to Download image in react native
When the user clicks the download button I want assets/files to be downloaded and stored inside the app not directly on the user's phone. I mean I don't want the users to view the downloaded files or delete them manually.
I just want the downloaded assets/files to be accessible by the React Native app. Am doing this to make the app work offline.
Once the users downloaded the assets/files, the app can use the downloaded assets/files. How can I accomplish that?
Thank you in advance!
If you are using expo managed workflow, then rn-fetch-blob will not work for you.
In that case, Expo File System is probably your way to go.
Firstly, install expo-file-system. See this
Next, for saving files and not letting users delete them manually, store them inside the cache-directory like this
import * as FileSystem from 'expo-file-system';
const downloadAssets = async () => {
let name = "Samplefile.jpg";
const result = FileSystem.createDownloadResumable(
url_Of_the_File_You_Want_to_Download,
FileSystem.cacheDirectory + name
);
const response = await result.downloadAsync();
if (response.status === 200) {
// File successfully saved
} else {
// Some error
}
};
To access this file in your app simple execute this function
import * as FileSystem from 'expo-file-system';
const getFiles = async () => {
const CacheDir = await FileSystem.readDirectoryAsync(
FileSystem.cacheDirectory
);
console.log(CacheDir); //Files are stored here
};
I have some problem about my react native app. I would just like to ask if are there any ways that RNFetchBlob will accept a dataURI from documentPicker instead of a web URL? I just need to convert the selected file from document picker to base64. Could anyone help me?
RNFetchBlob.config({ fileCache: true })
.fetch("GET", 'http://www.africau.edu/images/default/sample.pdf') // Replace the web URL to dataURI from documentPicker
// the image is now dowloaded to device's storage
.then(resp => {
// the image path you can use it directly with Image component
// return resp.readFile("base64");
return resp.readFile("base64");
}).then(base64Data => {
console.log('base64Data', base64Data);
});
If you are not particularly looking for base64 encoded but want to obtain the actual blob you can use fetch without going through base64 bridge
const fetchResponse = await fetch(at[i].uri);
const blob = await fetchResponse.blob();
How would one implement custom url encoding for React Native's Linking API for IOS?
I am using React-Native's Linking API to allow users to open simple http/https hyperlinks within my app using the basic example from the documentation:
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(url);
} else {
console.log('Don\'t know how to open URI: ' + url);
}
});
On Android, the url being passed into Linking.openURL(url); is the same as what shows up in the browser bar when the link is opened. However, on IOS, the url is being encoded. Readability of the url aside, the main problem I'm having is the conversion of the hash character '#' to '%23' which is causing the link to not work properly. I would like to either move responsibility for url encoding to the React Native code prior to calling Linking.openURL(); or at least make an exception for the '#' character.