React native + mobx dont re render - reactjs

Question

Iam currently building an application with react native and mobx. My problem is that the component is not re-rendered after a observable value from the store is changed. My code looks as following:
components/phoneNumberChange.js:
#inject('store')
#observer export class PhoneNumberChange extends React.Component{
renderPhoneInput = () => (
<React.Fragment>
<Button onPress={() => this.props.store.showCountryPicker()}>
<Text>Show picker</Text>
</Button>
</React.Fragment>
);
render = () => (
<React.Fragment>
<CountryCodePicker visible= {this.props.store.pickerVisible}/>
</React.Fragment>
);
}
screens/loginScreen.js:
import { Provider } from "mobx-react";
import { store } from "stores/phoneNumberChangeStore.js";
import { PhoneNumberChange } from "components/phoneNumberChange.js";
export class LoginScreen extends React.Component{
render = () => (
<Provider store={store}>
<PhoneNumberChange/>
</Provider
);
}
stores/phoneNumberChangeStore.js:
import { observable, action } from "mobx";
class PhoneNumberChangeStore {
#observable pickerVisible;
constructor(){
this.hideCountryPicker();
}
#action hideCountryPicker = () => {
this.pickerVisible = false;
}
#action showCountryPicker = () => {
this.pickerVisible = true;
}
}
export const store = new PhoneNumberChangeStore();
babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
};
};
package.json:
{
"name": "myapp",
"main": "app/app.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"#babel/plugin-proposal-decorators": "^7.3.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-native": "^4.0.1",
"expo": "^32.0.0",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"prop-types": "^15.7.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-animatable": "^1.3.1",
"react-native-ui-kitten": "^3.1.2",
"react-navigation": "^3.3.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
The countryCodePicker gets shown or not when the visible prop changes. This is working. but when i change a value from the store it doesnt update and gets shown. I would appreciate any help!
Cheers

Answer 1

You are exporting your store singleton as default in phoneNumberChangeStore.js, but you are importing a named export PhoneNumberChangeStore in loginScreen.js.
Use the default export in loginScreen.js instead. The store property is also called pickerVisible, not countryCodePickerVisible.

Answer 2

Found the solution! I redefined render on the instance.
I changed render = () => {..} to render(){ return (...); }
cheers!