I'm on the Tasks screen where I have a UI kitten Overflow Menu component bound to a card, while I'm on Tasks, it works as expected, but when I switch to another screen (Habits screen) and I go back to Tasks and press the dropdown menu icon the OverflowMenu appears on the Habits screen, not on Tasks.
This is a link for an expo snack to reproduce the problem.
https://snack.expo.dev/#sabri0o/experimenting-things
I found the problem:
you are using inside the add task component.
must be used only once and it should be on the top layer of your application “aka”
If you use it in multiple places it will break the app behavior as for each used the component will look at it as an anchor for its UI (in this case the dropdown will see the app provider in add task as the anchor after navigating to it so it will bypass the one wrapping the app.
For simpler words:
Think of the as a box, If you use another in a component inside of it you create a smaller box, once you visit that component’s screen the box now will be the smaller one and the UI kitten components will relate to and inside that box.
What happened exactly in your app:
The app renders ==> Generate the first (wrapping the navigator in App.js) ==> you click on the dropdown (everything is fine) ==> you navigate to “habits/Add task” screen ==>Generate a second (a smaller box)==> the dropdown now is linked to the new ApplicationProvider ==> you get back to “tasks” screen ==> click on the dropdown ==> it displays inside the new (the smaller box)
That’s why you see it inside the “habits/Add task” screen
Related
I am creating a React native application with the following scenario:
There is a navigation bar at the bottom of the screen, allowing the user to navigate between three main pages. On one of these pages, there is a backdrop with a container overlayed on it with two buttons. Each of these buttons should show open different "pages" in that container, and the navigation bar will be hidden when the user opens one of those "pages". An image is included below.
App layout example
My question is: how is this best implemented in react native?
My original idea was to implement a custom Stack Navigator with createStackNavigator. While this does work, I was wondering if this is a good way to go about it.
One result from using a custom navigator is that the navigation state in the container is also bound to the back button of the device (on Android). However, this is a welcome feature in this case as it makes sense in the navigation flow.
I am playing around with React Native and trying to build a test application. I am stuck at the Navigator part: https://facebook.github.io/react-native/docs/using-navigators.html.
I understand that one can change the state of the variables (as they are doing in the tutorial, increasing the index variable). What I don't really understand is how I could render different Components based on which button is clicked in my menu. In the example, it is always "MyScene" that is rendered, but with different values. How should I do to render "MyScene2" when clicking on some button?
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
How do i apply a common template to every screen in a sketchflow project.
I basically want some common navigation on the top and side and don’t want to have to draw it on every screen.
You can create your common UI as a component screen. It can then be used in as many other screens as you like.
You can either create a new component screen in the map, or select some content already on a screen, and turn that into a new component screen using the context menu on those items.
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!