Example for React Native use Mobx and React Context

react-native-mobx-context.js

// store/pokemon.store.js
import {
  get,
  computed,
  action,
  makeAutoObservable,
  createTransformer,
} from "mobx";

class PokemonStore {
  pokemon = [];
  pokeDetail = {
    family: [],
    enemies: {},
  };

  constructor() {
    makeAutoObservable(this, {
      addPokemon: action.bound,
      addFamily: action.bound,
    });
  }

  addPokemon(value) {
    let newPokemon = [...this.pokemon];
    newPokemon.push({ idx: String(new Date()), ...value });
    this.pokemon = newPokemon;
  }

  fetchPokemon = flow(function* () {
    const response = yield fetch("url")
      .then(res => res.json());
    this.pokemon = response.pokemon;
  });

  addFamily() {
    let newPokeDetail = { ...this.pokeDetail };
    newPokeDetail.family.push({
      id: 1,
      name: 'Family',
    });
    this.pokeDetail = newPokeDetail;
  }

  get getFamily() {
    return computed(() => this.pokeDetail.family).get();
  }

  // or use createTransformer
  // getFamily = createTransformer(() => this.pokeDetail.family);


  get getEnemy() {
    return computed(() => this.pokeDetail.enemies).get();
  }

}

export default new PokemonStore();


// store/index.js
import pokemonStore from './pokemon.store';

export default {
  pokemonStore,
}


// App.js
import React, { useContext, createContext } from 'react';
import { View, Button, Text } from 'react-native';
import { observer } from 'mobx-react';
import store from './store';

const Context = createContext(store);
const useStore = () => useContext(Context);

const App = () => {
  return (
    <Context.Provider value={store}>
      <Layout />
    </Context.Provider>
  )
};

const Layout = () => {
  return (
    <View>
      <HomeScreen />
      <Detail />
    </View>
  )
};

const HomeScreen = observer(() => {
  const { pokemonStore: { pokemon, addPokemon } } = useStore();

  const handleAddPokemon = () => {
    addPokemon();
  }
  console.log('Home Component:', pokemon);
  return (
    <View>
      <Button title="Add pokemon" onPress={handleAddPokemon} />
    </View>
  )
});

const Detail = () => {
  console.log('Detail');
  return (
    <View>
      <DetailFamily />
      <DetailEnemy />
    </View>
  )
};

const DetailFamily = observer(() => {
  const { pokemonStore: { getFamily, addFamily } } = useStore();
  console.log('DetailFamily:', getFamily);
  return (
    <View>
      <Text>DetailFamily</Text>
      <Button title="Add family" onPress={addFamily} />
    </View>
  )
});

const DetailEnemy = observer(() => {
  const { pokemonStore: { getEnemy } } = useStore();
  console.log('DetailEnemy:', getEnemy);
  return (
    <View>
      <Text>DetailEnemy</Text>
    </View>
  )
});

export default App;