I'm working on a react native app which works with a lot of animated GIFs.
I've tried using the react native documented library com.facebook.fresco:animated-gif:1.3.0 for animated gif support, yet, the performance of the default Image component is terrible, but using FastImage package I am able to get, at maximum, 10 gifs.
As there is the possibility of integrating the native libraries in React Native, I was wondering what could a solution to this problem?
I've tested a couple ways to increase the performance of loading multiple animated GIFs in React Native:
The better format for animated pictures is webp (Why?). Once compressed, it can be around 90% more lightweight to be loaded whether in your web app or your mobile app.
Facebook's Fresco library which is the documented recommended library for rendering gifs and webp files should be upgraded as it provides a better performance for multiple gif loading, and also the original fresco library should be added as a dependency - at the moment, to at least, 1.5.0 or higher, if possible w/ react-native:0.54 -.
FlatList can be optimized to remove anything that is not on the screen using removeClippedSubviews prop. Alternatively, there are third-party libraries such as recyclerlistview or lazy loading lists out there.
Using fast-image for caching can also be advantageous in some cases.
Related
I'm writing a mobile application using React Native, and we have a bunch of nice animations done in SVG, by using so-called SMIL commands inside this SVG(tags like "animate" etc).
I was trying to find a way to use those animations but to my knowledge none of the libraries that I was able to find(including react-native-svg, react-native-svg-animations) able to do that.
I also checked this link: https://react-svgr.com/playground/?native=true which claim to transform SVG code to JSX, and it said that:
"/* SVGR has dropped some elements not supported by react-native-svg: style, animate */"
Is there anyone who was able to find efficient way to run these animations on React Native?
Thanks in advance!
We are considering using react-native-svg in our app. We are a bit tempted to use it liberally around the app to create pretty much the visuals of every page, since it should scale better than using images. We are targeting both Android and iOS, tablets and phones.
Does it make sense to make heavy use of SVGs around the app with react-native-svg instead of using PNG images?
IMHO, you should not. I had to deal with svgs a lot of time, and it was always way more complex than pure PNG. If you have to draw icons on tabs or on menus, use PNG, PNG#2x, PNG#3x. react-native-svg can be useful for remote SVG loading, like content managed in a back-office.
I am Working on react native camera library to taking bitmap.
For example, when we capture a image it return image path, height, width etc.
Instead of these i need bitmap.
The best way to achieve what you're looking to do is likely going to be to use the Native UI Components API for iOS and Android to implement a custom native image view that applies the effects you are looking for.
React Native doesn't give the option of accessing access the raw bitmap data of the React Native (aka. RCTImage) component.
I'm curious why React Native doesn't utilize the native platform list components such as RecyclerView for Android and UITableView (CollectionView) for iOS.
This could ideally provide a lot more feature support and improved performance then what is currently available.
Is there a reason the React Native lists are solely backed by ScrollViews instead?
I couldn't personally tell you but quoting the Author.
UITableView API is not well suited for the asynchronous nature of ReactNative, and the resulting code was pretty gross, especially when trying to do smooth animations to grow the heights of rows, which we do in the groups app.
Source: Early discussion on the very point.
For Recycler View in Android. Try this.
react-native-recycler-listview
Works ! Some gradle setup required though.
I've been digging deep in React Native for the past week to decide if I and the team should adopt it. And I gotta say it seems promising. I've also learned about its ability to integrate with existing native projects and its incremental adoption to change existing native projects.
My question is what are the cases/reasons that would make me wanna convert my completed old native projects (iOS/Android) into React Native?
Edit: Just to clarify, our team is currently building native apps only.
It depends on what type of app you are building. But you can always use bits of code from native or react native. Since you all can code in native, anything you cannot find you could make a native component.
The advantages of React Native show up with code reuse between iOS and Android so that your team can iterate faster working together. Many big apps have achieved 80% or more code reuse.
You will find flexbox so easy to quickly create views to specs and to change quickly with styles. Plus they are all in code and that plays nice with git.
See edit below:
Now in saying this I have never used React Native inside a native project but to call actions and such you would need to expose functions to call from the JavaScript side. I don't know if a singleton is generally used or just an import of the controller functions or delegated you want to expose but it has to call back to the native application . It is easy to use a native component inside a React native application and I have done this so I am sure it can work the other way.
Edit: Out of curiosity I added some react native views to a test project and it works surprisingly well. No singleton needed Javascript maps the view tag and the exported functions. Crazy. The concerns below still exist but I think if you are changing to change that is wrong but if you have UI changes you want to make then it could definitely benefit as your reuse can grow across your platforms.
Drawbacks I have seen- sometimes transition animations can be laggy if you are not using the native navigation methods. Using both native and React Native adds size to your app so you would need to keep an eye on that. Also start up time can hurt and so monitor that as well.
With all that said I have built a fair bit with React Native lately and it is, at times, beautiful and frustrating for a native developer.
Here is a great article on Instagram and React Native.
Also AirBnb heavily uses RN. They may be completely RN now but I am not sure. They do drive a lot of the outside frameworks in RN for example the maps component in RN. They also just released Lottie and it is very cool. Here is an article about AirBnb.