SEL-187: Make bottom layout scrollable on smaller screens (#525)

* fix design check

* add an option to disable local sending of sentry events

* better sentry enable / disable

* fix scan passport height

* make bottom layout scrollable so it doesn't squish top screen

* simpler logic check. don't create new env var

* fix internet connection issues

* readd comment

* use isConnected instead of internet reachable

* use a dynamic bottom panel height

* add missing recovery screens

* move aesop below

* remove dupe export

* fix rebase

* fix android package download issue

app/src/Sentry.ts

@@ -1,8 +1,10 @@
 import { SENTRY_DSN } from '@env';
 import * as Sentry from '@sentry/react-native';
 
+export const isSentryDisabled = !SENTRY_DSN;
+
 export const initSentry = () => {
-  if (!SENTRY_DSN) {
+  if (isSentryDisabled) {
     return null;
   }
 
@@ -32,7 +34,7 @@ export const captureException = (
   error: Error,
   context?: Record<string, any>,
 ) => {
-  if (!SENTRY_DSN) {
+  if (isSentryDisabled) {
     return;
   }
   Sentry.captureException(error, {
@@ -44,7 +46,7 @@ export const captureMessage = (
   message: string,
   context?: Record<string, any>,
 ) => {
-  if (!SENTRY_DSN) {
+  if (isSentryDisabled) {
     return;
   }
   Sentry.captureMessage(message, {
@@ -53,5 +55,5 @@ export const captureMessage = (
 };
 
 export const wrapWithSentry = (App: React.ComponentType) => {
-  return SENTRY_DSN ? Sentry.wrap(App) : App;
+  return isSentryDisabled ? App : Sentry.wrap(App);
 };

app/src/hooks/useAesopRedesign.ts

@@ -1,7 +1,7 @@
 import { IS_TEST_BUILD } from '@env';
 
 export const shouldShowAesopRedesign = (): boolean => {
-  return IS_TEST_BUILD === 'true';
+  return JSON.parse(IS_TEST_BUILD);
 };
 
 export const useAesopRedesign = (): boolean => {

app/src/hooks/useAppUpdates.ts

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Linking } from 'react-native';
 import { checkVersion } from 'react-native-check-version';
 
@@ -8,11 +8,13 @@ export const useAppUpdates = (): [boolean, () => void, boolean] => {
   const [newVersionUrl, setNewVersionUrl] = useState<string | null>(null);
   const [isModalDismissed, setIsModalDismissed] = useState(false);
 
-  checkVersion().then(version => {
-    if (version.needsUpdate) {
-      setNewVersionUrl(version.url);
-    }
-  });
+  useEffect(() => {
+    checkVersion().then(version => {
+      if (version.needsUpdate) {
+        setNewVersionUrl(version.url);
+      }
+    });
+  }, []);
 
   const showAppUpdateModal = () => {
     navigation.navigate('Modal', {
@@ -22,9 +24,8 @@ export const useAppUpdates = (): [boolean, () => void, boolean] => {
       buttonText: 'Update and restart',
       onButtonPress: async () => {
         if (newVersionUrl !== null) {
-          await Linking.openURL(
-            newVersionUrl, // TODO or use: `Platform.OS === 'ios' ? appStoreUrl : playStoreUrl`
-          );
+          // TODO or use: `Platform.OS === 'ios' ? appStoreUrl : playStoreUrl`
+          await Linking.openURL(newVersionUrl);
         }
       },
       onModalDismiss: () => {

app/src/hooks/useConnectionModal.ts

@@ -2,8 +2,8 @@ import { useNetInfo } from '@react-native-community/netinfo';
 import { useEffect } from 'react';
 import { Linking, Platform } from 'react-native';
 
-import { useModal } from '../hooks/useModal';
 import { navigationRef } from '../Navigation';
+import { useModal } from './useModal';
 
 const connectionModalParams = {
   titleText: 'Internet connection error',
@@ -21,7 +21,7 @@ const connectionModalParams = {
 } as const;
 
 export default function useConnectionModal() {
-  const { isInternetReachable } = useNetInfo();
+  const { isConnected } = useNetInfo();
   const { showModal, dismissModal, visible } = useModal(connectionModalParams);
 
   useEffect(() => {
@@ -29,12 +29,12 @@ export default function useConnectionModal() {
       return;
     }
 
-    if (isInternetReachable === false && !visible) {
+    if (isConnected === false && !visible) {
       showModal();
-    } else if (visible && isInternetReachable !== false) {
+    } else if (visible && isConnected !== false) {
       dismissModal();
     }
-  }, [isInternetReachable, dismissModal, visible, navigationRef.isReady()]);
+  }, [isConnected, dismissModal, visible, navigationRef.isReady()]);
 
   return {
     visible,

app/src/layouts/ExpandableBottomLayout.tsx

@@ -1,10 +1,21 @@
 import React from 'react';
-import { StatusBar, StyleSheet } from 'react-native';
+import {
+  Dimensions,
+  PixelRatio,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { View, ViewProps } from 'tamagui';
 
 import { black, white } from '../utils/colors';
 
+// Get the current font scale factor
+const fontScale = PixelRatio.getFontScale();
+// fontScale > 1 means the user has increased text size in accessibility settings
+const isLargerTextEnabled = fontScale > 1;
+
 interface ExpandableBottomLayoutProps extends ViewProps {
   children: React.ReactNode;
   backgroundColor: string;
@@ -90,12 +101,29 @@ const BottomSection: React.FC<BottomSectionProps> = ({
   const { bottom: safeAreaBottom } = useSafeAreaInsets();
   const incomingBottom = props.paddingBottom ?? props.pb ?? 0;
   const minBottom = Math.max(safeAreaBottom, 10);
-
   const totalBottom =
     typeof incomingBottom === 'number' ? minBottom + incomingBottom : minBottom;
+
+  let panelHeight: number | 'auto' = 'auto';
+  // set bottom section height to 38% of screen height
+  // and wrap children in a scroll view if larger text is enabled
+  if (isLargerTextEnabled) {
+    const windowHeight = Dimensions.get('window').height;
+    panelHeight = windowHeight * 0.38;
+    children = (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ flexGrow: 1 }}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
   return (
     <View
       {...props}
+      height={panelHeight}
       style={[styles.bottomSection, style]}
       paddingBottom={totalBottom}
     >

app/src/screens/Settings/ModalScreen.tsx

@@ -35,6 +35,7 @@ interface ModalScreenProps extends StaticScreenProps<ModalParams> {}
 
 const ModalScreen: React.FC<ModalScreenProps> = ({ route: { params } }) => {
   const navigation = useNavigation();
+
   const onButtonPressed = useCallback(async () => {
     confirmTap();
     try {
@@ -43,13 +44,13 @@ const ModalScreen: React.FC<ModalScreenProps> = ({ route: { params } }) => {
     } catch (error) {
       console.error(error);
     }
-  }, []);
+  }, [params?.onButtonPress]);
 
   const onClose = useCallback(() => {
     impactLight();
     navigation.goBack();
     params?.onModalDismiss();
-  }, [params]);
+  }, [params?.onModalDismiss]);
 
   return (
     <ModalBackDrop>