Injimob [3622] [3627] - BANNER ISSUE AND BRANDING CHANGES ISSUES (#2130)

* [INJIMOB-3622]: cleared the bug related to banner Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: updated .talismanrc file Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: cleared the bug related to banner Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: cleared the bug related to banner Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: updated .talismanrc Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: updated update the snapshots for tests Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: clear the issue according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3627]: added icons to the screen Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3627]: added .talismanrc Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3639] fix: modify face permission consent app name Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3628] fix status tooltip content overflow. Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> * [INJIMOB-3622]: cleared the header overlaping issue Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622] fix: banner hidden in backup / restore screen Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3622] fix: banner hidden in vc detail view and key management screen Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3622] fix: banner hidden inhelp screen Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3622] refactor: format VC detail view Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3637] fix extra header space across app screens Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> * [INJIMOB-3635]: updatd the pin background color to transparent Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3637] fix extra header space across app screens Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> * [INJIMOB-3565] fix: modal screen showing bottom tabs Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3565] fix: modal screen showing bottom tabs Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3635]: added the color back Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3565] fix: bottom tab bar overlaying the safe area Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3635]: updated failing snap shots Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3635]: cleared the icon issue Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: cleared the scroll issue which is happening with vc view screen Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622]: cleared the issues rised by code rabbit Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3565] fix: replace initialWindowMetrics padding with safe area insets initialWindowMetrics will be getting the data only on iniitial phase Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3635]: cleared the icon issue Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3565] fix: iOS notification bar not showing white bg Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3565] refactor: replace SafeAreaView import from react-native-safe-area-context Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3565] refactor: move SafeAreaProvider to root component Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3565] refactor: extract tab bar visibility setter to hook Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3565] refactor: optimize imports Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3565] refactor: revert fix - bottom tab visible in safe area on backup / restore screen Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3565] refactor: fix failing tests Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3622]: cleared the issues rised by banner bar Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622] refactor: optimize import Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3622]: clear the jitpack issue Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [INJIMOB-3622] refactor: reove unused code Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3622] refactor: optimize import Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> * [INJIMOB-3622] refactor: remove jitpack github repo Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> --------- Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> Signed-off-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com> Signed-off-by: jaswanthkumartw <jaswanthkumar.p@thoughtworks.com> Co-authored-by: KiruthikaJeyashankar <kiruthikavjshankar@gmail.com> Co-authored-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com>
2026-01-09 05:27:57 -05:00 · 2025-11-19 00:15:46 +05:30
parent 358f2e9794
commit 522104811c
37 changed files with 1027 additions and 718 deletions
--- a/components/BannerNotification.tsx
+++ b/components/BannerNotification.tsx
@@ -10,7 +10,7 @@ import SuccessToastIcon from '../assets/Success_Toast_Icon.svg';

 export const BannerNotification: React.FC<BannerNotificationProps> = props => {
  return (
-    <View {...testIDProps(props.testId)}>
+    <View {...testIDProps(props.testId)} style={Theme.BannerStyles.wrapper}>
      <Row
        style={[Theme.BannerStyles.container, Theme.BannerStyles[props.type]]}>
        <Row fill>
--- a/components/BannerNotificationContainer.tsx
+++ b/components/BannerNotificationContainer.tsx
@@ -15,7 +15,7 @@ import {useSettingsScreen} from '../screens/Settings/SettingScreenController';
 export const BannerNotificationContainer: React.FC<
  BannerNotificationContainerProps
 > = props => {
-  const { showVerificationStatusBanner = true } = props;
+  const {showVerificationStatusBanner = true} = props;
  const scanScreenController = useScanScreen();
  const settingsScreenController = useSettingsScreen(props);
  const showQuickShareSuccessBanner =
@@ -23,18 +23,21 @@ export const BannerNotificationContainer: React.FC<

  const bannerNotificationController = UseBannerNotification();
  const WalletBindingSuccess = bannerNotificationController.isBindingSuccess;
-  const reverificationSuccessObject = bannerNotificationController.isReverificationSuccess;
-  const reverificationFailureObject = bannerNotificationController.isReverificationFailed;
-  const { t } = useTranslation('BannerNotification');
+  const reverificationSuccessObject =
+    bannerNotificationController.isReverificationSuccess;
+  const reverificationFailureObject =
+    bannerNotificationController.isReverificationFailed;
+  const {t} = useTranslation('BannerNotification');
  const rt = useTranslation('RequestScreen').t;
-  const verificationStatus = bannerNotificationController.verificationStatus || null;
+  const verificationStatus =
+    bannerNotificationController.verificationStatus || null;

  return (
-    <View style={[{position: 'absolute', zIndex: 100}]}>
+    <View style={Theme.BannerStyles.bannerStackContainer}>
      <BackupAndRestoreBannerNotification />

      {settingsScreenController.isKeyOrderSet === true && (
-        <View style={Theme.BannerStyles.topBanner}>
+        <View>
          <BannerNotification
            type={BannerStatusType.SUCCESS}
            message={t('keyPreferenceSuccess')}
@@ -46,7 +49,7 @@ export const BannerNotificationContainer: React.FC<
      )}

      {settingsScreenController.isKeyOrderSet === false && (
-        <View style={Theme.BannerStyles.topBanner}>
+        <View>
          <BannerNotification
            type={BannerStatusType.ERROR}
            message={t('keyPreferenceError')}
@@ -58,7 +61,7 @@ export const BannerNotificationContainer: React.FC<
      )}

      {WalletBindingSuccess && (
-        <View style={Theme.BannerStyles.topBanner}>
+        <View>
          <BannerNotification
            type={BannerStatusType.SUCCESS}
            message={t('activated')}
@@ -72,10 +75,13 @@ export const BannerNotificationContainer: React.FC<
      )}

      {reverificationSuccessObject.status && (
-        <View style={Theme.BannerStyles.topBanner}>
+        <View>
          <BannerNotification
            type={BannerStatusType.SUCCESS}
-            message={t(`reverifiedSuccessfully.${reverificationSuccessObject.statusValue}`, { vcType: reverificationSuccessObject.vcType })}
+            message={t(
+              `reverifiedSuccessfully.${reverificationSuccessObject.statusValue}`,
+              {vcType: reverificationSuccessObject.vcType},
+            )}
            onClosePress={
              bannerNotificationController.RESET_REVIRIFICATION_SUCCESS
            }
@@ -86,7 +92,7 @@ export const BannerNotificationContainer: React.FC<
      )}

      {showQuickShareSuccessBanner && (
-        <View style={Theme.BannerStyles.topBanner}>
+        <View>
          <BannerNotification
            type={BannerStatusType.SUCCESS}
            message={rt('status.accepted.message')}
@@ -130,8 +136,13 @@ export const BannerNotificationContainer: React.FC<
      {reverificationFailureObject.status && (
        <BannerNotification
          type={BannerStatusType.ERROR}
-          message={t(`reverificationFailed.${reverificationFailureObject.statusValue}`, { vcType: reverificationFailureObject.vcType })}
-          onClosePress={bannerNotificationController.RESET_REVERIFICATION_FAILURE}
+          message={t(
+            `reverificationFailed.${reverificationFailureObject.statusValue}`,
+            {vcType: reverificationFailureObject.vcType},
+          )}
+          onClosePress={
+            bannerNotificationController.RESET_REVERIFICATION_FAILURE
+          }
          key={'reverificationFailedPopup'}
          testId={'reverificationFailedPopup'}
        />
--- a/components/HelpScreen.tsx
+++ b/components/HelpScreen.tsx
@@ -1,11 +1,12 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {FlatList, Linking, Pressable, SafeAreaView, View} from 'react-native';
+import {FlatList, Linking, Pressable, View} from 'react-native';
 import {Modal} from './ui/Modal';
 import {Column, Text} from './ui';
 import {Theme} from './ui/styleUtils';
 import {BannerNotificationContainer} from './BannerNotificationContainer';
 import getAllConfigurations from '../shared/api';
+import {SafeAreaView} from "react-native-safe-area-context";

 export const HelpScreen: React.FC<HelpScreenProps> = props => {
  const {t} = useTranslation('HelpScreen');
@@ -362,8 +363,8 @@ export const HelpScreen: React.FC<HelpScreenProps> = props => {
        onDismiss={() => {
          setShowHelpPage(!showHelpPage);
        }}>
-        <BannerNotificationContainer />
-        <SafeAreaView style={{flex: 1}}>
+        <SafeAreaView style={{flex: 1, position: "relative"}}>
+          <BannerNotificationContainer />
          <Column fill padding="10" align="space-between">
            <FlatList
              ref={listingRef}
--- a/components/VC/common/VCItemField.tsx
+++ b/components/VC/common/VCItemField.tsx
@@ -35,8 +35,6 @@ export const VCItemFieldName = ({
      {fieldName == STATUS_FIELD_NAME && (
        <CustomTooltip
          testID="statusToolTip"
-          width={Dimensions.get('screen').width * 0.8}
-          height={Dimensions.get('screen').height * 0.28}
          triggerComponent={SvgImage.info()}
          triggerComponentStyles={{marginLeft: 2, marginTop: 2}}
          toolTipContent={<StatusTooltipContent />}
--- a/components/VC/common/VcStatustooTip.tsx
+++ b/components/VC/common/VcStatustooTip.tsx
@@ -1,30 +1,56 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { Column } from "../../ui";
-import { Theme } from "../../ui/styleUtils";
-import { Text } from "../../ui";
-import { VC_STATUS_KEYS } from "./VCUtils";
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {View} from 'react-native';
+import {Column, Row} from '../../ui';
+import {Theme} from '../../ui/styleUtils';
+import {Text} from '../../ui';
+import {VC_STATUS_KEYS} from './VCUtils';
+import ExpiredStatus from '../../../assets/Expired_Status.svg';
+import RevokedStatus from '../../../assets/Revoked_Status.svg';
+import ValidStatus from '../../../assets/Valid_Status.svg';
+import PendingStatus from '../../../assets/Pending_Status.svg';
+
+const statusIcons: Record<string, React.FC<any>> = {
+  valid: ValidStatus,
+  pending: PendingStatus,
+  expired: ExpiredStatus,
+  revoked: RevokedStatus,
+};

 export const StatusTooltipContent = () => {
-    const { t } = useTranslation('ViewVcModal');
-  
-    return (
-      <Column align="center" style={{marginTop:20}}>
-        {VC_STATUS_KEYS.map(key => (
-          <View key={key} style={{ marginBottom: 20 }}>
-            <Text weight="semibold">{t(`statusToolTipContent.${key}.title`)}</Text>
-            <Text
-              weight="regular"
-              style={[
-                Theme.Styles.tooltipContentDescription,
-                { marginTop: 3 },
-              ]}>
-              {t(`statusToolTipContent.${key}.description`)}
-            </Text>
-          </View>
-        ))}
-      </Column>
-    );
-  };
-  
+  const {t} = useTranslation('ViewVcModal');
+
+  return (
+    <Column>
+      {VC_STATUS_KEYS.map((key, index) => {
+        const IconComponent = statusIcons[key];
+        const isLast = index === VC_STATUS_KEYS.length - 1;
+        return (
+          <Row key={key} style={{width: '100%'}}>
+            <View style={{marginRight: 6}}>
+              <IconComponent width={20} height={20} />
+            </View>
+            <View
+              style={{
+                marginBottom: isLast ? 0 : 15,
+                marginTop: 1,
+                flexShrink: 1,
+              }}>
+              <Text weight="semibold" style={Theme.Styles.tooltipContentTitle}>
+                {t(`statusToolTipContent.${key}.title`)}
+              </Text>
+              <Text
+                weight="regular"
+                style={[
+                  Theme.Styles.tooltipContentDescription,
+                  {marginTop: 3},
+                ]}>
+                {t(`statusToolTipContent.${key}.description`)}
+              </Text>
+            </View>
+          </Row>
+        );
+      })}
+    </Column>
+  );
+};
--- a/components/snapshots/BannerNotification.test.tsx.snap
+++ b/components/snapshots/BannerNotification.test.tsx.snap
@@ -4,6 +4,12 @@ exports[`BannerNotification Component should match snapshot with different testI
 <View
  accessibilityLabel="customBanner"
  accessible={true}
+  style={
+    {
+      "alignSelf": "center",
+      "width": "100%",
+    }
+  }
 >
  <View
    accessible={true}
@@ -179,6 +185,12 @@ exports[`BannerNotification Component should match snapshot with error status 1`
 <View
  accessibilityLabel="bannerTest"
  accessible={true}
+  style={
+    {
+      "alignSelf": "center",
+      "width": "100%",
+    }
+  }
 >
  <View
    accessible={true}
@@ -354,6 +366,12 @@ exports[`BannerNotification Component should match snapshot with in progress sta
 <View
  accessibilityLabel="bannerTest"
  accessible={true}
+  style={
+    {
+      "alignSelf": "center",
+      "width": "100%",
+    }
+  }
 >
  <View
    accessible={true}
@@ -529,6 +547,12 @@ exports[`BannerNotification Component should match snapshot with long message 1`
 <View
  accessibilityLabel="bannerTest"
  accessible={true}
+  style={
+    {
+      "alignSelf": "center",
+      "width": "100%",
+    }
+  }
 >
  <View
    accessible={true}
@@ -704,6 +728,12 @@ exports[`BannerNotification Component should match snapshot with success status
 <View
  accessibilityLabel="bannerTest"
  accessible={true}
+  style={
+    {
+      "alignSelf": "center",
+      "width": "100%",
+    }
+  }
 >
  <View
    accessible={true}
--- a/components/snapshots/BannerNotificationContainer.test.tsx.snap
+++ b/components/snapshots/BannerNotificationContainer.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`BannerNotificationContainer Component should match snapshot with no banners visible 1`] = `
 <View
  style={
-    [
-      {
-        "position": "absolute",
-        "zIndex": 100,
-      },
-    ]
+    {
+      "alignItems": "center",
+      "position": "absolute",
+      "width": "100%",
+      "zIndex": 100,
+    }
  }
 />
 `;
@@ -16,12 +16,12 @@ exports[`BannerNotificationContainer Component should match snapshot with no ban
 exports[`BannerNotificationContainer Component should match snapshot with verification banner disabled 1`] = `
 <View
  style={
-    [
-      {
-        "position": "absolute",
-        "zIndex": 100,
-      },
-    ]
+    {
+      "alignItems": "center",
+      "position": "absolute",
+      "width": "100%",
+      "zIndex": 100,
+    }
  }
 />
 `;
@@ -29,12 +29,12 @@ exports[`BannerNotificationContainer Component should match snapshot with verifi
 exports[`BannerNotificationContainer Component should match snapshot with verification banner enabled 1`] = `
 <View
  style={
-    [
-      {
-        "position": "absolute",
-        "zIndex": 100,
-      },
-    ]
+    {
+      "alignItems": "center",
+      "position": "absolute",
+      "width": "100%",
+      "zIndex": 100,
+    }
  }
 />
 `;
--- a/components/snapshots/HelpScreen.test.tsx.snap
+++ b/components/snapshots/HelpScreen.test.tsx.snap
@@ -37,10 +37,19 @@ exports[`HelpScreen Component should match snapshot when disabled 1`] = `
      Help
    </Text>
  </View>,
-  <RCTSafeAreaView
+  <RNCSafeAreaView
+    edges={
+      {
+        "bottom": "additive",
+        "left": "additive",
+        "right": "additive",
+        "top": "additive",
+      }
+    }
    style={
      {
        "flex": 1,
+        "position": "relative",
      }
    }
  >
@@ -1636,7 +1645,7 @@ exports[`HelpScreen Component should match snapshot when disabled 1`] = `
        </View>
      </RCTScrollView>
    </View>
-  </RCTSafeAreaView>,
+  </RNCSafeAreaView>,
 ]
 `;

@@ -1677,10 +1686,19 @@ exports[`HelpScreen Component should match snapshot with BackUp source 1`] = `
      Help
    </Text>
  </View>,
-  <RCTSafeAreaView
+  <RNCSafeAreaView
+    edges={
+      {
+        "bottom": "additive",
+        "left": "additive",
+        "right": "additive",
+        "top": "additive",
+      }
+    }
    style={
      {
        "flex": 1,
+        "position": "relative",
      }
    }
  >
@@ -3276,7 +3294,7 @@ exports[`HelpScreen Component should match snapshot with BackUp source 1`] = `
        </View>
      </RCTScrollView>
    </View>
-  </RCTSafeAreaView>,
+  </RNCSafeAreaView>,
 ]
 `;

@@ -3317,10 +3335,19 @@ exports[`HelpScreen Component should match snapshot with Inji source 1`] = `
      Help
    </Text>
  </View>,
-  <RCTSafeAreaView
+  <RNCSafeAreaView
+    edges={
+      {
+        "bottom": "additive",
+        "left": "additive",
+        "right": "additive",
+        "top": "additive",
+      }
+    }
    style={
      {
        "flex": 1,
+        "position": "relative",
      }
    }
  >
@@ -4916,7 +4943,7 @@ exports[`HelpScreen Component should match snapshot with Inji source 1`] = `
        </View>
      </RCTScrollView>
    </View>
-  </RCTSafeAreaView>,
+  </RNCSafeAreaView>,
 ]
 `;

@@ -4957,10 +4984,19 @@ exports[`HelpScreen Component should match snapshot with keyManagement source 1`
      Help
    </Text>
  </View>,
-  <RCTSafeAreaView
+  <RNCSafeAreaView
+    edges={
+      {
+        "bottom": "additive",
+        "left": "additive",
+        "right": "additive",
+        "top": "additive",
+      }
+    }
    style={
      {
        "flex": 1,
+        "position": "relative",
      }
    }
  >
@@ -6556,6 +6592,6 @@ exports[`HelpScreen Component should match snapshot with keyManagement source 1`
        </View>
      </RCTScrollView>
    </View>
-  </RCTSafeAreaView>,
+  </RNCSafeAreaView>,
 ]
 `;
--- a/components/ui/Header.tsx
+++ b/components/ui/Header.tsx
@@ -4,10 +4,8 @@ import {Column, Row} from './Layout';
 import {Theme} from './styleUtils';
 import testIDProps from '../../shared/commonUtil';
 import {BackButton} from './backButton/BackButton';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';

 export const Header: React.FC<HeaderProps> = ({goBack, title, testID}) => {
-  const insets = useSafeAreaInsets();
  return (
    <Column safe align="center" testID={testID}>
      <Row elevation={2}>
@@ -20,7 +18,6 @@ export const Header: React.FC<HeaderProps> = ({goBack, title, testID}) => {
            marginBottom: 22,
            marginVertical: 16,
            marginLeft: 10,
-            paddingTop: insets.top,
          }}>
          <BackButton onPress={goBack} />
          <Row fill align={'center'}>
--- a/components/ui/ToolTip.tsx
+++ b/components/ui/ToolTip.tsx
@@ -1,35 +1,132 @@
-import {Tooltip} from 'react-native-elements';
-import {Centered} from './Layout';
-import React from 'react';
+import React, {useRef, useState} from 'react';
+import {
+  Modal,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Pressable,
+  Dimensions,
+  findNodeHandle,
+  UIManager,
+} from 'react-native';
 import {Theme} from './styleUtils';
-import testIDProps from '../../shared/commonUtil';
-import {StyleProp} from 'react-native';
-import {ViewStyle} from 'react-native';
-
-export const CustomTooltip: React.FC<CustomTooltipProps> = props => {
-  return (
-    <Tooltip
-      {...testIDProps(props.testID)}
-      popover={props.toolTipContent}
-      width={props.width}
-      height={props.height}
-      withPointer={true}
-      withOverlay={false}
-      skipAndroidStatusBar={true}
-      pointerColor={Theme.Colors.toolTipPointerColor}
-      containerStyle={Theme.Styles.tooltipContainerStyle}>
-      <Centered style={props.triggerComponentStyles} fill>
-        {props.triggerComponent}
-      </Centered>
-    </Tooltip>
-  );
-};

 interface CustomTooltipProps {
-  width: number;
-  height: number;
-  triggerComponent: React.ReactElement;
-  triggerComponentStyles: StyleProp<ViewStyle>;
-  testID: string;
-  toolTipContent?: React.ReactElement;
+  triggerComponent: React.ReactNode;
+  toolTipContent: React.ReactNode;
+  width?: number;
+  maxHeight?: number;
 }
+
+export const TOOLTIP_MARGIN = 6;
+export const SCREEN_PADDING = 10;
+export const POINTER_SIZE = 12;
+
+export const CustomTooltip = ({
+  triggerComponent,
+  toolTipContent,
+  width = 275,
+  maxHeight = 300,
+}: CustomTooltipProps) => {
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({x: 0, y: 0});
+  const [pointerLeft, setPointerLeft] = useState(20);
+  const [showAbove, setShowAbove] = useState(false);
+
+  const iconRef = useRef<View>(null);
+  const screen = Dimensions.get('window');
+
+  const showTooltip = () => {
+    if (!iconRef.current) return;
+    const handle = findNodeHandle(iconRef.current);
+    if (!handle) return;
+
+    try {
+      UIManager.measureInWindow(handle, (x, y, w, h) => {
+        if (w === 0 && h === 0) return;
+
+        let tooltipX = x;
+        let tooltipY = y + h + TOOLTIP_MARGIN;
+        let showAboveTooltip = false;
+        const iconCenterX = x + w / 2;
+
+        if (tooltipX + width > screen.width) {
+          tooltipX = screen.width - width - SCREEN_PADDING;
+        }
+        if (tooltipX < SCREEN_PADDING) {
+          tooltipX = SCREEN_PADDING;
+        }
+
+        if (tooltipY + maxHeight > screen.height) {
+          tooltipY = y - maxHeight - TOOLTIP_MARGIN * 2;
+          showAboveTooltip = true;
+        }
+        if (tooltipY < SCREEN_PADDING) {
+          tooltipY = SCREEN_PADDING;
+          showAboveTooltip = false;
+        }
+
+        const calculatedPointerLeft = iconCenterX - tooltipX - POINTER_SIZE / 2;
+        setPointerLeft(
+          Math.min(
+            Math.max(calculatedPointerLeft, SCREEN_PADDING),
+            width - SCREEN_PADDING,
+          ),
+        );
+        setShowAbove(showAboveTooltip);
+        setPosition({x: tooltipX, y: tooltipY});
+        setVisible(true);
+      });
+    } catch (e) {
+      console.warn('Tooltip positioning failed:', e);
+    }
+  };
+
+  return (
+    <>
+      <View ref={iconRef} collapsable={false}>
+        <TouchableOpacity onPress={showTooltip} style={{marginLeft: 5}}>
+          {triggerComponent}
+        </TouchableOpacity>
+      </View>
+
+      {visible && (
+        <Modal
+          transparent
+          visible={visible}
+          animationType="fade"
+          hardwareAccelerated
+          onRequestClose={() => setVisible(false)}>
+          <Pressable
+            style={Theme.Styles.tooltipOverlay}
+            onPress={() => setVisible(false)}
+          />
+          <View
+            style={[
+              Theme.Styles.tooltip,
+              {width, top: position.y, left: position.x},
+            ]}>
+            <View
+              style={[
+                Theme.Styles.pointer,
+                {
+                  left: pointerLeft,
+                  top: showAbove ? undefined : -POINTER_SIZE / 2,
+                  bottom: showAbove ? -POINTER_SIZE / 2 : undefined,
+                  transform: [{rotate: showAbove ? '180deg' : '0deg'}],
+                },
+              ]}
+            />
+            <ScrollView
+              nestedScrollEnabled
+              keyboardShouldPersistTaps="handled"
+              style={{maxHeight, overflow: 'hidden'}}
+              contentContainerStyle={{padding: 15}}>
+              {toolTipContent}
+            </ScrollView>
+          </View>
+        </Modal>
+      )}
+    </>
+  );
+};
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -12,6 +12,7 @@ import Constants from 'expo-constants';
 import HomeScreenLogo from '../../../assets/InjiHomeLogo.svg';
 import InjiLogoSmall from '../../../assets/InjiLogo.svg';
 import i18next from '../../../i18n';
+import {POINTER_SIZE} from '../ToolTip';
 const Colors = {
  Black: '#000000',
  Zambezi: '#5F5F5F',
@@ -499,7 +500,7 @@ export const DefaultTheme = {
    ProfileIconPinnedStyle: {
      position: 'absolute',
    },
-    BackButtonBgGradient:{
+    BackButtonBgGradient: {
      borderRadius: 10,
    },
    IconContainer: {
@@ -737,6 +738,35 @@ export const DefaultTheme = {
      color: Colors.RoyalPurple,
      marginTop: 10,
    },
+    tooltipOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'transparent',
+    },
+    tooltip: {
+      position: 'absolute',
+      backgroundColor: '#EBE6F3',
+      borderRadius: 8,
+      elevation: 6,
+      shadowColor: '#000',
+      shadowOffset: {width: 0, height: 2},
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      borderWidth: 1,
+      borderColor: '#E0E0E0',
+      zIndex: 999,
+    },
+    pointer: {
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      borderLeftWidth: POINTER_SIZE / 2,
+      borderRightWidth: POINTER_SIZE / 2,
+      borderBottomWidth: POINTER_SIZE / 2,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderBottomColor: '#EBE6F3',
+      zIndex: 1000,
+    },
    tooltipHrLine: {
      borderBottomColor: Colors.Grey5,
      borderBottomWidth: 1,
@@ -861,6 +891,16 @@ export const DefaultTheme = {
    },
  }),
  BannerStyles: StyleSheet.create({
+    bannerStackContainer: {
+      position: 'absolute',
+      width: '100%',
+      alignItems: 'center',
+      zIndex: 100,
+    },
+    wrapper: {
+      width: '100%',
+      alignSelf: 'center',
+    },
    container: {
      alignItems: 'center',
      justifyContent: 'space-between',
@@ -1135,7 +1175,7 @@ export const DefaultTheme = {
    },
    clearIcon: {
      position: 'absolute',
-      right: 45, 
+      right: 45,
      width: 40,
      justifyContent: 'center',
      alignItems: 'center',
@@ -1169,7 +1209,7 @@ export const DefaultTheme = {
      flex: 1,
      fontFamily: 'Montserrat_500Medium',
      fontSize: 17,
-      marginRight: 40
+      marginRight: 40,
    },
  }),
  ButtonStyles: StyleSheet.create({
@@ -1720,10 +1760,10 @@ export const DefaultTheme = {
      paddingHorizontal: 15,
      paddingBottom: 10,
      backgroundColor: '#fff',
-      elevation: 5, // For Android
-      shadowColor: '#000', // For iOS
-      shadowOffset: {width: 0, height: 2},
-      shadowOpacity: 0.2,
+      elevation: 5,
+      shadowColor: '#000',
+      shadowOffset: {width: 0, height: 4}, // only downward shadow
+      shadowOpacity: 0.1,
      shadowRadius: 4,
      zIndex: 1,
    },
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -12,6 +12,7 @@ import Constants from 'expo-constants';
 import HomeScreenLogo from '../../../assets/Inji_Home_Logo.svg';
 import InjiLogoSmall from '../../../assets/InjiLogo.svg';
 import i18next from '../../../i18n';
+import {POINTER_SIZE} from '../ToolTip';

 const Colors = {
  Black: '#231F20',
@@ -512,7 +513,7 @@ export const PurpleTheme = {
      borderRadius: 10,
      backgroundColor: Colors.LightPurple,
    },
-    BackButtonBgGradient:{
+    BackButtonBgGradient: {
      borderRadius: 10,
    },
    imageCaptureButton: {
@@ -735,6 +736,35 @@ export const PurpleTheme = {
      borderColor: '#E0E0E0',
      maxWidth: '90%',
    },
+    tooltipOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'transparent',
+    },
+    tooltip: {
+      position: 'absolute',
+      backgroundColor: '#EBE6F3',
+      borderRadius: 8,
+      elevation: 6,
+      shadowColor: '#000',
+      shadowOffset: {width: 0, height: 2},
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      borderWidth: 1,
+      borderColor: '#E0E0E0',
+      zIndex: 999,
+    },
+    pointer: {
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      borderLeftWidth: POINTER_SIZE / 2,
+      borderRightWidth: POINTER_SIZE / 2,
+      borderBottomWidth: POINTER_SIZE / 2,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderBottomColor: '#EBE6F3',
+      zIndex: 1000,
+    },
    tooltipContentTitle: {
      color: Colors.DeepPurple,
    },
@@ -869,6 +899,16 @@ export const PurpleTheme = {
    },
  }),
  BannerStyles: StyleSheet.create({
+    bannerStackContainer: {
+      position: 'absolute',
+      width: '100%',
+      alignItems: 'center',
+      zIndex: 100,
+    },
+    wrapper: {
+      width: '100%',
+      alignSelf: 'center',
+    },
    container: {
      alignItems: 'center',
      justifyContent: 'space-between',
@@ -1143,7 +1183,7 @@ export const PurpleTheme = {
    },
    clearIcon: {
      position: 'absolute',
-      right: 45, 
+      right: 45,
      width: 40,
      justifyContent: 'center',
      alignItems: 'center',
@@ -1177,7 +1217,7 @@ export const PurpleTheme = {
      flex: 1,
      fontFamily: 'Montserrat_500Medium',
      fontSize: 17,
-      marginRight: 40
+      marginRight: 40,
    },
  }),
  ButtonStyles: StyleSheet.create({
@@ -1728,10 +1768,10 @@ export const PurpleTheme = {
      paddingHorizontal: 15,
      paddingBottom: 10,
      backgroundColor: '#fff',
-      elevation: 5, // For Android
-      shadowColor: '#000', // For iOS
-      shadowOffset: {width: 0, height: 2},
-      shadowOpacity: 0.2,
+      elevation: 5,
+      shadowColor: '#000',
+      shadowOffset: {width: 0, height: 4}, // only downward shadow
+      shadowOpacity: 0.1,
      shadowRadius: 4,
      zIndex: 1,
    },