test.data.arr = [...test.data.arr, newItem]

import {makeAutoObservable} from 'mobx'

class Test {
	data = {
		arr: [
		    {id: '0', name: 'Item 0'},
		    {id: '1', name: 'Item 1'},
		    {id: '2', name: 'Item 2'},
		]
	}
	constructor(props) {
		makeAutoObservable(this)
	}
	add(obj) {
	    //this.data.arr.push(obj)
	    this.data.arr = [...this.data.arr, obj]
	}
}

export default new Test()

import React from "react"
import { StyleSheet, Text, View, Button, FlatList } from 'react-native'
import { observer} from 'mobx-react-lite'
import { toJS, runInAction } from "mobx"

import test from '../store/test'

function Test() {
	const renderItem = ({ item }) => (
	    <Text>{item.name}</Text>
	)

	return (
	    <View style={styles.container}>
    	    <View style={styles.tab}>
    	        <Button
    	            title='Add'
    	            onPress={add}
    	        />
    	    </View>
            <FlatList
                data={test.data.arr}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
	    </View>
	)
    function add() {
        const l = test.data.arr.length
        test.add({
            id: l.toString(),
            name: 'Item ' + l
        })
    }
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		color: '#000',
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	tab: {
	    margin: 70
	}
})

export default observer(Test)

import { makeObservable, observable, action } from 'mobx'
import React, { useState } from 'react'
import { observer } from 'mobx-react-lite'

class Store {
  constructor() {
    makeObservable(this)
  }

  @observable a = 1

  @observable b = 2

  @action func() {
    this.a += 1
    this.b += 1
  }
}

const store = new Store()

const Comp: React.FC<{ a: number }> = observer(({ a }) => {
  const [c, setC] = useState(3)
  const [d, setD] = useState(4)
  console.log('*** render Comp ', a, store.b, c, d)

  const handler = () => {
    setC(c + 1)
    setD(d + 1)
    // Promise.resolve().then(() => store.func())
    store.func()
  }

  return (
    <div>
      <div>{`a = ${a}, store.b = ${store.b}, c = ${c}, d = ${d}`}</div>
      <button type="button" onClick={handler}>
        change
      </button>
    </div>
  )
})

export const App: React.FC = observer(() => {
  console.log('*** render App')
  return <Comp a={store.a} />
})