I need to display dozens of fairly complex SVGs on screen, on a React native chat app.
Each SVG represents an avatar with 3 shades, whose color I change through code to fit the user's preferences.
Because I am changing colors dynamically, I am currently displaying the SVGs as components in a Webview.
This works fine, but when I have a dozen of those on-screen (for example inside a busy chat room), I am having some serious performance issues.
What would be a good approach to keep both my colorized SVGs AND performance?
Using react-native-svg's SvgCss improved perfomance tremendously.
Related
First and most important: I am by no means a developer. We hired an agency to develop an APP for us, and i was given by a developed solution that i am not convinced if it is the best solution, So i would like to ask you guysfor advice.
Unfortunatelly i cannot put pictures nor links to code for the app, but i will do my best to explain myself:
The problems i encountered are mainly two:
All items appear to have fixed sizes applyed to them: When testing the app on different devices, the size of the elements is not responsive at all. In fact on small devices (Moto G5) There are elements that fall behind the bottom navigation bar making them unaccessible.
Lot of stuff fall below that said bottom navigation bar.
My question is the following:
Is react native responsive?
In web development there is a lot of flexibility when it comes to responsiveness with CSS and JS. Is React native any different? or there is a way to prepare the layout so it fits most of the common sizes without losing acces to interactions?
Hope i explained myself correctly. and again, sorry for not asking a technical specific question.
React Native is designed to be responsive, but it requires a different approach compared to web development. In web development, you can use CSS and JavaScript to make your website responsive, but in React Native, you use a different set of tools.
We have many ways to make the app responsive with the device's large screen and small screen.
Use the Dimensions API: React Native provides the Dimensions API, which allows you to get the dimensions of the screen at runtime. You can use this information to adjust the layout of your app based on the size of the screen.
Use third-party libraries ex: react-native-size-matters, react-native-responsive-screen, ...
Use Flexbox: React Native uses Flexbox for layout, just like web development. Flexbox is a powerful tool for creating responsive layouts that adapt to different screen sizes. You can use the flex property to adjust the size and position of elements on the screen.
In terms of your specific issue with elements falling behind the bottom navigation bar, it's likely that the layout is not taking the height of the navigation bar into account. You can use the Dimensions API to get the height of the navigation bar and adjust the layout accordingly.
Hello I am building an app and was wondering what the best option would be for optimizing a very large flatlist. It will take some time to load each element inside a flatlist since it contains images, a lot of text, etc. Would it be better to use just a plane flatlist or something like react-native-snap-carousel, react-native-reanimated-carousel?
Use pagination technique to show large data from flatlist. Avoid third party libraries like react-native-snap-carousel. It may cause the issues as time passes and can also be the reason for large apk or ipa size.
If your flatlist will have large data, it is adviced to use pagination. You may use in-built Flatlist or packages like react-native-snap-carousel or react-native-reanimated-carousel. But since your data will have many images that will make the app UX slow if you load them all at once.
Better to use Pagination and use react-native-fast-image for faster loading of images via caching.
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.
If i make my application screen on nexus4 emulator screen and wanted to see it on small screen phones, would it be necessary to use scrollview instead of View in react-native.
In some cases yes, because scaling everything according to the screen size will make the app elements look extremely tiny on some devices and text will be hard to read. I had a similar issue where I scaled every screen according to the device resolution and customers complained about not being able to read on small devices.
What I did was wrap such screens in a ScrollView, then put a View inside it with a minHeight: screenHeight then put elements with flexbox and fixed size inside it. This way it would fit most screens perfectly and on smaller ones it would still look good enough. You should experiment a little to see what works best for your app.
I'm working on a chat like application and I have seen examples using ListView and ScrollView. What are the advantages of either? I need to render different looking items through out the chat (inputs vs. responses OR text vs. images). Does one handle this case better?
I think your question is "ScrollView vs FlatList - which one to use"?
According to React-Native docs:
ScrollView vs FlatList - which one to use?
ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
I would use FlatList. This is what u need. It's more effective & lazy loads your data only when needed.