Merge pull request #63 from thornbill/expo-37

Upgrade to Expo SDK 37

App.js

@@ -6,9 +6,10 @@
 import React from 'react';
 import { Platform, StatusBar, StyleSheet, View } from 'react-native';
 import { ThemeProvider } from 'react-native-elements';
-import { AppLoading, ScreenOrientation } from 'expo';
+import { AppLoading } from 'expo';
 import { Asset } from 'expo-asset';
 import * as Font from 'expo-font';
+import * as ScreenOrientation from 'expo-screen-orientation';
 import { Ionicons } from '@expo/vector-icons';
 import PropTypes from 'prop-types';
 

app.json

@@ -3,12 +3,12 @@
     "name": "Jellyfin",
     "slug": "jellyfin-expo",
     "privacy": "unlisted",
-    "sdkVersion": "36.0.0",
+    "sdkVersion": "37.0.0",
     "platforms": [
       "ios",
       "android"
     ],
-    "version": "0.1.1",
+    "version": "1.0.1",
     "orientation": "default",
     "primaryColor": "#00a4dc",
     "icon": "./assets/images/icon.png",

package.json

@@ -11,31 +11,33 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "@react-native-community/masked-view": "0.1.5",
-    "expo": "^36.0.0",
-    "expo-asset": "~8.0.0",
-    "expo-constants": "~8.0.0",
-    "expo-font": "~8.0.0",
-    "expo-web-browser": "~8.0.0",
+    "@react-native-community/masked-view": "0.1.6",
+    "expo": "^37.0.0",
+    "expo-asset": "~8.1.3",
+    "expo-constants": "~9.0.0",
+    "expo-device": "~2.1.0",
+    "expo-font": "~8.1.0",
+    "expo-screen-orientation": "~1.0.0",
+    "expo-web-browser": "~8.1.0",
     "prop-types": "^15.7.2",
     "react": "16.9.0",
     "react-lifecycles-compat": "^3.0.4",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
     "react-native-elements": "^1.1.0",
-    "react-native-gesture-handler": "~1.5.0",
-    "react-native-reanimated": "~1.4.0",
-    "react-native-safe-area-context": "0.6.0",
-    "react-native-screens": "2.0.0-alpha.12",
-    "react-native-webview": "7.4.3",
+    "react-native-gesture-handler": "~1.6.0",
+    "react-native-reanimated": "~1.7.0",
+    "react-native-safe-area-context": "0.7.3",
+    "react-native-screens": "~2.2.0",
+    "react-native-webview": "8.1.1",
     "react-navigation": "^3.0.9"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.2",
-    "babel-preset-expo": "^8.0.0",
+    "babel-preset-expo": "^8.1.0",
     "eslint": "^6.1.0",
     "eslint-plugin-react": "^7.14.3",
-    "expo-cli": "^3.0.9",
-    "jest-expo": "^36.0.0"
+    "expo-cli": "^3.17.17",
+    "jest-expo": "^37.0.0"
   },
   "private": true
 }

screens/HomeScreen.js

@@ -7,20 +7,20 @@ import React from 'react';
 import { Platform, RefreshControl, StatusBar, StyleSheet, ScrollView, View } from 'react-native';
 import { Button, Text } from 'react-native-elements';
 import { WebView } from 'react-native-webview';
-import { ScreenOrientation } from 'expo';
 import Constants from 'expo-constants';
+import * as ScreenOrientation from 'expo-screen-orientation';
 
 import Colors from '../constants/Colors';
 import StorageKeys from '../constants/Storage';
 import CachingStorage from '../utils/CachingStorage';
-import { getSafeDeviceName } from '../utils/Device';
+import { getAppName, getSafeDeviceName } from '../utils/Device';
 import JellyfinValidator from '../utils/JellyfinValidator';
 import NativeShell from '../utils/NativeShell';
 import { openBrowser } from '../utils/WebBrowser';
 
 const injectedJavaScript = `
 window.ExpoAppInfo = {
-  appName: 'Jellyfin for ${Platform.OS === "ios" ? "iOS" : "Android"}',
+  appName: '${getAppName()}',
   appVersion: '${Constants.nativeAppVersion}',
   deviceId: '${Constants.deviceId}',
   deviceName: '${getSafeDeviceName().replace(/'/g, '\\\'')}'
@@ -202,11 +202,8 @@ export default class HomeScreen extends React.Component {
             ref={ref => (this.webview = ref)}
             source={{ uri: this.state.serverUrl }}
             style={webviewStyle}
-            // Inject javascript to watch URL hash changes
-            // TODO: This should use injectedJavaScriptBeforeContentLoaded when it is available
-            //       in the react-native-webview version supported by Expo. Currently NativeShell
-            //       may not be available when jellyfin-web initially starts =/
-            injectedJavaScript={injectedJavaScript}
+            // Inject javascript for NativeShell
+            injectedJavaScriptBeforeContentLoaded={injectedJavaScript}
             // Handle messages from NativeShell
             onMessage={this.onMessage.bind(this)}
             // Make scrolling feel faster

screens/SettingsScreen.js

@@ -25,6 +25,7 @@ import Links from '../constants/Links';
 import StorageKeys from '../constants/Storage';
 import CachingStorage from '../utils/CachingStorage';
 import JellyfinValidator from '../utils/JellyfinValidator';
+import { getAppName } from '../utils/Device';
 import { openBrowser } from '../utils/WebBrowser';
 
 export default class SettingsScreen extends React.Component {
@@ -247,7 +248,7 @@ export default class SettingsScreen extends React.Component {
           />
 
           <View style={styles.infoContainer}>
-            <Text style={styles.infoText}>{`Jellyfin for ${Platform.OS === 'ios' ? 'iOS' : 'Android'}`}</Text>
+            <Text style={styles.infoText}>{`${getAppName()}`}</Text>
             <Text style={styles.infoText}>{`${Constants.nativeAppVersion} (${Constants.nativeBuildVersion})`}</Text>
             <Text style={styles.infoText}>{`Expo Version: ${Constants.expoVersion}`}</Text>
           </View>

utils/Device.js

@@ -4,6 +4,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import Constants from 'expo-constants';
+import * as Device from 'expo-device';
+
+export function getAppName() {
+  return `Jellyfin Mobile (${Device.osName})`;
+}
 
 export function getSafeDeviceName() {
   let safeName = Constants.deviceName
@@ -17,5 +22,5 @@ export function getSafeDeviceName() {
     return safeName;
   }
 
-  return 'Jellyfin Mobile Device';
+  return Device.modelName || 'Jellyfin Mobile Device';
 }