fix: disable Metal use for iOS < 18 (#220)

* fix: prevent Metal use for ios < 18 * chore: disable sponsorship option for iOS users
a-ghorbani · Feb 22, 2025 · 5aa717d · 5aa717d
1 parent 0ae0649
commit 5aa717d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/src/components/SidebarContent/SidebarContent.tsx b/src/components/SidebarContent/SidebarContent.tsx
@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useState} from 'react';
-import {TouchableOpacity, View, Alert, Linking} from 'react-native';
+import {TouchableOpacity, View, Alert, Linking, Platform} from 'react-native';
 
 import {observer} from 'mobx-react';
 import {Button, Divider, Drawer, Text} from 'react-native-paper';
@@ -93,13 +93,19 @@ export const SidebarContent: React.FC<DrawerContentComponentProps> = observer(
     };
 
     const openSponsorPage = async () => {
-      const link = 'https://buymeacoffee.com/aghorbani';
+      const link =
+        Platform.OS === 'ios' // Due to Apple's policies, we can't use Buy Me a Coffee on iOS.
+          ? 'https://github.com/a-ghorbani/pocketpal-ai'
+          : 'https://buymeacoffee.com/aghorbani';
       const canOpen = await Linking.canOpenURL(link);
       if (canOpen) {
         Linking.openURL(link);
       }
     };
 
+    const sponsorText =
+      Platform.OS === 'ios' ? 'Leave a star on GitHub' : 'Become a Sponsor';
+
     return (
       <GestureHandlerRootView style={styles.sidebarContainer}>
         <View style={styles.contentWrapper}>
@@ -210,13 +216,13 @@ export const SidebarContent: React.FC<DrawerContentComponentProps> = observer(
               style={{borderColor: theme.colors.onSurfaceDisabled}}
               labelStyle={styles.sponsorButtonLabel}
               onPress={openSponsorPage}>
-              <Text variant="bodySmall">Become a Sponsor</Text>
+              <Text variant="bodySmall">{sponsorText}</Text>
             </Button>
             <TouchableOpacity
               onPress={copyVersionToClipboard}
               style={styles.versionContainer}>
               <View style={styles.versionRow}>
-                <Text style={styles.versionLabel}>Version</Text>
+                <Text style={styles.versionLabel}>v</Text>
                 <Text style={styles.versionText}>{appInfo.version}</Text>
                 <Text style={styles.buildText}>({appInfo.build})</Text>
               </View>

diff --git a/src/components/SidebarContent/styles.ts b/src/components/SidebarContent/styles.ts
@@ -23,12 +23,12 @@ export const createStyles = (theme: MD3Theme) =>
       alignItems: 'center',
       justifyContent: 'center',
       flexWrap: 'wrap',
-      gap: 10,
+      //gap: 10,
     },
     versionRow: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: 4,
+      //gap: 4,
       justifyContent: 'center',
     },
     versionLabel: {
@@ -76,14 +76,14 @@ export const createStyles = (theme: MD3Theme) =>
     },
     versionSafeArea: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
+      justifyContent: 'space-around',
       alignItems: 'center',
       backgroundColor: theme.colors.surface,
       flexShrink: 1,
       paddingHorizontal: 16,
       paddingVertical: 16,
       flexWrap: 'wrap',
-      gap: 10,
+      //gap: 10,
     },
     sponsorButtonLabel: {
       marginHorizontal: 16,

diff --git a/src/screens/SettingsScreen/SettingsScreen.tsx b/src/screens/SettingsScreen/SettingsScreen.tsx
@@ -117,6 +117,9 @@ export const SettingsScreen: React.FC = observer(() => {
     );
   };
 
+  const isIOS18OrHigher =
+    Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 18;
+
   return (
     <SafeAreaView style={styles.safeArea} edges={['bottom']}>
       <TouchableWithoutFeedback onPress={handleOutsidePress}>
@@ -137,7 +140,9 @@ export const SettingsScreen: React.FC = observer(() => {
                         <Text
                           variant="labelSmall"
                           style={styles.textDescription}>
-                          {l10n.metalDescription}
+                          {isIOS18OrHigher
+                            ? l10n.metalDescription
+                            : 'Metal acceleration requires iOS 18 or higher. Please upgrade your device to use this feature.'}
                         </Text>
                       </View>
                       <Switch
@@ -146,6 +151,8 @@ export const SettingsScreen: React.FC = observer(() => {
                         onValueChange={value =>
                           modelStore.updateUseMetal(value)
                         }
+                        // disabled={!isIOS18OrHigher}
+                        // We don't disable for cases where the users has has set to true in the past.
                       />
                     </View>
                     <Slider

diff --git a/src/store/ModelStore.ts b/src/store/ModelStore.ts
@@ -218,6 +218,8 @@ class ModelStore {
       await this.initializeDownloadStatus();
       this.removeInvalidLocalModels();
     }
+
+    this.initializeUseMetal();
   };
 
   mergeModelLists = () => {
@@ -726,6 +728,7 @@ class ModelStore {
         cache_type_k: this.cache_type_k,
         cache_type_v: this.cache_type_v,
         n_gpu_layers: this.useMetal ? this.n_gpu_layers : 0,
+        no_gpu_devices: !this.useMetal,
       };
       const ctx = await initLlama(
         {
@@ -942,6 +945,18 @@ class ModelStore {
     }
   };
 
+  private initializeUseMetal() {
+    const isIOS18OrHigher =
+      Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 18;
+    // If we're not on iOS 18+ or not on iOS at all, force useMetal to false
+    if (!isIOS18OrHigher) {
+      runInAction(() => {
+        this.useMetal = false;
+      });
+    }
+    // If we are on iOS 18+, the persisted value will be used
+  }
+
   updateUseMetal = (useMetal: boolean) => {
     runInAction(() => {
       this.useMetal = useMetal;