Bottom Tab Style

[aeq-dev]

Bottom Tab Style

[kanzitelli]

Hi @aeq-dev! Thanks!

So when you generate screens with generateRNNScreens(), you can pass any tab options to the screens. You can check the example here.

Let me know how it goes!

[aeq-dev]

Hi @kanzitelli , Thanks for help,
Yes I can set a static badge for any screen, but I want to update the badge (number) of a tab from somewhere in app,
let's say I do a query and get response with count, how could I update a tab by this value ?
Thank you again :)

[kanzitelli]

Hey @aeq-dev!

Ah got it! So when you do const screens = generateRNNScreens({...}), screens will have a field N which is the current React Native Navigation instance. Which means you can just do something like screens.N.mergeOptions(componentId, { bottomTabs: { ... } }). Hope this helps :)

[aeq-dev]

Thanks a lot for quick reply, and I'm so sorry to bother you because I'm newer in RN ^^'
So I did like this :

screens.N.mergeOptions(props.componentId, { bottomTabs: { 
            backgroundColor:Colors.red20
        } });

it works fine, but this is applied for all tabs, is there a way to update on only one tab ? in my case I have Dashboard, Tickets, Settings. so I want to update Ticket badge number.
my solution is to get the count from store which I update this value each time the user books a ticket :)

[aeq-dev]

I got it :)
But I have a small question please :
the componentId is it fixed for each sceen ? otherwise, how could I get the componentID of other screens ?
Let's say I'm on Dashboard screen which its componentId is 'Component1' , how can I get the comopnentID of Tickets screen ?
Thanks

[kanzitelli]

@aeq-dev yeah, just wanted to write that you probably want to use bottomTab: {}, not bottomTabs: {} :)

And if I remember correctly, you can not get the component ids of other screens from React Native Navigation API itself (maybe something changed tho), so it makes it impossible for rnn-screens also. Also every pushed screen has a different component id. But the one way to achieve it (how I would do) is to save componentId in useEffect for each tab to the global store and use those values whenever you need them :)

[aeq-dev]

mmm I see, so what about the root screens componentID ? are they also not fixed ? and do you have any idea how to get the id by its name or something else ?

Here's the console log at starting app :

BUNDLE  ./index.js 

LOG  Running "Ticket" with {"initialProps":{"componentId":"Component3"},"rootTag":1}
LOG  Running "Dashboard" with {"initialProps":{"componentId":"Component1"},"rootTag":11}
LOG  Running "Search" with {"initialProps":{"componentId":"Component2"},"rootTag":21}
LOG  Running "Main" with {"initialProps":{"componentId":"Component4"},"rootTag":31}

I want a way to get the Ticket componentId :)

Thanks.

[kanzitelli]

@aeq-dev yeah that’s what i mean, you can only (from what i know) get that componentId inside the screen in the passed props. And as you know your root screens (tabs), in your case it’s Ticket, then just save that passed props.componentId in useEffect to your stores.ui.ticketTabComponentId and then use that value everywhere you need to change the Ticket’s tab badge. This would be my personal approach.

[aeq-dev]

Thanks a lot for your assistance !
I think I got a solution for this, but I need to navigate to screen from tab dashboard to Ticket,
How could I achieve that using this package ? I tried push but doesn't work, I stays in same Tab.
Thanks

[kanzitelli]

@aeq-dev you need to push a new screen and have bottom tabs hidden in the options for the new screen. but, i would recommend you to read react-native-navigation docs as this library is just a wrapper around RNN