I am currently in the process of developing a sample application using Mobx 6.9.0 with React Native/Expo. Here is my current setup:
App.tsx
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from "mobx-react";
import State from "./src/state";
import Sample from './src/sample/components/Sample';
export default function App() {
return (
<Provider store={State}>
<View style={styles.container}>
<Sample/>
<StatusBar style="auto" />
</View>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Sample.tsx
import { View, Text, Button, TextInput } from 'react-native'
import React from 'react'
import { observer, inject } from "mobx-react";
function Sample(props: any){
const { count, updateCount} = props.store
console.log(count)
return (
<View style={{alignItems: 'center'}}>
<Text style={{fontSize:100}}>{count}</Text>
<Button
title='Press Me'
onPress={updateCount}
/>
</View>
)
}
export default inject('store')(observer(Sample))
state.ts
import { makeObservable, observable, action, computed } from "mobx";
class State {
constructor(){
console.log('New Store')
makeObservable(this, {
count: observable,
text: observable,
currentCount: computed,
updateCount: action
})
}
count = 0
text = ''
get currentCount(): number {
return this.count
}
updateCount(): void {
this.count += 1
console.log(this.count)
}
}
export default State
When I click the button, I anticipate the updateCount to modify and re-render my Sample.tsx component. However, that's not occurring; instead, 'console.log(this.count)' returns undefined.
I'm hoping for an automatic update to display my count, but I seem to be overlooking something. Can someone offer insight into this issue? Thanks!