not re-render on change in react-native

[temharay]

I am new to mobx and being stuck at this for a week now; tried what i think is all options but still couldn't figure it out.

I am trying to apply this tutorial but adapted to react-native with the following code but after button is clicked, no UI is re-rendered but I can see in console it works:

store.js

import React from "react";
import { action, observable } from "mobx";
import {nanoid } from 'nanoid/non-secure';
 
/* Store start */
export default class Store {
  @observable title = "Coding is Love";
  @observable id = "id 1";
 
  @observable user = {
    userId: 1,
    name: "Ranjith kumar V",
    website: "https://codingislove.com",
    email: "ranjith@codingislove.com",
    id: '111'
  };
 
  @action
  setUser(user) {
    this.user = user;
  }
 
  @action
  updateUser(data) {
    this.user = { ...this.user, ...data };
  }
 
  @action
  clearUser() {
    this.user = undefined;
  }
 
  @action
  setTitle(title) {
    this.title = title;
    this.id = nanoid();
  }
}
/* Store end */
 
/* Store helpers */
const StoreContext = React.createContext();
 
export const StoreProvider = ({ children, store }) => {
  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};
 
/* Hook to use store in any functional component */
export const useStore = () => React.useContext(StoreContext);
 
/* HOC to inject store to any functional or class component */
export const withStore = (Component) => (props) => {
  return <Component {...props} store={useStore()} />;
};
`

App.js

`import React from "react";
import Home from "./Home";
import Store, { StoreProvider } from "./store";
 
const store = new Store();
/* Create a new store */
 
function App() {
  return (
    <StoreProvider store={store}>
      <Home />
    </StoreProvider>
  );
}
 
export default App;

Home.js

import React, { Component } from "react";
import Username from "./Username";
import { observer } from "mobx-react";
import { withStore } from "./store";
import { View, Text, Button} from 'react-native';
 
@withStore
@observer
class Home extends Component {

  toggleTitle = () => {
     const { store } = this.props;
     console.log(14, store);
    if (store.title === "Coding is Love") {
      store.setTitle("Mobx React Context");
    } else {
      store.setTitle("Coding is Love");
    }
  };
 
  render() {
    const { store } = this.props;
    console.log(24, store);
    return (
      <View>
          <Text>{store.title}</Text>
            <Button onPress={this.toggleTitle} title="toggle"/>

          <Username />

      </View>
    );
  }
}
 
export default Home;

Username.js

import React from "react";
import { observer } from "mobx-react";
import { useStore } from "./store";
import { Text } from 'react-native';
 
const Username = observer(() => {
  const store = useStore();
  return <Text style={{ fontSize: 14 }}>- By {store.user.name} {store.id}</Text>;
});
 
export default Username;

the button click should have changed the title and the newly generated id but not working. The initial store content is loaded well though.

[kubk]

Are you using Mobx 6? The recommended way to use Mobx is makeObservable/makeAutoObservable. If you'd like to use decorators you should enable them: https://mobx.js.org/enabling-decorators.html
If you switch to functional components the HOC withStore is no longer needed. So the tutorial is a bit outdated.

[temharay]

thank you thank you! makeOBservable did the trick...am surprised!