offline banner fixes, removed background tiles, small layout fixes

src/components/ConnectionBanner/ConnectionBanner.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { View, Text } from 'react-native';
 import { useConnection } from 'src/contexts/ConnectionContext';
 import { styles } from './styles';
+import { initializeBanner, showBanner } from 'src/utils/bannerUtils';
 
 const ConnectionBanner = () => {
   const netInfo = useConnection();
@@ -10,25 +11,20 @@ const ConnectionBanner = () => {
   const [hadConnection, setHadConnection] = useState(netInfo?.isInternetReachable);
 
   useEffect(() => {
+    initializeBanner(setVisible, setBannerMessage);
+
     if (netInfo?.isInternetReachable !== null) {
       if (hadConnection === false && netInfo?.isInternetReachable) {
-        setBannerMessage('Internet connection restored!');
-        showBanner();
+        showBanner('Internet connection restored!');
       } else if (netInfo?.isInternetReachable === false) {
-        setBannerMessage('No internet connection!');
-        showBanner();
+        showBanner('No internet connection!');
+      } else if (netInfo?.isInternetReachable && !netInfo?.isConnected) {
+        showBanner('Slow internet connection!');
       }
       setHadConnection(netInfo?.isInternetReachable);
     }
   }, [netInfo?.isInternetReachable]);
 
-  const showBanner = () => {
-    setVisible(true);
-    setTimeout(() => {
-      setVisible(false);
-    }, 3000);
-  };
-
   if (!visible) return null;
 
   return (

src/components/ConnectionBanner/styles.tsx

@@ -11,7 +11,8 @@ export const styles = StyleSheet.create({
     padding: 10,
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 1
+    zIndex: 1,
+    elevation: 1
   },
   text: {
     color: 'white',

src/screens/InAppScreens/MapScreen/index.tsx

@@ -539,7 +539,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
       maximumZ={15}
       maximumNativeZ={13}
       tileCachePath={cacheDir !== localVisitedDir ? `${cacheDir}` : undefined}
-      shouldReplaceMapContent
+      // shouldReplaceMapContent
       minimumZ={0}
       offlineMode={!isConnected}
       opacity={opacity}
@@ -681,7 +681,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
         zoomControlEnabled={false}
         onPress={handleMapPress}
         style={styles.map}
-        mapType={Platform.OS == 'android' ? 'none' : 'standard'}
+        mapType={'standard'}
         maxZoomLevel={15}
         minZoomLevel={0}
         onRegionChangeComplete={findFeaturesInVisibleMapArea}
@@ -690,7 +690,8 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
         renderCluster={(cluster) => <ClusterItem key={cluster.id} cluster={cluster} />}
       >
         {renderedGeoJSON}
-        {renderMapTiles(tilesBaseURL, localTileDir, 1)}
+        {/* nm tiles */}
+        {/* {renderMapTiles(tilesBaseURL, localTileDir, 1)} */}
         {renderMapTiles(gridUrl, localGridDir, 2)}
         {userId &&
           renderMapTiles(type === 1 ? visitedUNTiles : visitedTiles, localVisitedDir, 2, 0.5)}

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -68,7 +68,6 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
         navigation.getParent()?.setOptions({
           tabBarStyle: {
             display: 'flex',
-            position: 'absolute',
             ...Platform.select({
               android: {
                 height: 58

src/screens/InAppScreens/TravelsScreen/CountriesScreen/index.tsx

@@ -21,8 +21,8 @@ import InfoIcon from 'assets/icons/info-solid.svg';
 import { NAVIGATION_PAGES } from 'src/types';
 
 const CountriesScreen = () => {
-  const token = storage.get('token', StoreType.STRING) as string || '';
-  const { data } = useGetSlowQuery(token);
+  const token = storage.get('token', StoreType.STRING) as string;
+  const { data } = useGetSlowQuery(String(token));
   const { mutate: updateSlow } = usePostSetSlowMutation();
   const [slow, setSlow] = useState<SlowData[] | null>(null);
   const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);

src/screens/InAppScreens/TravelsScreen/DareScreen/index.tsx

@@ -23,8 +23,8 @@ import { NAVIGATION_PAGES } from 'src/types';
 import { useRegion } from 'src/contexts/RegionContext';
 
 const DareScreen = () => {
-  const token = (storage.get('token', StoreType.STRING) as string) || '';
-  const { data: megaregions } = useGetMegaregionsDareQuery(token, true);
+  const token = (storage.get('token', StoreType.STRING) as string);
+  const { data: megaregions } = useGetMegaregionsDareQuery(String(token), true);
   const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);
   const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
     id: 1,
@@ -55,7 +55,6 @@ const DareScreen = () => {
       navigation.getParent()?.setOptions({
         tabBarStyle: {
           display: 'flex',
-          position: 'absolute',
           ...Platform.select({
             android: {
               height: 58

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -26,14 +26,14 @@ import { NAVIGATION_PAGES } from 'src/types';
 import { useRegion } from 'src/contexts/RegionContext';
 
 const RegionsScreen = () => {
-  const token = storage.get('token', StoreType.STRING) as string || '';
-  const { data: megaregions } = useGetMegaregionsQuery(token, true);
+  const token = storage.get('token', StoreType.STRING) as string;
+  const { data: megaregions } = useGetMegaregionsQuery(String(token), true);
   const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);
   const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
     id: 1,
     name: 'SOUTHERN EUROPE'
   });
-  const { data: regionsQe } = useGetRegionQeQuery(selectedMega.id, token, true);
+  const { data: regionsQe } = useGetRegionQeQuery(selectedMega.id, String(token), true);
   const [total, setTotal] = useState(0);
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
   const [contentIndex, setContentIndex] = useState(0);
@@ -57,7 +57,6 @@ const RegionsScreen = () => {
       navigation.getParent()?.setOptions({
         tabBarStyle: {
           display: 'flex',
-          position: 'absolute',
           ...Platform.select({
             android: {
               height: 58

src/screens/LoginScreen/index.tsx

@@ -97,7 +97,7 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
               <Input
                 header={'Password'}
                 isPrivate={true}
-                placeholder={'Login'}
+                placeholder={'Password'}
                 onChange={props.handleChange('pass')}
                 value={props.values.pass}
                 onBlur={props.handleBlur('pass')}

src/utils/bannerUtils.ts

@@ -0,0 +1,20 @@
+let setBannerVisible: (visible: boolean) => void;
+let setBannerMessage: (message: string) => void;
+
+export const initializeBanner = (
+  setVisible: (visible: boolean) => void,
+  setMessage: (message: string) => void
+) => {
+  setBannerVisible = setVisible;
+  setBannerMessage = setMessage;
+};
+
+export const showBanner = (message: string) => {
+  if (setBannerVisible && setBannerMessage) {
+    setBannerMessage(message);
+    setBannerVisible(true);
+    setTimeout(() => {
+      setBannerVisible(false);
+    }, 3000);
+  }
+};

src/utils/request.ts

@@ -1,9 +1,11 @@
 import axios from 'axios';
 import { API_URL, APP_VERSION } from '../constants';
 import { Platform } from 'react-native';
+import { showBanner } from './bannerUtils';
 
 export const request = axios.create({
-  baseURL: API_URL
+  baseURL: API_URL,
+  timeout: 10000,
 });
 
 request.interceptors.request.use(config => {
@@ -13,3 +15,13 @@ request.interceptors.request.use(config => {
 }, error => {
   return Promise.reject(error);
 });
+
+request.interceptors.response.use(response => {
+  return response;
+}, error => {
+  if (error.code === 'ECONNABORTED') {
+    error.isTimeout = true;
+    showBanner('Slow internet connection!');
+  }
+  return Promise.reject(error);
+});