I am currently working on a map project using React Native and Expo CLI. I am getting the markers data from firestore (data size is notably small, only around 15 markers), and when I render the map, the map works perfectly except that it is very slow, and I always receive this message for PayloadTooLargeError. After loading the maps, the whole app becomes unresponsive
PayloadTooLargeError: request entity too large
at readStream (C:\Users\user\AppData\Roaming\npm\node_modules\expo-cli\node_modules\raw-body\index.js:155:17)
at getRawBody (C:\Users\user\AppData\Roaming\npm\node_modules\expo-cli\node_modules\raw-body\index.js:108:12)
at read (C:\Users\user\AppData\Roaming\npm\node_modules\expo-cli\node_modules\body-parser\lib\read.js:77:3)
at jsonParser (C:\Users\user\AppData\Roaming\npm\node_modules\expo-cli\node_modules\body-parser\lib\types\json.js:135:5)
at call (root\node_modules\connect\index.js:239:7)
at next (root\node_modules\connect\index.js:183:5)
at remoteDevtoolsCorsMiddleware (C:\Users\user\AppData\Roaming\npm\node_modules\expo-cli\node_modules\#expo\dev-server\src\middleware\remoteDevtoolsCorsMiddleware.ts:31:3)
at call (root\node_modules\connect\index.js:239:7)
at next (root\node_modules\connect\index.js:183:5)
at serveStatic (root\node_modules\serve-static\index.js:75:16)
I've seen several solutions such as to set a limit in express js, however I did not add any code for the backend part and now I am confused on how to solve this problem.
Related
What am I doing?
A react-native-video component is loaded into the screen with a source uri from my nodejs backend.
What is the problem? (Only tried on android)
My backend is working fine and the video is loaded, but extremely slow. I checked on the backend that the video component is requesting a byte-range of 1MB every ~1s. On the other hand, if I request the video ranges with axios, it takes a couple of ms to request multiple byte-ranges.
When using a video stored locally on the android device, the loading time is almost instantaneous.
I tried the default android player as well as exoplayer with no difference in loading times.
I am trying all this with only one Video component and when I comment it the app runs smoothly
Possible solution:
I don't want to load the data directly from the Video component and I am trying now to download the byte-ranges and store them locally. Later I plan to load these byte-ranges into the Video component.
import AsyncStorage from '#react-native-async-storage/async-storage';
...
await AsyncStorage.setItem(video_name, JSON.stringify(byte_range_data_from_backend))
This works fine and I can read the byte_range_data_from_backend later with:
const data_from_item = await AsyncStorage.getItem(video_name)
What is my question?
How can I get these video_ranges uris to pass them to the Video component?
I think I need to create some kind of file and update the file content every time I receive a new byte-range. Meanwhile, I would like the video to be played using the already downloaded byte-ranges.
Is this possible or is not a good approach? What would be a possible way to load videos fast? It would be nice to download some byte-ranges before even trying to play the video, so that the waiting time for the user is minimal.
i don't know why in react native formData use to send data in {_parts} and that gives response for data field as this field is required with 400 error...
in backend it not able to receive in {_parts}
have anyone go through this issue please let me know I am stuck in this since 1week.. but working fine in web application using formData it simply goes like the given image
It works like that so its normal
React Native Form Data is used to send form data which also includes files so when using with FormData, set header 'Content-Type':'multipart/formdata' and i think you backend should understand this.
Refer the link below which is article to how send data in react native which also has backend code in Node and Express.
This Link
This Should get you idea clear.
I have a React Native app. It works well most of the time, but in our automated error detection framework, I can see some users infrequently run into a crash in React Native. There is a SIGABRT and a bunch of lines like this in the stack trace:
facebook::react::JSIExecutor::defaultTimeoutInvoker
I'm reasonably confident that the issue isn't directly in my application's code -- not only is the stacktrace all React Native stuff, but one of my coworkers triggered the error right after logging in a couple times, and I've never triggered this error myself despite testing the login flow many times.
Other websites make it seem like the error might actually be in a native module (but not React Native itself), but I wasn't able to figure out how to debug which native module it could be (the error doesn't happen often enough to easily just try disabling native modules one by one or anything like that).
Is there a way to get more information about what is actually causing a crash when the crash is in native code?
Thanks!
I've a strange problem in app I'm currently coding.
Here is the story of the app :
I've used React Native's ScrollView as a horizontal slider,
I display maximum 5~6 slides so I don't need to use FlatList for this.
Slides are actually records coming from the database so actually they are some dynamic components
and slider works as expected.
In every slide, there are also are some option buttons (Touchables) to send data to the server.
When the user presses a button app is opening a modal window to confirm and then sending some data to server.
Until now all is okay.
The Problem :
But in some slides of the slider I'm having a strange problem :
"console.log" commands and also network commands to send data to server is not working.
On the screen, I see Buttons(Touchables) are working and also the modal I've coded is also appearing & disappearing according to the state variables. But somehow console.log commands and also network commands are not even executed. Since I can't log anything it's also hard to understand the problem.
Is there anyone had a similar problem ?
Thanks
I've finally solved this problem, wanted to share my experience here.
In the app I was making post requests to the backend with Axios,
but I wasn't interested in the result of this post requests,
they were just log records so the result of backend calls weren't important.
So I didn't use any "await" command or didn't code anything like Promise.then / catch,
just posted with Axios and scrolled to another slide in my app without waiting for the backend.
After the 8th Axios post, app started not to work.
It seems like working .. touchable effects , modals even navigation works
but nothing else was working. Event console.log commands weren't working.
It's an interesting behavior of React Native , but I've understood the situation after reading the blog below :
https://medium.com/#rotemmiz/react-native-internals-a-wider-picture-part-1-messagequeue-js-thread-7894a7cba868#
Basic reason was that in the backend (NodeJS) I didn't return any response,
there wasn't any command like res.send("success") .. so frontend React Native app was waiting for the response.. event if I didn't use any await or Promise it was still trying to get the response and after the 7-8 call it was blocking the main thread.
If there is a way to configure Axios not to wait for the backend to answer for the post request, please write here.
i'm new in smartphones app developer, so i have this trouble, I'm trying to optimize my application by trying to store the cache images, however, by performing the save action on the device these are not shown, but it shows me in the debug that if they are stored but I can not see them, they are invisible...
Without Cache
Cache stored
With react-native you can't do this because when you require an image from a path, this path has to be a fixed string. You cannot do, for example:
const myImage = require(`/cache/${imageId}.png`);
Anyway, network images are already cached AFAIK.