React native app can not play mp3 after disconnecting from computer - react-native

I save an mp3 file named 'sound1.mp3' in assets folder.
In App.js, I call:
let sound1 = new Sound(requires('./assets/sound1.mp3'), Sound.MAIN_BUNDLE, (error) => {});
sound1.play((ok) => {});
It worked. But when I disconnect my android phone from my computer and restart the app, it can not play mp3 file.
Please help me.

When we disconnect from the development server, It sometimes results in unexpected behavior. Create an APK and try with that.

Related

Expo, how to save file from app directory to local directory

Im new to React Native and im using Expo to create an iOS and Android app. All I want to do is save a file that is stored in the application to the users device.
Using downloadAsync and shareAsync I can download from a remote url and save it but I can not download or just share a local file stored in in the apps directory.
Ive tried
await shareAsync('file://./manuals/mypdf.pdf');
await shareAsync('./manuals/mypdf.pdf');
await shareAsync(require('./manuals/mypdf.pdf'));
and I get the error
[Unhandled promise rejection: Error: You don't have access to provided file.] or the app just crashes
Use loadAsync to download asset data to a local file in the device's cache directory. After that the asset file is accessible like any other file.
const [{ localUri }] = await Asset.loadAsync(require('./manuals/mypdf.pdf'));

react native file system, fs, cannot find taken pictures

In my ReactNative application I am using "react-native-vision-camera": "^2.13.5" for taking pictures.
After the picture is taken and uploaded, I want to delete it from the device, but the RNFS (react-native-fs) cannot find the file by the given path on iOS and Android devicess:
I get the error
iOS ; [Error: ENOENT: no such file or directory, open
'/private/var/mobile/Containers/Data/Application/1BB2256A-ED83-407D-9C76-07431268779B/tmp/ReactNative/CE2FA429-76C8-4BD9-925A-BED09B0B77BB.jpeg']
Android ; [Error: File does not exist]
The path in Android is like: /data/user/0/packagename/cache/mrousavy2423256141715663083.jpg
const photo = await camera.current.takePhoto(); // camera: React.RefObject<Camera>
const task = storage().ref(<ref>).putFile(photo.path)
const result = await task.then(); // Firebase Storage can read and upload the photo
RNFS.stat(photo.path) // <-- Error: The file “CE2FA429-76C8-4BD9-925A-BED09B0B77BB.jpeg” couldn’t be opened because there is no such file.
RNFS.unlink(photo.path) // <-- [Error: ENOENT: no such file or directory, open '/private/var/mobile/Containers/Data/Application/1BB2256A-ED83-407D-9C76-07431268779B/tmp/ReactNative/CE2FA429-76C8-4BD9-925A-BED09B0B77BB.jpeg']
// Prepending file:// Does not work too
RNFS.unlink(`file://${photo.path}`)
RNFS.stat(`file://${photo.path}`)
Is it because of access permission that react-native-fs needs?
How does the firebase storage have access to the photo?
Is the path a real temp folder that gets cleared after the app is closed?
why react-native-vision-camera saves media there by default?
Do I really need to remove that media manually or does it get removed?
env:
"react-native": "0.68.2",
"react-native-fs": "^2.20.0",
"react-native-vision-camera": "^2.13.5",
physical device : iPhone 8 Plus with iOS 15.5
There is no need to delete the file as the photos are being stored in a temporary directory. It will be deleted when the app closes.
https://mrousavy.com/react-native-vision-camera/docs/api/interfaces/PhotoFile
Instead of calling RNFS.unlink(photo.path) try RNFS.unlink(photo.uri). The react-native-vision-camera API outputs a File object with a URI not a path.

React-Native with FTP

Is it possible to download/upload files and folders from FTP servers using react native? If yes, react-native-ftp package is the only one that I found which does not seem to work. Did anyone come across such a scenario?
After doing a lot of research, it seems that react-native-ftp is the only package that works, and to download, use the below code:
FTP.downloadFile(/--ftp-file-path, RNFS.ExternalStorageDirectoryPath).then((res) => {console.log("res is", res) })
FYI - RNFS.ExternalStorageDirectoryPath = This is react-native-fs to access your phone's directory and also the path where your files will be downloaded. You can view this in your phone's internal storage.

react-native-sound does not work on ios emulator

the below code works fine on android and the sound is played....however on ios simulator it does not.
Ive added my sound file to Xcode project, and no error is caught.....when I step through code, it runs this.sound.play() successfully and callback function is called...however you dont hear any sound.
import Sound from 'react-native-sound';
sound = new Sound('sound.mp3');
try {
this.sound.setCategory('Playback');
this.sound.play(() => {
this.sound.stop();
this.sound.release();
});
} catch (e) {
console.log('cannot play the sound file', e);
}
If you have the newest Xcode 11.6, did you try messing around with the settings in
Simulator > I/O > Audio Output
(if it's an older xcode, maybe Simulator > Hardware > Audio Output)?
Where you have put the sound file, please note that the sound clip files should be placed under the directory android/app/src/main/res/raw for android and For iOS, Add your sounds to Resources in Xcode project

Open file downloaded within React-Native app with another app

I am trying to open files (images, pdfs, videos, etc) downloaded with my React-Native app from my server.
So I'm using RNFetchBlob to download the file then I'm doing the following depending if it's an iOS or Android device:
openFile = (item, path) => {
if (Platform.OS === 'ios') {
RNFetchBlob.ios.previewDocument(path)
} else {
// I've tried setting a real mimetype instead of / but it still doesn't work
RNFetchBlob.android.actionViewIntent(path, '/')
}
}
On iOS it works as expected but nothing happens on Android even though I have apps that can read images, pdfs or videos on the device I'm testing on.
Any ideas why this doesn't work or how I could make the same thing with another library ?
Found out the reason for this, it's a know bug of the library and has a PR waiting to be merged (no timeframe from the repo owner).
Here is the link to the PR: https://github.com/joltup/rn-fetch-blob/pull/317
So basically this needs to be added to line 122-123 of file android/src/main/java/com/RNFetchBlob/RNFetchBlob.java:
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
If above is not working do to the below step:
overwrite the 121 line in android/src/main/java/com/RNFetchBlob/RNFetchBlob.java:
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); // 121 line
intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); // 122 line