React native Linking is not working properly - react-native

I am trying to send email from my application,
This is the code:
sharePhraseToGmail = async () => {
let url = `mailto:xxx#gmail.com`
const query = qs.stringify({
subject:'xxx',
body:'xxxx',
})
if (query.length) {
url += `?${query}`;
}
try {
Linking.openURL(url)
} catch (e) {
console.log('--------e',e)
}
}
No matter what I pass, wrong or real email it gives me this error
Possible Unhandled Promise Rejection (id: 1):
Error: Unable to open URL: mailto:xxx#gmail.com?subject=xxx&body=xxxx
Or : Add mailto in info.plist
I followed the second error and updated my info.plist like this:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>mailto</string>
</array>
I also tried to use libraries such as react-native-mail and react-native-email but I got the same error on both of them.
Any suggestions on why is this happening?
React native version:0.63.4
Emulator : Iphone 11

Related

React Native Fetch Blob/React Native Blob Util Fail in Production but not in Developer time

I am trying to download a pdf generated through an own api that worked normally for me until yesterday, since then it has stopped working without any modification. Reviewing in developer mode through the metro everything seems to work correctly without any problems (I download the pdf normally), but when deploying the application in the playstore it closes unexpectedly, leaving me without knowing why this happens.
First I was using the React Native Fetch Blob, then I used React Native Blob Util hoping it would solve the problem but it keeps happening. Do you guys have any ideas for why does this happen?
The PDF file download this function:
const generarReciboPdf = async (datosDeuda:FormularioScreenParams,formaPago:ReactText,nroCheque?:string) =>{
const{config,fs} = ReactNativeBlobUtil
if (formaPago === 4 && (nroCheque == ""|| undefined)) {
return console.log('debe llenar todos los campos');
}
const { DownloadDir } = fs.dirs;
const token = await AsyncStorage.getItem('token');
let datosDeudaCompleto= {
...datosDeuda,
forma_pago:formaPago,
nro_cheque:nroCheque
}
let url = 'https://sys.arco.com.py/api/appRecibos/generarReciboPdf/'+JSON.stringify(datosDeudaCompleto)
// return console.log(url);
const options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true, // true will use native manager and be shown on notification bar.
notification: true,
mime:'application/pdf',
path: `${DownloadDir}/recibo_${datosDeuda.mes_deuda.replace(/ /g, "")}_${datosDeuda.razon_social.replace(/ /g, "")}.pdf`,
description: 'Downloading.',
},
};
config(options).fetch('GET', url,{Authorization :'Bearer '+token}).then((res) => {
console.log('se imprimio correctamte el pdf');
setErrorPdf(1)
}).catch((error)=>{
console.log(error);
setErrorPdf(-1);
});
}
Also, this error appears in Play Console: "PlayConsole Error Image".
PlayConsole Error Image

Playing an audio file with source => {uri: 'remote-file-path'} not working - React Native (expo)

