Use mobx-react-lite instead of mobx-react

App.js

@@ -15,7 +15,7 @@ import { Asset } from 'expo-asset';
 import * as Font from 'expo-font';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBar } from 'expo-status-bar';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { AsyncTrunk } from 'mobx-sync';
 import PropTypes from 'prop-types';
 import React, { useContext, useEffect, useState } from 'react';

components/NativeShellWebView.js

@@ -7,7 +7,7 @@ import compareVersions from 'compare-versions';
 import Constants from 'expo-constants';
 import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
 import { action } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
 import { BackHandler, Platform } from 'react-native';
 
@@ -19,7 +19,7 @@ import { openBrowser } from '../utils/WebBrowser';
 
 import RefreshWebView from './RefreshWebView';
 
-const NativeShellWebView = observer(React.forwardRef(
+const NativeShellWebView = observer(
 	function NativeShellWebView(props, ref) {
 		const { rootStore } = useStores();
 		const [ isRefreshing, setIsRefreshing ] = useState(false);
@@ -157,7 +157,7 @@ true;
 				showsHorizontalScrollIndicator={false}
 			/>
 		);
-	}
-));
+	}, { forwardRef: true }
+);
 
 export default NativeShellWebView;

components/RefreshWebView.js

@@ -3,13 +3,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { Dimensions, RefreshControl, StyleSheet } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { WebView } from 'react-native-webview';
 
-const RefreshWebView = React.forwardRef(
+const RefreshWebView = observer(
 	function RefreshWebView({ isRefreshing, onRefresh, refreshControlProps, ...webViewProps }, ref) {
 		const [ height, setHeight ] = useState(Dimensions.get('screen').height);
 		const [ isEnabled, setEnabled ] = useState(typeof onRefresh === 'function');
@@ -45,7 +46,7 @@ const RefreshWebView = React.forwardRef(
 				/>
 			</ScrollView>
 		);
-	}
+	}, { forwardRef: true }
 );
 
 RefreshWebView.propTypes = {

components/ServerInput.js

@@ -5,7 +5,7 @@
  */
 import { useNavigation } from '@react-navigation/native';
 import { action } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,7 +19,7 @@ import { parseUrl, validateServer } from '../utils/ServerValidator';
 
 const sanitizeHost = (url = '') => url.trim();
 
-const ServerInput = observer(React.forwardRef(
+const ServerInput = observer(
 	// FIXME: eslint fails to parse the propTypes properly here
 	function ServerInput({
 		onSuccess = () => { /* noop */ }, // eslint-disable-line react/prop-types
@@ -124,8 +124,8 @@ const ServerInput = observer(React.forwardRef(
 				{...props}
 			/>
 		);
-	}
-));
+	}, { forwardRef: true }
+);
 
 ServerInput.propTypes = {
 	onSuccess: PropTypes.func

components/VideoPlayer.js

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { Audio, Video } from 'expo-av';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef, useState } from 'react';
 import { Alert } from 'react-native';
 

navigation/AppNavigator.js

@@ -6,7 +6,7 @@
 import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as SplashScreen from 'expo-splash-screen';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 

navigation/HomeNavigator.js

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { createStackNavigator } from '@react-navigation/stack';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import Screens from '../constants/Screens';

navigation/TabNavigator.js

@@ -5,7 +5,7 @@
  */
 import { Ionicons } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ThemeContext } from 'react-native-elements';

package-lock.json

@@ -17385,14 +17385,6 @@
       "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.7.tgz",
       "integrity": "sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw=="
     },
-    "mobx-react": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.3.1.tgz",
-      "integrity": "sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ==",
-      "requires": {
-        "mobx-react-lite": "^2.2.0"
-      }
-    },
     "mobx-react-lite": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz",

package.json

@@ -56,7 +56,7 @@
     "expo-web-browser": "~9.2.0",
     "i18next": "^21.2.4",
     "mobx": "^5.15.4",
-    "mobx-react": "^6.2.2",
+    "mobx-react-lite": "^2.2.2",
     "mobx-sync": "^3.0.0",
     "mobx-task": "^2.0.1",
     "normalize-url": "^7.0.2",

screens/HomeScreen.js

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BackHandler, Platform, StyleSheet, View } from 'react-native';

screens/SettingsScreen.js

@@ -7,7 +7,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useNavigation } from '@react-navigation/native';
 import compareVersions from 'compare-versions';
 import { action } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import React, { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, Platform, SectionList, StyleSheet, View } from 'react-native';