Add support for maintenance mode

Author: amrmelsayed

src/app/_layout.tsx

@@ -7,7 +7,7 @@ import { EnhancedStore } from '@reduxjs/toolkit'
 import React, { useEffect, useState } from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
-import { LoadingScreen } from '@/components'
+import { MaintenanceScreen, LoadingScreen } from '@/components'
 // eslint-disable-next-line camelcase
 import { useFonts, Inter_400Regular } from '@expo-google-fonts/inter'
 import RootContainer from '@/components/RootContainer'
@@ -82,6 +82,10 @@ const RootLayout = () => {
     return <LoadingScreen />
   }
 
+  if (process.env.EXPO_PUBLIC_MAINTENANCE_MODE === 'true') {
+    return <MaintenanceScreen />
+  }
+
   let backgroundColor = getThemeStyle(colorScheme, 'backgroundColor')
 
   return (

src/components/MaintenanceScreen.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import RootContainer from './RootContainer'
+import RootImageBackground from './RootImageBackground'
+import { LogoIcon } from './svg'
+
+const MaintenanceScreen: React.FC = () => {
+  return (
+    <RootContainer>
+      <RootImageBackground>
+        <View className='flex-1'>
+          <View className='w-full p-8 items-center justify-start gap-4'>
+            <LogoIcon />
+            <Text className='text-center text-white text-xl' style={{ fontFamily: 'Inter' }}>
+              Ansari Chat is currently under maintenance.
+            </Text>
+            <Text className='text-center text-white text-xl' style={{ fontFamily: 'Inter' }}>
+              We are working hard to bring you the best experience possible.
+            </Text>
+            <Text className='text-center text-white text-xl' style={{ fontFamily: 'Inter' }}>
+              Thank you for your patience!
+            </Text>
+          </View>
+        </View>
+      </RootImageBackground>
+    </RootContainer>
+  )
+}
+
+export default MaintenanceScreen

src/components/index.ts

@@ -2,6 +2,7 @@ export { default as ConfirmationDialog } from './ConfirmationDialog'
 export { default as Footer } from './Footer'
 export { default as Header } from './Header'
 export { default as LoadingScreen } from './LoadingScreen'
+export { default as MaintenanceScreen } from './MaintenanceScreen'
 export { default as Subscription } from './Subscription'
 export { default as Toast } from './Toast'
 export { default as ChatContainer } from './chat/ChatContainer'

src/store/slices/authSlice.ts

@@ -130,6 +130,10 @@ export async function loadAuthState() {
     }>
   }
 
+  if (process.env.EXPO_PUBLIC_MAINTENANCE_MODE === 'true') {
+    return createAuthState(initialAuthState)
+  }
+
   const apiService = new ApiService()
   const baseURL = process.env.EXPO_PUBLIC_API_V2_URL
   let accessToken = await apiService.getAccessTokenFromStorage()