I am trying to work around the shadow limitation on react native for android. Basically I need box shadows. My solution was to build a native ui component (java) with which I can create box shadows.
Now I ran into a weird bug. In a bare minimum app, with nothing but just some navigation and the box shadow ui components, the navigation is extremely laggy/ drops frames, when the app has to load the box shadow component.
The weird thing is. This just happens on some phones. From my tests so far I can say the native component runs smoothly on:
Fairphone 3 (Snapdragon),
Samsung galaxy s21 (Snapdragon) and
xiaomi redmi note 9 (Snapdragon)
The app drops frames on:
Samsung galax s41 (Mediatek)
Huawei mate 20 (Kirin)
Samsung galaxy s7 (Snapdragon)
Does anyone have an idea what the Problem could be? Does it perhaps have something to do with the CPU?
I am really gratefull for every tip and idea. I really have no idea what the Problem could be.
Thanks!
You have a problem of optimization.
Try to do a Profiling of your app on different phones to find the process that is more time consuming.
Related
I was trying to implement a WhatsApp like cancelling recording button.
Everything was working fine, all animations lauching correctly, start and stop recording too.
But after a few seconds (could be 10 seconds or 1 minute) pressing the gesture handler, the app freeze, all animations start to lags and FPS drop to 0.
After trying many things, I found out that it is linked with a Flatlist I have in my view. When this Flatlist is inverted, that is when everything crash.
Here is the link of the Snack https://snack.expo.dev/#mikelh997/animationtest
Just try to move the mic for at least 30 seconds on a physical device and you will see the app freeze
I am doing my tests on Android emulator and on Samsung S21 Ultra. On iOS everything seems to work fine
Thinking it was may be my packages version, I started a new project and put inside my view only a Flatlist with text items and my PanGestureHandler. All packages are up to date, even though the behavior is the same. If I remove "inverted" from my Flatlist, everything work fine.
I also tried to use Animated.Flatlist but no change (actually it's worse because inverted in Animated.Flatlist is not working correctly)
I also tried to reproduce it on Snack Expo, on my phone it crashes.
I noticed also that it is not linked to PanGestureHandler or Reanimated, because if I just create an animation with React Animated (with Animated.timing), and loop it, it does the same.
Edit : it seems like it is happening only on Android 13
After research, it is linked to Android 13, more and more people are facing this issue.
Only solution I found on Github was here, it is the only way to make it worked while waiting for a fix
style={{transform: [{rotate: '180deg'}]}} seems to be the best workaround for the time being.
I am currently developing an application in React Native. There is significant performance drop when I run it on a Samsung Tab A (buttons visibly lag when clicked, a 3D animation we have takes very long to load in, etc.) I tried running the same application on a OnePlus 6T, and all these performance issues are gone. Obviously, the specs are better on a 6T vs. the Tab A, but why would tasks like button clicks even lag? This makes me wonder if the Tab A can support React Native apps at all. Does anyone have experience developing on the Tab A with React Native and have any advice?
I used react-native-camera on my iOS app and now trying to add Focus, Brightness and Zoom controls to it. So far I was unable to come up with a solution. Any idea how to do this?
I tried to find an option in different react native camera packages. Also posted in their git repos for help. Finally tried this post: https://medium.com/react-native-development/react-native-camera-app-with-live-preview-saturation-and-brightness-filters-d34535cc6d14 Where they take a photo from the camera every 5 milliseconds and adjust its brightness which seems to be very unstable and it makes the app crash.
It is not possible to use the focus and zoom functionalities with react-native-camera.
Unluckily the focus api has many bugs and the zoom functionalities will not render fast enough with javascript.
Maybe a solution is not using react-native-camera and instead just writing an intent to open the default camera application
The following app uses this solution, all the camera functionalities work perfectly.
Could they re-open the issue as it seems to not be solved?
Developers may need to review all the open issues to estimate the project deadlines.
My RN application is consuming more battery power of android and iOS devices. Can any one let me know why it is consuming more batter in comparison to native application?
I have encountered high battery consumption when I scrolled my infinite list made using default FlatList. It needed a lot of computations of layout so it loaded up CPU and that caused the battery go empty. I solved it by using recycler list view and preconfigured layout. In fact, every JS app will kick the battery harder than native
Does anyone know if there is a way to force an app you're developing to run in a 3.5" screen size mode if you're on an iPhone 5, just for dev/debug purposes? Something such as what might look like a toggle in the Development section of Settings or something. In other words, run the app such that it LOOKS like it's running on a non-5 iPhone (black bars on top/bottom), that way I can test certain UI functions.
For clarification, I'm NOT saying "I don't want to support iPhone 5" - I most certainly do. Also, I'm aware that I can do the 'old' retina display in the simulator, but I do not want to use the iOS Simulator as the app includes libraries that do not support i386 architecture, uses push notifications, and heavily relies on GPS to function correctly. I'm just looking for a way to test both aspect ratios on the same device to save money/time.
Thank you!
It appears that by removing the app from device, deleting the Default-568h#2x.png launch image, cleaning the project, and re-running app, I can get the functionality I'm looking for, although not as nicely as a toggle switch.
Letter box in iPhone5