MobX - useStores hook (Context)

ComponentExample.tsx

import React from "react";
import { TouchableOpacity, Text } from "react-native";
import { observer } from "mobx";

import { useStores } from "../stores/StoresProvider";

const ExampleComponent: React.FC = () => {
  const { UIStore } = useStores();

  return (
    <TouchableOpacity
      onPress={() => UIStore.setUITheme(UIStore.UITheme === "dark" ? "light" : "dark")}
    >
      <Text>
        Change theme
      </Text>
    </TouchableOpacity>
  )
}

export default observer(ExampleComponent);

StoresProvider.ts

import React, { createContext, useContext } from "react";
import { singleton as UIStore } from "./UI.store";

export const StoresContext = createContext({
  UIStore,
});

export const useStores = () => useContext(StoresContext);

UI.store.ts

import React, { useContext } from "react";
import { observable, action } from "mobx";

class UIStore {
  @observable UITheme: "light" | "dark" = "dark";
  
  @action setUITheme = (newState: "light" | "dark" = "dark") => {
    this.UITheme = newState;
  };
}

export const singleton = new UIStore();

const StoreContext = React.createContext<UIStore>(singleton);
export const StoreProvider = StoreContext.Provider;
export const useStore = () => useContext(StoreContext);