react-native mobx call action from provider class - react-native

Question

I have set up a very simple mobx store class:
import {observable, action} from 'mobx'
class TestStore {
#observable placeholder = 'Search In Me';
#action changeName(name) {
this.placeholder = name;
}
}
export default new TestStore();
My parent class (below) is where the provider is set. The problem is in this class I also need to track the route name of the current tab that is active. That all works fine - my issue is how do I call the changeName function in the store from the parent class? Currently this.props.store.changeName is returned as undefined.
import React, { Component } from 'react';
import { Root, Tabs } from './config/router';
import { Alert,View } from 'react-native';
import { Provider } from 'mobx-react';
import TestStore from './config/TestStore';
import {observer} from "mobx-react/native";
#observer class App extends Component {
_getCurrentRouteName(navState) {
if (navState.hasOwnProperty('index')) {
this._getCurrentRouteName(navState.routes[navState.index])
} else {
if (navState.routeName==='Tab 1') {
Alert.alert('Tab 1')
this.props.store.changeName('Tab 1')
}
if (navState.routeName==='Tab 2') {
Alert.alert('Tab 2')
}
if (navState.routeName==='Tab 3') {
Alert.alert('Tab 3')
}
if (navState.routeName==='Tab 4') {
Alert.alert('Tab 4')
}
}
}
render() {
return (
<Provider store={TestStore}>
<Root onNavigationStateChange={(prevState, newState) => {
this._getCurrentRouteName(newState)
}} />
</Provider>
)
}
}
export default App;

Answer 1

So I resolved this issue restructuring my app and moving everything up a level - index.js became the following and imported the original classes in index.js back in:
import React, { Component } from 'react';
import { Provider } from 'mobx-react';
import TestStore from './config/TestStore';
import Base from './app';
class App extends Component {
render() {
return (
<Provider store={TestStore}>
<Base />
</Provider>
)
}
}
export default App;