Push not available scenario

src/i18n/en/screens/tabs.json

@@ -144,6 +144,7 @@
       }
     },
     "push": {
+      "notAvailable": "Your phone does not support tooot's push notification",
       "enable": {
         "direct": "Enable push notification",
         "settings": "Enable in settings"

src/i18n/zh-Hans/screens/tabs.json

@@ -144,6 +144,7 @@
       }
     },
     "push": {
+      "notAvailable": "您的机型暂不支持 tooot 推送通知",
       "enable": {
         "direct": "启用推送通知",
         "settings": "在系统设置中启用"

src/screens/Tabs/Me/Push.tsx

@@ -1,5 +1,6 @@
 import analytics from '@components/analytics'
 import Button from '@components/Button'
+import Icon from '@components/Icon'
 import { MenuContainer, MenuRow } from '@components/Menu'
 import { updateInstancePush } from '@utils/slices/instances/updatePush'
 import { updateInstancePushAlert } from '@utils/slices/instances/updatePushAlert'
@@ -12,14 +13,16 @@ import {
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
+import { useTheme } from '@utils/styles/ThemeManager'
 import * as Notifications from 'expo-notifications'
 import * as WebBrowser from 'expo-web-browser'
 import React, { useState, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AppState, Linking, ScrollView } from 'react-native'
+import { AppState, Linking, ScrollView, Text, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 const TabMePush: React.FC = () => {
+  const { theme } = useTheme()
   const { t } = useTranslation('screenTabs')
   const instanceAccount = useSelector(
     getInstanceAccount,
@@ -30,6 +33,9 @@ const TabMePush: React.FC = () => {
   const dispatch = useDispatch()
   const instancePush = useSelector(getInstancePush)
 
+  const [pushAvailable, setPushAvailable] = useState<boolean | undefined>(
+    undefined
+  )
   const [pushEnabled, setPushEnabled] = useState<boolean>()
   const [pushCanAskAgain, setPushCanAskAgain] = useState<boolean>()
   const checkPush = async () => {
@@ -39,10 +45,15 @@ const TabMePush: React.FC = () => {
     setPushCanAskAgain(settings.canAskAgain)
   }
   useEffect(() => {
+    Notifications.getExpoPushTokenAsync({
+      experienceId: '@xmflsct/tooot'
+    })
+      .then(data => setPushAvailable(!!data))
+      .catch(() => setPushAvailable(false))
     checkPush()
-    AppState.addEventListener('change', checkPush)
+    const subscription = AppState.addEventListener('change', checkPush)
     return () => {
-      AppState.removeEventListener('change', checkPush)
+      subscription.remove()
     }
   }, [])
 
@@ -54,13 +65,15 @@ const TabMePush: React.FC = () => {
 
   const alerts = useMemo(() => {
     return instancePush?.alerts
-      ? (['follow', 'favourite', 'reblog', 'mention', 'poll'] as [
+      ? (
+          ['follow', 'favourite', 'reblog', 'mention', 'poll'] as [
             'follow',
             'favourite',
             'reblog',
             'mention',
             'poll'
-        ]).map(alert => (
+          ]
+        ).map(alert => (
           <MenuRow
             key={alert}
             title={t(`me.push.${alert}.heading`)}
@@ -93,6 +106,8 @@ const TabMePush: React.FC = () => {
 
   return (
     <ScrollView>
+      {pushAvailable !== false ? (
+        <>
           {pushEnabled === false ? (
             <MenuContainer>
               <Button
@@ -104,7 +119,8 @@ const TabMePush: React.FC = () => {
                 }
                 style={{
                   marginTop: StyleConstants.Spacing.Global.PagePadding,
-              marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
+                  marginHorizontal:
+                    StyleConstants.Spacing.Global.PagePadding * 2
                 }}
                 onPress={async () => {
                   if (pushCanAskAgain) {
@@ -167,6 +183,31 @@ const TabMePush: React.FC = () => {
             />
           </MenuContainer>
           <MenuContainer>{alerts}</MenuContainer>
+        </>
+      ) : (
+        <View
+          style={{
+            flex: 1,
+            minHeight: '100%',
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+        >
+          <Icon
+            name='Frown'
+            size={StyleConstants.Font.Size.L}
+            color={theme.primaryDefault}
+          />
+          <Text
+            style={{
+              ...StyleConstants.FontStyle.M,
+              color: theme.primaryDefault
+            }}
+          >
+            {t('me.push.notAvailable')}
+          </Text>
+        </View>
+      )}
     </ScrollView>
   )
 }