Help with Stack Navigator

How do I make the white space between the status bar and stack navigation header smaller? I’m on an iPhone Xs

Could it be that you have placed the tab navigator inside a stack navigator?

I have a bottom tab navigator inside the stack but the spacing stays the same when i remove it

…you mean removing the stack navigator or the tab navigator?

Also, what happens if you set the stack navigator’s header mode to “None”?

Screenshot 2021-01-29 at 02.18.53

i think its a stack navigation bug because i have this problem too
and i was created a topic 2 days ago but thier was no answer

1 Like

I mean when I remove the tab navigator.

Removing the header takes away the header and spacing but im trying to have a header

I am genuinly confused… If you do want to have a header then what is the issue with the header you already have? Why do you want to remove it? The blank space at the top of the screen is the screen navigator’s header but it does not seem to have any value to show. Here is what I think: Since you are combining a screen navigator and a tab navigator, you are trying to achieve something non-standard which ends up not working anyway. Question: Why do you need a header when using a tab navigator which shows the tab you are in?

can this help?

1 Like

The header has way too much padding and takes up a third of the screen. I need a stack navigator to navigate the screens within my homepage. The stack navigator has that much spacing either way so its not something “nonstandard”, its a bug

Would it be possible to share your project link so I can take a look?

I am experiencing the same on newly created apps. The new implementation of the tab navigator seems to be broken in more ways than I can count. Try uninstalling and reinstalling the Thunkable Live app as I see that you are on iOS and there is no way (afaik) to delete the app’s cache. Deleting it on Android somehow helps but there are other things that don’t work as they should, like the SwipeEnabled option which remains enabled even if it is set to “false”. Luckily enough, I have the old implementation of the tab navigator in my older apps which I can save in a screen and then reuse but the new implementation is really really really buggy.

3 Likes

Ok I think I see what the problem is. Even if you disable the “ShowIcon” and “ShowLabel” options, the tab navigator will still preserve the space dedicated for those two options. This is not an expected behaviour and is not the way the previous implementation of the tab navigator behaved.

@Steven is this bug known to you and if so, are you planning to release a fix anytime soon?

Thanks
K

No, I was not aware of this issue. I’ll add it to our list and make sure we take a look at it.

3 Likes

Ok I just noticed this: The top tab navigator does not reveal the “Tab Bar Visible” option for the screens it hosts. Instead the bottom tab navigator does:

Same screen in the Bottom and the Top Tab Navigator

Here is how to reproduce the bug:

  1. Create a Top Tab Navigator and a Bottom Tab Navigator. Notice that the screens under the Top Tab Navigator are missing the “Tab Bar Visible” option and that the screens under the Button Tab Navigator aren’t.
  2. Drag a screen from the Bottom Tab Navigator and drop it into the Top Tab Navigator. You will notice that the “Tab Bar Visible” option is still there. However, if you click another screen in the Top Tab Navigator and then click back the screen you moved from the Bottom Tab Navigator, you will see that the option is missing!
  3. Move the screen back to the Bottom Tab Navigator, click another screen under the Bottom Tab Navigator and then click the one you moved back again. Presto! The option is available again.

You can repeat the same process with a screen from the Top Tab Navigator and you will come to the conclusion that the bug impacts the Top Tab Navigator. When the “Tab Bar Visible” option is available and switched to “false”, there is no blank space at the bottom of the screen and in the same way, if it would be available for the Top Tab Navigator, it would (should) not have the blank space on the top of the screen either.

I will keep looking for bugs impacting the navigators. I hope the above helps.

EDIT: So it appears that my previous references to “tab bar navigator implementations” were somehow correct. Check out how different the Top and Bottom Tab Navigator options are:

K

2 Likes

Ok, so it seems like we are discussing at least a few separate issues in this thread.

  1. There is currently an issue on iOS with stack navigators where the header is taking up much more space than it should. I have a fix for this that we are currently testing so we should be able to get that released soon.

  2. There might be some issues with the tab navigator though I’m not 100% clear on what they might be. Seemingly just the SwipeEnabled property is no longer working? I tested it and it seems to be working. There is some weirdness in the UI at the moment where it defaults to showing the property as disabled/false but is actually enabled. If you toggle it in the UI it should behave as expected afterwards. So I’ll get that fixed but I think it should mostly be working as expected.

  3. You expect disabling ShowIcon and ShowLabel to indicate that the Top or Bottom Tab navigator should essentially not be shown at all if I understand correctly? I don’t believe this is the case. If you want them to be invisible you can use the property on the screen(s) to set Tab Bar Visible to false. At the moment, this isn’t possible on a Top Tab Navigator, bringing us to…

  4. Separately, you noted that the Tab Bar Visible property is not available on screens in side of the Top Tab Navigator. It seems this was an intentional choice on our end though I’m not clear on why. I’m going to look into it. We might be able to enable this but it is difficult to say for sure without knowing the original reasoning.

