use runInAction in getPhotos model

src/state/models/user-local-photos.ts

@@ -1,5 +1,5 @@
 import {PhotoIdentifier} from './../../../node_modules/@react-native-camera-roll/camera-roll/src/CameraRoll'
-import {makeAutoObservable} from 'mobx'
+import {makeAutoObservable, runInAction} from 'mobx'
 import {CameraRoll} from '@react-native-camera-roll/camera-roll'
 import {RootStoreModel} from './root-store'
 
@@ -18,8 +18,10 @@ export class UserLocalPhotosModel {
   }
 
   private async _getPhotos() {
-    CameraRoll.getPhotos({first: 20}).then(r => {
+    runInAction(() => {
-      this.photos = r.edges
+      CameraRoll.getPhotos({first: 20}).then(r => {
+        this.photos = r.edges
+      })
     })
   }
 }

src/view/com/composer/PhotoCarouselPicker.tsx

@@ -2,14 +2,9 @@ import React from 'react'
 import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from '../../lib/styles'
-import {
+import {openPicker, openCamera} from 'react-native-image-crop-picker'
-  openPicker,
-  openCamera,
-  ImageOrVideo,
-} from 'react-native-image-crop-picker'
-import {observer} from 'mobx-react-lite'
 
-export const PhotoCarouselPicker = observer(function PhotoCarouselPicker({
+export const PhotoCarouselPicker = ({
   selectedPhotos,
   setSelectedPhotos,
   localPhotos,
@@ -17,7 +12,7 @@ export const PhotoCarouselPicker = observer(function PhotoCarouselPicker({
   selectedPhotos: string[]
   setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
   localPhotos: any
-}) {
+}) => {
   return (
     <ScrollView
       horizontal
@@ -65,7 +60,7 @@ export const PhotoCarouselPicker = observer(function PhotoCarouselPicker({
       </TouchableOpacity>
     </ScrollView>
   )
-})
+}
 
 const styles = StyleSheet.create({
   photosContainer: {