I keep getting this error when i try to play an audio from my local backend or an already uploaded audio from a site.
No matter what file format, this is what I get and this only happens with ios
error: Possible Unhandled Promise Rejection (id: 0): Error: The server is not correctly configured. - The AVPlayerItem instance has failed with the error code -11850 and domain "AVFoundationErrorDomain". Error: The server is not correctly configured. - The AVPlayerItem instance has failed with the error code -11850 and domain "AVFoundationErrorDomain".
error image
const player = new Audio.Sound();
player.loadAsync({ uri: url }, initialStatus).then(() => {
player.playAsync().then((playbackStatus) => {
if (playbackStatus.error) {
handlePlaybackError(playbackStatus.error);
}
});
});
After adding more error handling, I found out the error comes from loadAsync and it only happens when I try to play an audio from my local backend server. (ex: http://127.0.0.1:8000/media/audios/2021/08/08/27/21/filename.mp4)
It would be really great if I could get help on this, thanks in advance!
Update: Provided more code
So I found out that the that warning was being generated and preventing my audio files from playing because they are stored in my local server and for some reason the expo Audio.Sound object had an issue loading them, so I had to install expo-file-system, use the FileSystem to read download the file and use the uri produced from the download.
Example:
import * as FileSystem from 'expo-file-system';
const splitUrl = url.split('/');
const lastItem = splitUrl[splitUrl.length - 1];
const { uri } = await FileSystem.downloadAsync(
url,
FileSystem.documentDirectory + lastItem
);
const source = { uri: uri }; //the source you provide to the loadAsync() method
loadAsync() returns a Promise, so you have to await it.
If this is not the problem you have to provide more code, please.
Here's the documentation, so use it like this:
const sound = new Audio.Sound();
try {
await sound.loadAsync(require('./assets/sounds/hello.mp3'));
await sound.playAsync();
// Your sound is playing!
// Don't forget to unload the sound from memory
// when you are done using the Sound object
await sound.unloadAsync();
} catch (error) {
// An error occurred!
}
And here's a simple snack I made, it works for me, you might want to consider error handling using try-catch:
Snack example

React Native with axios - Network error calling localhost with self signed https endpoint

I created service in Visual Studio with Conveyor extension to make it accessible in local network. I installed certificate on my Android device so there is green padlock when calling it in browser and service works fine.
However when calling it from React Native app with axios then i get Network error.
That's my code:
const fetchData = async () => {
console.log('url', `${Settings.API_URL}/location/GetDataByMyIp`);
try {
const result = await axios(
`${Settings.API_URL}/location/GetDataByMyIp`,
);
console.log('result', result);
ipData = {
city: result.data.city,
longitude: result.data.longitude,
latitude: result.data.latitude,
};
} catch (e) {
console.log('error', e);
}
};
await fetchData();
In console i see:
url https://192.168.1.14:45455/api/location/GetDataByMyIp
error Error: Network Error
at createError (path_to_app\node_modules\axios\lib\core\createError.js:16)
at EventTarget.handleError (path_to_app\node_modules\axios\lib\adapters\xhr.js:83)
at EventTarget.dispatchEvent (path_to_app\node_modules\event-target-shim\dist\event-target-shim.js:818)
at EventTarget.setReadyState (path_to_app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)
at EventTarget.__didCompleteResponse (path_to_app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)
at path_to_app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502
at RCTDeviceEventEmitter.emit (path_to_app\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
at MessageQueue.__callFunction (path_to_app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)
at path_to_app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112
at MessageQueue.__guard (path_to_app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373)
I tried to add this line to AndroidManifest.xml application tag but still have the error
android:usesCleartextTraffic="true"
Some solutions say about adding as 2nd parameter to axios, but it doesn't work with React Native.
new https.Agent({
rejectUnauthorized: false,
});
I tried to call some other service from the internet and then error was gone.
Is there some solution to this? I haven't found anything more. My last idea is to host service on Azure so I'll have properly signed SSL, but i guess it has to be a way to run it locally.
Edit: It works through http

Twilio chat React Native SDK Error: Can't add command

I'm using the SDK client in React Native to add chat to my app using Twilio Programmable Chat. The code to send a message is below:
client.sendMessage(message.text)
.catch(err => console.log(err));
I am getting an error back in my console which says:
Error: Can't add command: (status: 0, code: 0)
at session.js:173
at tryCallOne (core.js:37)
at core.js:123
at JSTimers.js:294
at _callTimer (JSTimers.js:151)
at _callImmediatesPass (JSTimers.js:199)
at Object.callImmediates (JSTimers.js:463)
at MessageQueue.__callImmediates (MessageQueue.js:316)
at MessageQueue.js:136
at MessageQueue.__guard (MessageQueue.js:291)
I'm catching it so it's not causing any problems in my actual app but it would be great to understand that's causing it and how to fix it.
Note: The message is sending and all functionality looks to be fine.
Thanks for any help
I was able to get rid of this issue on my end. It was due to an improper Promise chain with my leaveChannel() method. Since resolving this I have not had any issues with the add command error, which I believe was caused by the room not properly disconnecting. Below is my method for disconnect if it helps. Let me know how you make out.
leaveChannel() {
return new Promise((resolve, reject) => {
if (this.channel) {
this.channel.removeAllListeners();
this.channel
.leave()
.then((leftChannel: Channel) => {
console.log("Left chat channel: " + leftChannel.uniqueName);
store.dispatch(chatSetState(ConnectionStateEnum.DISCONNECTED));
resolve();
})
.catch((error: any) => {
console.log("leaveChannel(): ", error);
this.channel = null;
reject(error);
});
} else {
console.log("Not currently in a channel.");
}
});}

React Native Fetch Request Fails

I am using the react native Fetch API to get JSON data from https://api.github.com/users/{username} but the request fails with the following error message.
"TypeError: Network request failed {stack: (...), message: 'Network
request failed'}".
I believe for https, sometimes you get NSURLAuthenticationChallenge. I am not sure how to implement this. Anyone have any idea about this?
If you are using iOs you may need to do the following:
You must enable your AppTransportSecurity
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
or
in the Info.plist.
For Android ensure that you have added permission to use INTERNET in the AndroidManifest.xml.
<uses-permission android:name="android.permission.INTERNET" />
Can you provide an snippet of your fetch code?
Generally, a fetch statement is written like:
fetch(requestURL)
.then( (response) => response.json() )
.then( (data) => {
this.setState({data: data});
})
.catch( (error) => console.log(error) )
.done();
Catching the error will allow the program to proceed without crashing.
In my case the issue wasn't in the code. I started emulator when had no network. After I logged in to wifi point network on emulator still wasn't functioning. I restarted emulator - all worked.
So:
Connect to network.
Restart emulator.
If it doesn't help, then check your code.
I was also having this issue React Native Fetch Request Fails very frequently.
In my case the response from the API call was around 5kb , so i removed the unnecessary data from the API response and reduced the result size to around 1kb and all started working.
So try to limit the data you are requesting from the API.
Have you tried XMLHttpRequest?
As demonstrated in the doc, https is supported by XMLHttpRequest:
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'https://mywebsite.com/endpoint.php');
request.send();