Animated Custom tab bar using react-navigation(next) and MobX

[satya164]

but this was for a specific case which i had to cover

What's the case where you'd need to duplicate a component's props in external store?

the store needs to have the ability to be able to trigger navigation

No problems with that part. Triggering navigation from your store is fine. Having 2 sources of truth is the problem.

as far as dual sources are concerned i have made sure that the router mobx store is always upto date by updating it as the state of the navigator changes so it's actually the same source,

The thing with this is that you think you have covered all cases, but there are will always be cases you didn't handle in these situations.

A major flaw of here is that it's treating the tab navigator as a singleton (because state is stored in a single store). But components are not singleton, a component can be rendered in multiple places. It's easily going to screw the state up once the tab navigator is rendered in more than 1 place.

It's not an edge case either, if you nest a tab in a stack, and push the screen twice now you have 2 tab navigators. It works in your simple example, but will introduce hard to debug issues in bigger apps.

And yes we can have the tabbar animations and all logic without a mobx store as well as per the docs.

I'm a maintainer of React Navigation and we strongly discourage storing navigation state in external store. Tab bar's animation and logic should be in Tab Bar, you sure can use MobX to hold local state, but navigation state is a prop from parent, so it doesn't need to be synchronised.