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.
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.
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.
Hello Guys is this a good stuff in React native Environment I create all Scenes as Components and being rendering it without using react navigator or something like that ?
It depends on the size of app. If it's a very simple ui and functionality then it's ok but not good. Bu if it has so much screens and have complex functionalities, then break it down to different screens and use navigation. In fact it would be a good practice to use different screens and navigation. It also is good practice for memory management.
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.
I'm building my first mobile app and am loving what React Native has to offer. One major disadvantage I've encountered is that the Navigator does NOT unmount the scene when a new scene is pushed on the stack. This makes some sense as this is probably necessary for transitions to happen smoothly.
My app uses a video background and seems like other apps using large media files may encounter a similar issue of high and unnecessary resource usage due to this behavior. Maybe a better approach would be to unmount the scene after transition and remount before popping?
I wonder if others have experienced similar issues and may have some feedback. I've already tried ExNavigator and React-Native-Redux-Router. These libraries are just not mature enough for my use cases and seem to have trouble working with Hot-Reloading.
Thanks for reading and replying.
I wouldn't use React-Native-Redux-Router, its not mainted and was taken over with React-Native-Router-Flux, i used to use RNRF, but have swapped to exponents ex-navigation (https://github.com/exponentjs/ex-navigation), and stay away from Navigator if you're going to start wanting more "complex" apps, as it is no longer maintained, though it does work still.
Which ExNavigator did you use because exponents one is well maintained and extremely fluid so far for what I have been doing, and should fit for most use cases.
If you want to stick with Navigator have you tried replace(route) or the resetTo(route) though you won't have transitions