Anything else that we need to address?

2 Likes

Hi @Steven

Thank you very much for looking into this. I will start with the easy ones:

.4. If it is unclear to you, imagine how unclear it is to us! :slight_smile: . Finding out that top and bottom tab navigators behave differently raised our earlier comments related to point 3 so if the “Tab Bar Visible” switch becomes available on both bottom and top tab navigators then the issue described in point 3 is obsolete.

.3. Commented above.

.2. Since we now know that top and bottom tab navigators behave differently, I took another look at them separately and came to the same conclusion as you did. The bug exists only on the top tab navigator and can be reproduced by creating a new one and noticing that the initial value of the “Swipe Enabled” value in the GUI is “false” despite the fact that in reality, it is enabled. I now check your workaround by switching it on and off again (sic) and the switch value gets synced with the real value. A fix would be nice so we are looking forward to that.

.1. Looking forward to the fix :slight_smile:

As for whether there is anything else which needs to be addressed, there are plenty of other issues not related to the navigators so if you would like to look into them, we are more than happy to provide all feedback necessary to fix them.

EDIT: I think I experienced some performance issues with the top tab navigator, I am not sure if they are related to the “Lazy” option or not but I will keep testing and let you know.

Kind regards
K

2 Likes

Hi @Steven,

First of all many thanks for looking into this. Actually there are some issues which seems you didn’t address in your previous message:

ISSUE no. 1

  1. Create a project with multiple screens in a buttom tab navigator
  2. Add a Data list/grid viewer in one of the screens included in the buttom tab navigator
  3. Show items in the Data list/grid viewer
  4. Scroll down thorugh the items
  5. Go to any different screens than the one including the Data list/grid viewer
  6. Go back to the screen including the Data list/grid viewer
  7. You will notice that the Data list/grid viewer shows the first item in the list at the top - and not anymore the item you left earlier. Now it’s more than 2 weeks that I am getting this - it didn’t happen earlier.

ISSUE no. 2

  1. Create a project with multiple screens in a buttom tab navigator
  2. Add a Data list/grid viewer in one of the screens included in the buttom tab navigator
  3. Show items in the Data list/grid viewer
  4. Create a screen outside the buttom tab navigator
  5. Select an item in the Data list/grid viewer
  6. Pass the data (i.e images, text, etc.) in the new screen positioned outside the buttom tab navigator
  7. You will notice a glitch in the status bar (in Android)
  8. In addition, I have experienced a slower response when I go back to the previous screen (earlier this was faster)

Please also see the post below:

I have already provided to @jane a copy of my project with instructions on how to reproduce the issues.

Due to these issues I can’t publish an update of my app - now it’s more than 2 weeks that I have an update ready.

2 Likes

Addressing the same points from my earlier post:

  1. We are testing this change now. If everything goes well, it should be available sometime later this week or early next week.
  2. Same as above, I have a fix that is currently in testing. Assuming all looks good, will be released in the same time frame.
  3. I think this is generally a non-issue as it isn’t so much broken as it is confusing. We can maybe update our docs to clarify and/or revisit this soon. I think there might be some changes coming in the way that we display properties so it will likely get addressed at that point.
  4. I wasn’t able to find a great explanation as to why it was disabled and, as far as we can tell, it seems to work just fine if we enable it. So, basically same situation as #1 & #2 though this one might be in testing a bit longer just to verify we aren’t missing something.

@Tommaso Thanks for sharing! I’ll take a look at these as well. I’m going to just restate your problem so we can verify I understand.

  1. It seems like the Data Viewer component is simply not holding the scroll position when you navigate between screens inside of a bottom tab navigator.
  2. There is a status bar issue on Android when going from a screen inside of a bottom tab navigator to one that isn’t. There might be some link to Data Viewer/Data Sources causing the issue. Additionally, there seems to be slowness when navigating though it is unclear if the issues are related.

Obviously, I don’t yet know exactly what the issue(s) is so I don’t know when we will have a fix but I will look into these shortly so we can help get them resolved and enable you to publish your update.

3 Likes

Hi @Steven,

Many thanks for looking into this - I hope the fix will be soon available as I really need to publish an update for my app.

Just a few remarks on 1. above - the issue is also extended to screens outside of a buttom tab navigator. Earlier the data viewer had the scroll position even if returning from a screen outside the buttom tab navigator.

Please let us know, as I assume others in the community have the same problems. Thanks!

1 Like

Hi @Steven, any news on this? Did you manage to find the issue(s)?

I need to publish an update for my app which includes AdMob - this means I am losing money every day. Please let me know. Thanks!