I have some questions about the performance of a react native app.
I'm developing a react native app (RN 0.62.2). I'm testing on various IOS simulators as well as on a real device (iPhone 7, ios 13.3).
I'm mostly using the simulator because it's the fastest way to check the output of the code, but when I'm testing on my iPhone 7, I see some performance issues.
First of all: I'm using react navigation. When I open the perf monitor on the simulator and I navigate to a new screen (in the same stack navigator), the JS thread drops with about 6-8 frames (from 60 to 52-54). On the real device with 18-20 frames (from 60 to 40-42). I navigate to the exact same screen.
Secondly, I load local images through require. On the simulator, they appear almost instantly. On the real device, it takes some time before they appear. For example, I have a screen with a background image. On the simulator, it's instantly shown. On the real device however, it takes about a second to load.
I'm using a lot of animations in my app. I'm using reanimated to run the animations on the UI thread. In the simulator, they all work very smoothly, but on the real device, it seems like they are having some issues. They're not that smooth as on the simulator.
Another thing: when entering some text in a textinput (text is stored in a useState-variable while typing through onChangeText={v => setValue(v)}. Frame drops about 6-8 frames on the simulator, but again around 18-20 frames on the real device.
My question now is: what could possibly be the reason for this difference in performance? I've come up with some possible answers, is one (or more of them) correct?
Reason 1: metro server
I'm testing on the real device, so the react native code is still on my laptop. The app is not running on my phone yet, so all request go through the cable which connects my phone to my laptop. This results in some lag.
Reason 2: old device
My iphone 7 is old. I'm running ios 13.3 but the iphone is almost 4 years old. However, when I test on an iphone 7 simulator (ios 11.4), it all works smoothly.
Also I noticed something weird: running the same app in the simulator consumes about the double of RAM memory then on the real device. In the perf monitor on the simulator, when I open the app, or I do some actions, there is more RAM memory used than on the real device (around 30-40 mb, sometimes around 70-80 mb, depeding on the simulator type and ios version).
I have not tested it with a release build yet because my app is far from done. Is there a performance difference between an app testing through the metro server and a release build?
Edit:
I've tested the release build instead of the debug build on my real device. I see a better performance than in the debug build, so that's good. The problem now is: I can't check the perf monitor. Does someone know a good tool to check the performance of a release build?