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);
}
Related
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();
Hi i was searching for a package for rendering an epub file in react native and also i found this
but i surly believe this package is not managing and developing anymore
so do you know another way to render an epub file in react-native ?
one way you can use open epub with webview , thats a little complicate ,
but another way use some epubjs-rn packge , check package , some resource of it is different and updater than futurepress/epubjs-rn ,
I Use #ottofeller/epubjs-rn , that compatible with react-native 0.62.2
You can use epubjs-rn
Example
import { Epub } from 'epubjs-rn';
...
<Epub src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
flow={"paginated"} />
Official epubjs-rn github homepage
I was also trying to render Epub in react native app
then I got mainly packages like
epubjs
epub-rn
and a lot number of copies of both on them but any on them is not working with our latest code
then I got the working package for epub rendering into react-native name
epubjs-rn-62
to install it run the command
npm i epubjs-rn-62
it's working fine with 62,63 and more version of react
also no need to link in the current version of react native
usage
import { Epub } from 'epubjs-rn';
Then you can add the reader element in your code:
<Epub src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
flow={"paginated"} />
to use with streamer
import { Epub, Streamer } from "epubjs-rn";
let streamer = new Streamer();
streamer.start("8899")
.then((origin) => {
console.log("Served from:", origin)
return this.streamer.get("https://s3.amazonaws.com/epubjs/books/moby-dick.epub");
})
.then((src) => {
console.log("Loading from:", src);
return this.setState({src});
});
There is no epub-creator in react-native so I created one react-native-epub-creator check it out and let me know
I'm trying to implement google's speech-to-text on a react native app but I can't find an example or documentation about it, I'm fairly new to react-native so I'm kinda lost, there's a sample using node.js on google official docs and I'm trying to 'copy' it to react-native but I didn't had any success.
Here's the Node.js example:
async function main() {
// Imports the Google Cloud client library
const speech = require('#google-cloud/speech');
const fs = require('fs');
// Creates a client
const client = new speech.SpeechClient();
// The name of the audio file to transcribe
const fileName = './resources/audio.raw';
// Reads a local audio file and converts it to base64
const file = fs.readFileSync(fileName);
const audioBytes = file.toString('base64');
// The audio file's encoding, sample rate in hertz, and BCP-47 language code
const audio = {
content: audioBytes,
};
const config = {
encoding: 'LINEAR16',
sampleRateHertz: 16000,
languageCode: 'en-US',
};
const request = {
audio: audio,
config: config,
};
// Detects speech in the audio file
const [response] = await client.recognize(request);
const transcription = response.results
.map(result => result.alternatives[0].transcript)
.join('\n');
console.log(`Transcription: ${transcription}`);
}
main().catch(console.error);
First of all, the 'fs' package doesn't work on react-native, so I had to use 'react-native-fs' which has different functions
Second, should I really use the 'require' to call the speech package? I guess react-native would use 'import' instead, right?
Any tips on how can I implement it on react-native? Thanks!
You can't run #google-cloud/speech on react native as RN runs on JV environment and the library (#google-cloud/speech) runs on nodejs environment. You could create an api and deploy it or else use this library react-native-google-speech-api
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