Just a little background, I'm currently working on a React Native app that has multiple 3 FlatList instances and 3 three Calendar instances rendered.
All three are rendered at the same time and although the FlatList works great and performant, the Calendar irks me.
If you have a relatively new device (Pixel 4 and up, or iPhone) it works great, with little lag, but obviously the lower you go the more of a stumbling block it gets.
Now I understand that there are clear limitations to how performant RN can be, but in this case it's just rendering views so that should be all on the native side.
I'm a bit stumped how apps like Google Calendar, or any calendar app can easily render the views without any lag at all. I've tried many RN methods but even on the native side I'm not entirely sure how I should implement it performantly.
So my questions, seeing the screenshot below what advice can you give me to implement this in RN (or native) so that it can render 3 horizontal scrolling instances performantly. Currently this is just a bunch of views wrapped up in a simple ScrollView.
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.
I was researching this since last year from time to time. I always wonder how Instagram handles the feeds screen?
What kind a component they using for it?
I'm sure it's not a ScrollView becouse it's much more performant than a ScrollView.
It is not also a FlatList becouse I know the basics of the FlatList how it renders the rows etc... and I am sure that they don't use it. For example a FlatList renders the items on top of each other like a card stack. In this behavior you cannot achieve the current Pinch Zoom feature that they have.
I thought maybe they use flipkart's RecyclerListView which is based on Java and much more performant than ScrollView and FlatList, but I am not quite sure about that too.
Any ideas about what they using to achieve current functionality on the feeds screen?
I mean, is there a method or specific listing component to achieve same behavior with all the functions like Double Tap to Like, like Pinch Zoom with overlaying everything.
#Quick note about pinch zooming, it's nearly impossible to build a component with current states of ScrollView and FlatList which will be performant and has same functionality.
You can check out my other topic about that here
Long story short, I have tried a lot of methods and 3rd party components to achieve same thing, but still could not do it.
Thanks for your thoughts!
I want to display several components (maybe up to 6) in my React Native app that continuously change their position, i.e. slowly but fluently float on the screen and change their moving direction randomly or based on an angle at which they approach the edge of their parent, if they do. What I don't know is how to change their position dynamically in a performance friendly way. Because I also want to let the user interact with them by tapping on them, it cannot be a video in a background or something similar.
If I were dealing with a standard React app running in a browser, I think I would simply manipulate the element's style attributes top and left. Since I want to implement this in React Native, I think there must be a solution that is way more performant and elegant, involving manipulation of the native elements that back the React Native views or using some animation mechanism, because re-rendering a view with like 6 components at least 30 times per second doesn't seem like an appropriate solution and an overhead in general.
Googling things like "react native dynamically move element" or "react native dynamically change element position" did not bring any obviously appropriate results. I came across a native element method setNativeProps, though, but couldn't find any information on what props I could set to change the element's position on the screen and how performant that would be. I also looked into React Native's Animated API, but could not quite relate my problem to the solutions that this API offers from a first glance.
Does anyone know a mechanism or maybe a library that would be appropriate to use in the situation that I described?
I have a native app on iOS with >90 screens.
My client wants an android version and we might use reactnative.
Now the question: Is react native ok for an app with >90 screens?
there are no special navigation or animations effects.
I was reading about airbnb dropping react native
They had many reasons, one being the number of screens they use > 100... but with special customizations.
So, is it safe to use react native in my not so specialized app with lots of screens?
I'd say this is more personal opinion than a technical answer. Either way, I'll give mine.
You're not likely to see any performance deficit by using a high number of screens, especially if they all carry little amounts of logic, however from a design point of view it could get quite messy - is there a reason you'll need such a high number of screens?
You're also likely to find your navigation stacks become incredibly confusing with so many screens in each, you'd end up with a huge file and readability could become difficult.
Could you design in a way such that a screen can dynamically display this content rather than moving from screen to screen each time?
I'd say, unless you're looking at building an app as technically complicated as AirBnB, you could cut down the numbers. I built the mobile app for a large UK retailer and we managed this in less than 20 screens so it's definitely do-able.
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.