How to edit options/properties of navigators (stack & top nav.) through blocks?

Questions about Thunkable
,
1

Hi there!

I am looking for a way to edit the properties of the top-tab navigator, precisely the BackgroundColor & InactiveTintColor values. The reason is, I have added 3 screens in my top-tab navigator, and each one of them has a different theme (different status bar color, different background color, etc.) added to it - and when I switch to a particular tab, I would like my top-tab navigator to change the background and inactiveTint colors, as per the target screen’s theming.

I have set the statusBar colors & background colors for each of my screens inside the navigator, but I am unable to change the InactiveTintColor & BackgroundColor properties of the TopTabNavigator itself, as it’s not listed as a component in the blocks area.

image

:arrow_up: Top-Tab Navigator not listed in components, hence unable to change properties

Is there any way to edit the properties of the top-tab navigator through blocks? Or is there any workaround to this?

1 Like
4

Edit: I have completely edited (formatted & simplified) my main post. :+1:

5

The navigator options are part of the screen components.

image
image765×623 29.2 KB

1 Like
6

Hi, @muneer! Thanks for replying :slight_smile:

I agree, but the properties I want to change (BackgroundColor & InactiveTintColor) are under the top-tab navigator component itself (below image). The only top-navigation options the screen has are display title & icon for the screen’s tab.

image
image212×563 12.9 KB

If the top-tab navigator was available as a component in blocks, it would have been a very straightforward solution, compromising just a block like this -

image

1 Like
7

@muneer Do you happen to have any workaround/idea for this? Thanks! :slight_smile:

1 Like
8

Might just be a case of creating your own custom tab navigator @kartik14 ?

A group with three buttons would do the trick, then you can swap out icons and colours more easily.

3 Likes
9

Hi @domhnallohanlon :wave:

I tried building customized top-tabs for one of my other apps by using 2 buttons (as tabs), and two columns to switch between. But, due to some bug, hiding & showing the columns using buttons kind-of messed up my data-viewer and listviewer (the items started disappearing and showed huge gaps).

Plus, the top-tab navigator also allows us to swipe between screens, which is a really helpful feature :slight_smile: If it doesn’t work out eventually, I will use my custom one - But still, can we do something with the built-in top tab nav.?

Thanks!

1 Like
10

@kartik14
I checked the Tab Navigator options in React Native and unfortunately, background color is not part of them. So this option will not work.

I’m referring to this article
https://reactnavigation.org/docs/tab-based-navigation/
However, Thunkable might be using an external solution for the navigation in which case will will not know what options are available.

1 Like
11

@muneer Thanks, I will build a custom one then.

BTW, can you link here the article/website you read from? I think it would help me a lot in the future on what could be done and what could not. :blush:

12

Your most flexible option will be to create the navigator yourself. Maybe even using dogma to complete the UI parts. This will give you full control over the look and feel of this element. Then control the UX by having the figma elements respond to clicks or other triggers.

2 Likes