I created an app with expo where some report in xlsx is generated in a server and then downloaded to the Download folder in Android. I want to "open" the file after it was downloaded by using another app with the open with native modal. I tried the following:
static openFile = async (asset, contentType) => {
return IntentLauncher.startActivityAsync('android.intent.action.VIEW', {
data: asset.uri,
type: contentType,
});
};
(contentType is currently receiving '*/*') but it fails everytime with the following error:
Encountered an exception while calling native method: Exception occurred while executing exported method startActivity on module ExpoIntentLauncher: file:///storage/emulated/0/Download/report-10010654-20210304061930069176.xlsx exposed beyond app through Intent.getData()
One solution is using the Sharing library, but I'm not overjoyed with it. Is there any way to make it work without ejecting from the managed flow?
I had a similar problem a month ago, I think it happens when startActivityAsync is called multiple times, my solution was to wrap my code in a try statement:
const data = await getContentUriAsync(uri)
try {
await startActivityAsync('android.intent.action.VIEW', { data, flags: 1 })
} catch (error) {}
I'm currently building a simple app in React Native 0.62.2 for Android. I've been having some trouble with axios 0.19.2 (or even the fetch API) when trying to upload images to my API (which is written in node.js/express). The POST request is formulated as follows:
// UserService.js
export const postNewUser = async (newUser) => {
try {
const photo = {
uri: newUser.avatar.uri,
type: 'image/jpg',
name: newUser.avatar.fileName,
};
const formData = new FormData();
Object.keys(newUser).forEach(key => formData.append(key, newUser[key]));
formData.append('avatar', photo);
const response = await api.post('/users', formData);
return response.data;
} catch (err) {
console.log('TRACE error posting user: ', err);
return;
}
}
Here, the property newUser.avatar.uri is set by means of an image picker library, namely #react-native-image-picker 1.6.1. It gives me a NetworkError whenever I append the photo variable into the FormData. Setting the URI manually with some random image from the web results in the same error. Debbuging it from the Browser, it prints out some sort of stack trace like this one:
TRACE error posting user: Error: Network Error
at createError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\core\createError.js:16)
at EventTarget.handleError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\adapters\xhr.js:83)
at EventTarget.dispatchEvent (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\event-target-shim\dist\event-target-shim.js:818)
at EventTarget.setReadyState (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)
at EventTarget.__didCompleteResponse (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)
at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502
at RCTDeviceEventEmitter.emit (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
at MessageQueue.__callFunction (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)
at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112
at MessageQueue.__guard (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373)
If I, for example, comment out the line formData.append('avatar', photo); it works perfectly, i.e., my API receives the request accordingly. So I think this might not be a CORS-related issue. Also, other requests, such as GETs and even other POSTs are working just fine.
I know there's a bunch of other related posts here in SO and also in GitHub, some of them related to the exact same issue. But none of the solutions I found worked out for me.
In case someone wants to check out how the routes in my API are implemented just hit me up and I will provide the code here.
Thanks in advance for any help you might give me!
I'm having the same issue, using the formData but without the file upload it works just fine. I did a lot of research and what I've found is an old issue that still's active in the react native repo. The solution that's suggested is using a library called rn-fetch-blob but I couln't implement it on my project. If you can make it work share your work around please.
Framework: Appium + Protractor + Cucumber + Typescript using POM model
I have the protractor framework for appium designed in POM structure
The initial page of the app will identify the locators calling in a different ts file and the functions such as tap, isDisplayed calling it in a different ts file.
But once it passes the initial pages in the app,say 3 pages. the locators are not identified which are calling other function, but they are identified when they are passed directly ( like driver.findelements(by.css('')).click ) this works.
The problem is I can't pass this code like this within the step definition .ts file always as it is not a good structure
Note: By the way, this script was working fine earlier.
tried to test using a different workaround, like building the binary again, trying to run on android and ios application, downgrading or upgrading the node packages. But nothing solved the problem. has anyone faced this kind of issue. Any suggestions or solutions for this problem, please?
Code which works: (Passing the locators directly in the function, rather than from the onboarding.ts file will work)
Then(/^VIC should be selected from the state or territory drop down$/, async () => {
await browser.driver.findElement(by.css('button[sp-automation-id=\'select-state-toggle\']')).click();
await browser.driver.findElement(by.css('page-action-sheet label[sp-automation-id=\'action-sheet-option-VIC\']')).click(); });
Code which does not work: (Onboarding.ts file contains the locators defined for State and VIC same as the above code block. But reading from there it does not work.)
Then(/^VIC should be selected from the state or territory drop down$/, async () => {
await AutomationAction.tap(Onboarding.State);
await AutomationAction.tap(Onboarding.VIC); });
Code which works (The below code is called before the above code block, it's a page before calling the above pages)
Then(/^I enter the mobile number and tap next button on the your mobile number screen$/, async () => {
MobileNo = AutomationAction.getMobileNumber("mobileNumber");
SameMobileNo = MobileNo;
await AutomationAction.sendKeyText(Onboarding.InputMobileNo,MobileNo);
await AutomationAction.tap(Onboarding.Next_BTN_YourMobileNumber);
});
Because of the page where it is failing the automation thinks its as non-angular page and the locators used to fail or not locate them when calling it in a different function. When I introduced browser.ignoreSycnhronization=true to make Angular sync for non-angular apps/pages it worked.
I am trying to run my app on Android (One plus 6t). This was working fine before making a call to firebase but as soon as I add the line onSend={Fire.shared.send} to Chat.js, the app crashes. The logs just show Uncaught Error: Error calling JSTimers.CallTimers. Haven't seen this error anywhere else. Does anyone know what's the issue?
Here's the snack: https://snack.expo.io/#adititipnis/community
You can get this error if you omit an await call when sending JS objects to the native side, so the promise gets passed rather than the result.
I'm using the typical async sleep pattern that wraps setTimeout, so that may also be a factor in the way this error presents itself, I'm not entirely sure.
This is untested, but something like this should reproduce it:
// some async func
const asyncGetResult = async () => {
await sleep(17);
// etc.
return Promise.resolve(result);
};
// this should cause the error:
MyNativeComponent.nativeMethod({
result: asyncFunc() // <- missing 'await'
});
// this should not cause the error:
MyNativeComponent.nativeMethod({
result: await asyncFunc()
});
This can be difficult to track down if you don't know what you're looking for. I resorted to process of elimination, reverting changes file by file until I found the offending line. Hopefully this saves someone some time.
I am building a react-native app that I recently moved to expo. The app seems to display the expected screen, but before it completes, I am receiving the following error message: console.error: "There was a problem sending log messages to your development environment, {"name": "Error"}". When I view the expo browser screen I see the following stack trace when I click on the device:
node_modules/expo/build/logs/LogSerialization.js:146:14 in _captureConsoleStackTrace
node_modules/expo/build/logs/LogSerialization.js:41:24 in Object.serializeLogDataAsync$
node_modules/regenerator-runtime/runtime.js:62:39 in tryCatch
node_modules/regenerator-runtime/runtime.js:288:21 in Generator.invoke [as _invoke]
node_modules/regenerator-runtime/runtime.js:114:20 in Generator.prototype.(anonymous
node_modules/regenerator-runtime/runtime.js:62:39 in tryCatch
node_modules/regenerator-runtime/runtime.js:152:19 in invoke
node_modules/regenerator-runtime/runtime.js:187:10 in <unknown>
node_modules/promise/setimmediate/core.js:45:4 in tryCallTwo
node_modules/promise/setimmediate/core.js:200:12 in doResolve
Here is a screenshot of the error:
What does this error mean? I found some doc referring to removing console.log statements and removed the ones I had but that did not help.
This is due to the fact that the React native console logger CANNOT parse the JSON object coming from Axios.
I can guarantee that anyone who is having this error is not PARSING the JSON object before logging it to the console.
CODE THAT WILL GIVE THIS ERROR:
Axios.post(URL).then(function (response)
{
console.log("POST RESPONSE: "+response);
}
CODE THAT FIXES THIS ERROR:
Axios.post(URL).then(function (response)
{
console.log("POST RESPONSE: "+JSON.stringify(response));
}
I ran into this weird error as well this morning. I am developing in react native with Expo Client for an app I'm building with the popular MERN stack (mongoDB, Express, React Native and Node.js). I am mentioning that because I use a lot, I mean A LOT of console logs in the backend and this didn't cause me any problem thus far. So in my case, I was not sure if this error originated from any console.log I was using.
I checked the expo debugger's stacktrace in the console (in port 19001), because the red screen doesn't provide much info on the origin of the error (a lot of <unknown> in place of functions) and I saw that it had something to do with my actions functions and the payload I was sending to my reducer when I performed a specific action that was communicating with the backend. The backend's response was formatted like this:
payload: {
config: {
.
.
.
}
data: { the only part that i needed... }
headers: {
.
.
.
}
..other stuff from the response..
There's not much to notice above, but this:
The actual paylaod I was interested in is under the prop key data and was the only thing I needed from the response. BUT, in my ignorance I was sending everything to my reducer. So what I am saying is that I was sending a really big object as payload and I only needed a part of it. So when I did some destructuring and kept the data that I mentioned above, the error went away.
In conclusion, for others that may stumble across this "error" which isn't actually an error, because the app doesn't crash or anything, since you can dismiss the window and the app goes on, when you do some fetching from the server, make sure you keep only the data and not the whole response object, along with the meta from the call. It seems that redux-logger throws this because it doesn't like the structure of it.
To simplify all the answers above, This issue only happens when you log an object which is too big for console to display. So when ever logging the response from an API or Server be sure to add JSON.stringify(result).
This resolved the issue for me.
I have also ran into this issue but due to other causes.
BACKGROUND:
Project stack (Just what is important to the error) :
expo: ^34.0.1
react-native: SDK 34
react-navigation: 4.0.5
react-navigation-drawer: ^2.2.1
In this project I was not using react-redux or axios I'm actually using graphql , #apollo/react-hooks and apollo-boost to take care of network requests and local state management.
ANSWER:
As you can see in the BACKGROUND, I am using react-navigation. I was creating a drawer navigator with createDrawerNavigator according to the React Navigation API
I wanted to use the contentComponent property of the DrawerNavigatorConfig to create custom DrawerNavigatorItems.
I put and anonymous arrow function in the contentComponent property with the only argument of props.
THIS CAUSED THE ERROR:
I placed a console.log() inside the anonymous arrow function I mentioned above
I received the error on my iOS simulator that read:
`console.error: "There was a problem sending log messages to your development environment"
See my code below:
import {createDrawerNavigator, DrawerNavigatorItems} from "react-navigation-drawer";
import ProfileNavigator from "../Profile/Profile";
import Colors from "../../constants/colors";
import {AsyncStorage, Button, SafeAreaView, View} from "react-native";
import React from "react";
import {Logout} from "../Common";
import HomeNavigator from "../Home/Home";
const AppDrawerNavigator = createDrawerNavigator(
{
Profile: ProfileNavigator
},
{
contentOptions: {
activeTintColor: Colors.primary
},
contentComponent: props => {
console.log(props) // THIS IS THE ISSUE CAUSING THE ERROR!!!!!!
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerNavigatorItems {...props} />
<Button
title="Logout"
color={Colors.primary}
onPress={Logout}
/>
</SafeAreaView>
</View>
)
},
drawerType: 'slide',
unmountInactiveRoutes: true
}
)
export default AppDrawerNavigator
I got this error consistently when dumping the result of a fetch call to console like: console.log(result).
Once I used:
console.log(JSON.stringify(result))
the problem went away.
I had the same issue today and the fix was to add response.json()
fetch(endpoint, {
method: 'GET',
headers: {
Accept: 'application/json',
}
})
.then(response => response.json())
.then(response => {
console.log('response', response)
})
This is the problem that comes with console.log (In VSCode, Ctrl + Shift + F to search all then type console.log to find where it is).
Convert from
console.log(error.config);
to
console.log(JSON.stringify(error.config, null, 2));
(null, 2 is to keep the print pretty)
Objects being sent to console.log are causing the red screen. As others noted you need to stringify all objects.
For those who don't have time to update every console.log in their app, simply do a global replace of console.log with a new function name (we used global.ourLog) and use this code to look at every param and stringify if an object. This function was put in the first line of our App.js of our expo app.
// this routine corrects the red screen
// of death with expo logging
// by taking objects that are logged and ensuring
// they are converted to strings
global.ourLog = function() {
let s = ''
for ( let a of arguments ) {
if ( typeof a === 'string') {
s += a
} else if ( typeof a === 'number') {
s += a
} else {
s += JSON.stringify(a,null,2)
}
s += '\t'
}
console.log(s)
}
then use like any other console.log (or replace every console.log with that new function name).
global.ourLog( "a string", anObject, err)
Hope this helps someone, it saved us a ton of time.