Can I use one mobx store in two different components in react-native app?

Question

I have a module with topTabNavigator that wrapped with mobx provider with the store:

export class ModuleTeam extends Component {
  render() {
    return (
      <Provider store={store}>
        <TopTabNavigator />
      </Provider>
    );
  }
}

And inside of topTabNavigator I have two screens:

export class TopTabNavigator extends Component {
  render() {
    return (
      <Tab.Navigator>
        <Tab.Screen name='Team' component={ScreenTeam}/>
        <Tab.Screen name='Invites' component={ScreenInvites}/>
      </Tab.Navigator>
    )
  }
}

Can you tell me please is it a good way to share the store between two screens and inject it like this, separate in every component:

@inject('store')
@observer
export class ScreenTeam extends Component {

}

@inject('store')
@observer
export class ScreenInvites extends Component {

}

I know is it a good practise to divide one store on a few, but in my case there is some data that uses on the both screens, and I don't want repeat myself.

Answer 1

You can create different stores, several. example how to do it

const App = () =>
  <Provider FirstStore={FirstStore} SecondStore={SecondStore}>
     <app stuff... />
  </Provider>

const Button = (({ FirstStore, SecondStore, label, onClick }) =>
  <button style={{
      color: FirstStore.colors.foreground,
      backgroundColor: SecondStore.colors.background
    }}
    onClick={onClick}
  >{label}</button>
));

export default inject("FirstStore", "SecondStore")(observer(Button));

or some advanced example

class stores {
  this.ModalsStore = new ModalsStore(this);
  this.AuthStore = new AuthStore(this);
  ...
}

const mobxStores = stores();

const App = () =>
  <Provider {...mobxStores}>
     <app stuff... />
  </Provider>