Like the title said, If I have many modals with visible={false} from the moment user enter the screen until they exit the screen, will that affect performance comparing not having them? Will those modals do some render before hand and therefore affect the first time loading the screen?
Related
I'm lazy loading tabs (using the built in bottom tab navigator) on my React Native app that uses React Navigation, to make my app launch faster. But I also have a frequently used tab that loads a bit slow due to the nature of its contents, and I want to explicitly load that tab in background after my home screen is rendered properly. In other words, I want to "force load my second tab after home screen finishes rendering/loading data properly" as the user will probably be looking at the static screen for a second or two anyway, so that when they tap the second tab, it will be already loaded when the home screen was static. This way I can achieve both a fast app start time to a fully functional home screen, and prevent initial load lag of my second screen for a smoother user experience.
How do I achieve that? (I know I can specify lazy loading specific screens with the upcoming 6.x version, but that won't solve my problem)
I have used text input in creating a search bar on the 'HomeScreen'. Whenever I click on the search bar, it takes me to the 'SearchScreen' where text input is focussed.
In both screens, I have placeholder "Search" in the text input. The problem I am facing is that the placeholder flickers whenever screens are changed. This happens all the time if/when text input is re-rendered.
I want the placeholder to remain static there for smooth transition between screens. Please let me know if you have any idea on how to erect it or if you have any suggested workaround.
Take a look at this library Fluid Transitions. This library helps to create smooth transitions between screens and shared components. Thus, you can go from screen A to screen B maintaining you search bar input intact or at least keep it with a smooth transition.
Another idea is... Do you really need to move to another screen when focusing the search bar? Is it possible if you just create an SearchList component that "shows/hides" a FlatList (for example), when the user focus the search bar, it will change to another screen when the user clicks on a specific result.
I am using react-native-router-flux and here's some observation, previously I was using .replace() for switching scenes, this time I used .push(), customizing it to not show any animation and now search does not flicker when popping the search screen, however, it does flicker on pushing search screen onto the stack, seems like the re-render is causing flickering (as pop does not trigger a render but push does).
It's best to avoid using the placeholder as for now until the problem is sorted in react-native itself.
I have the same component in multiple screens, which I navigate to through React navigation. I'm using Tabnavigator.
On the first screen, the View containers move around if the text is too long. I have a fixed flex-size on my view containers, but it doesn't take that into consideration. The strange is, it's only on the first screen. A gif to show you what I mean.
https://gfycat.com/KaleidoscopicEasygoingApisdorsatalaboriosa
I have linked a Snack to show you my code:
https://snack.expo.io/#cronnay/show-inconsistency
I've checked if it's because of the scrollview I have, and I was inconsistent with my design on the scrollviews. but they all have the same styling.
What the heck is going on?
EDIT: Uploaded new gif that shows that I navigate to same component through two different ways. And it makes the design screw up.
https://gfycat.com/HappyPracticalAustralianfreshwatercrocodile
Let's say I have an app built like the Microsoft weather app.
On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?
Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.
Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.
Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.
I don't know which one of these I'm supposed to use. Is there a recommended way to do this?
Or is there a better way I didn't think of?
There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.
Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).
One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved.
This is very elegant way to present to the user.
Please see below guidline how to do it:
UWP Extended splash screen
I recently implemented navigation in my app using NavigatorIOS in React Native. However, I think I've encountered a problem. Say I have 10 nav buttons on my home screen. Correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I use the first button to navigate to the next screen (let's call it Second.js), wrote/saved some data, and then went back and navigated to Second.js with the second button, that data from before would still be there? If so, is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Second.js so that each button has its own local data in its Second screen, or would I have to make Second1.js, Second2.js, Second3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons, plus a lot of memory is wasted with all these new classes that are basically replicas of each other. Thank you!