Fix Request Screen & Displaying Images

2026-01-09 13:38:01 -05:00 · 2022-06-14 13:27:10 +05:30
parent a6bab9c4d3
commit c782c4746c
18 changed files with 504 additions and 199 deletions
--- a/assets/ID-closed.png
+++ b/assets/ID-closed.png
--- a/assets/ID-open.png
+++ b/assets/ID-open.png
--- a/components/NewVcDetails.tsx
+++ b/components/NewVcDetails.tsx
@@ -2,7 +2,7 @@ import { formatDistanceToNow } from 'date-fns';
 import React from 'react';
 import * as DateFnsLocale from '../lib/date-fns/locale';
 import { useTranslation } from 'react-i18next';
-import { Image, StyleSheet } from 'react-native';
+import { Image, StyleSheet, ImageBackground } from 'react-native';
 import { Icon, ListItem } from 'react-native-elements';
 import { VC, CredentialSubject } from '../types/vc';
 import { Column, Row, Text } from './ui';
@@ -69,7 +69,12 @@ export const NewVcDetails: React.FC<VcDetailsProps> = (props) => {
  const controller = useReceiveVcModal();

  return (
-    <Column fill>
+    <ImageBackground
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+      source={require('../assets/ID-open.png')}>
      <Row style={styles.successTag}>
        <Icon name="check-circle" color={Colors.White} size={40} />
        <Text margin="0 10" color={Colors.White}>
@@ -256,7 +261,7 @@ export const NewVcDetails: React.FC<VcDetailsProps> = (props) => {
          </Column>
        </Row>
      </Column>
-    </Column>
+    </ImageBackground>
  );
 };

--- a/components/SingleVcItem.tsx
+++ b/components/SingleVcItem.tsx
@@ -0,0 +1,237 @@
+import React, { useContext, useRef } from 'react';
+import { useInterpret, useSelector } from '@xstate/react';
+import { StyleSheet, Image, ImageBackground } from 'react-native';
+import { CheckBox, Icon } from 'react-native-elements';
+import { ActorRefFrom } from 'xstate';
+import {
+  createVcItemMachine,
+  selectVerifiableCredential,
+  selectGeneratedOn,
+  selectTag,
+  selectId,
+  vcItemMachine,
+} from '../machines/vcItem';
+import { Column, Row, Text } from './ui';
+import { Colors } from './ui/styleUtils';
+import { GlobalContext } from '../shared/GlobalContext';
+import { useTranslation } from 'react-i18next';
+
+const styles = StyleSheet.create({
+  title: {
+    color: Colors.Black,
+    backgroundColor: 'transparent',
+  },
+  loadingTitle: {
+    color: 'transparent',
+    backgroundColor: Colors.Grey5,
+    borderRadius: 4,
+  },
+  subtitle: {
+    backgroundColor: 'transparent',
+  },
+  loadingSubtitle: {
+    backgroundColor: Colors.Grey,
+    borderRadius: 4,
+  },
+  container: {
+    borderRadius: 10,
+  },
+  loadingContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: Colors.Grey6,
+    borderRadius: 4,
+    margin: 5,
+  },
+  detailsContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    padding: 10,
+  },
+  logoContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginLeft: 300,
+  },
+  bgContainer: {
+    borderRadius: 10,
+    margin: 5,
+  },
+});
+
+const VerifiedIcon: React.FC = () => {
+  return (
+    <Icon
+      name="check-circle"
+      color={Colors.Green}
+      size={14}
+      containerStyle={{ marginStart: 4, bottom: 1 }}
+    />
+  );
+};
+
+export const SingleVcItem: React.FC<VcItemProps> = (props) => {
+  const { appService } = useContext(GlobalContext);
+  const { t } = useTranslation('VcDetails');
+
+  const machine = useRef(
+    createVcItemMachine(
+      appService.getSnapshot().context.serviceRefs,
+      props.vcKey
+    )
+  );
+  const service = useInterpret(machine.current);
+
+  const uin = useSelector(service, selectId);
+  const tag = useSelector(service, selectTag);
+
+  const context = useSelector(service, selectVerifiableCredential);
+  const generatedOn = useSelector(service, selectGeneratedOn);
+
+  const selectableOrCheck = props.selectable ? (
+    <CheckBox
+      checked={props.selected}
+      checkedIcon={<Icon name="radio-button-checked" />}
+      uncheckedIcon={<Icon name="radio-button-unchecked" />}
+      onPress={() => props.onPress(service)}
+    />
+  ) : null;
+
+  return (
+    <Column style={styles.bgContainer} onShow={props.onShow(service)}>
+      <ImageBackground
+        source={
+          !context.verifiableCredential
+            ? null
+            : require('../assets/ID-closed.png')
+        }
+        style={
+          !context.verifiableCredential
+            ? styles.loadingContainer
+            : styles.container
+        }>
+        <Row
+          crossAlign="center"
+          style={
+            !context.verifiableCredential
+              ? styles.loadingContainer
+              : styles.container
+          }>
+          <Column
+            style={
+              !context.verifiableCredential
+                ? styles.loadingContainer
+                : styles.detailsContainer
+            }>
+            <Image
+              source={
+                !context.verifiableCredential
+                  ? require('../assets/placeholder-photo.png')
+                  : { uri: context.credential.biometrics.face }
+              }
+              style={{
+                width: 130,
+                height: 145,
+                resizeMode: 'cover',
+              }}
+            />
+
+            <Column margin="0 0 0 50">
+              <Column>
+                <Text color={Colors.Orange} size="smaller">
+                  Full name
+                </Text>
+                <Text
+                  weight="bold"
+                  size="smaller"
+                  style={
+                    !context.verifiableCredential
+                      ? styles.loadingTitle
+                      : styles.title
+                  }>
+                  {!context.verifiableCredential
+                    ? ''
+                    : getLocalizedField(
+                        context.verifiableCredential.credentialSubject.fullName
+                      )}
+                </Text>
+              </Column>
+
+              <Column>
+                <Text color={Colors.Orange} size="smaller">
+                  UIN
+                </Text>
+                <Text
+                  weight="bold"
+                  size="smaller"
+                  style={
+                    !context.verifiableCredential
+                      ? styles.loadingTitle
+                      : styles.title
+                  }>
+                  {!context.verifiableCredential ? '' : tag || uin}
+                </Text>
+              </Column>
+              <Column>
+                <Text color={Colors.Orange} size="smaller">
+                  Generated on
+                </Text>
+                <Text
+                  numLines={1}
+                  weight="bold"
+                  size="smaller"
+                  style={
+                    !context.verifiableCredential
+                      ? styles.loadingTitle
+                      : styles.subtitle
+                  }>
+                  {!context.verifiableCredential ? '' : generatedOn}
+                </Text>
+              </Column>
+              <Column>
+                <Text size="smaller" color={Colors.Orange}>
+                  {t('status')}
+                </Text>
+                <Row>
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    style={
+                      !context.verifiableCredential
+                        ? styles.loadingTitle
+                        : styles.subtitle
+                    }>
+                    {!context.verifiableCredential ? '' : t('valid')}
+                  </Text>
+                  {!context.verifiableCredential ? null : <VerifiedIcon />}
+                </Row>
+              </Column>
+            </Column>
+          </Column>
+        </Row>
+      </ImageBackground>
+    </Column>
+  );
+};
+
+interface VcItemProps {
+  vcKey: string;
+  margin?: string;
+  selectable?: boolean;
+  selected?: boolean;
+  onPress?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
+  onShow?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
+}
+
+function getLocalizedField(rawField: string | LocalizedField) {
+  if (typeof rawField === 'string') {
+    return rawField;
+  }
+  try {
+    const locales: LocalizedField[] = JSON.parse(JSON.stringify(rawField));
+    return locales[0].value;
+  } catch (e) {
+    return '';
+  }
+}
--- a/components/UpdatedVcDetails.tsx
+++ b/components/UpdatedVcDetails.tsx
@@ -2,7 +2,7 @@ import { formatDistanceToNow } from 'date-fns';
 import React from 'react';
 import * as DateFnsLocale from '../lib/date-fns/locale';
 import { useTranslation } from 'react-i18next';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, StyleSheet, View, ImageBackground } from 'react-native';
 import { Icon, ListItem } from 'react-native-elements';
 import { VC, CredentialSubject } from '../types/vc';
 import { Column, Row, Text } from './ui';
@@ -24,9 +24,6 @@ const styles = StyleSheet.create({
    alignItems: 'center',
    paddingLeft: 18,
    margin: 6,
-    // borderRadius: 0,
-    // borderWidth: 0,
-    // marginBottom: 0,
  },
  logo: {
    height: 50,
@@ -67,7 +64,12 @@ export const UpdatedVcDetails: React.FC<VcDetailsProps> = (props) => {
  const { t, i18n } = useTranslation('VcDetails');

  return (
-    <Column fill>
+    <ImageBackground
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+      source={require('../assets/ID-open.png')}>
      <View style={styles.header}>
        <View>
          <Text weight="bold" size="smaller" color={Colors.Orange}>
@@ -242,7 +244,7 @@ export const UpdatedVcDetails: React.FC<VcDetailsProps> = (props) => {
          ))}
        </Column>
      </Row>
-    </Column>
+    </ImageBackground>
  );
 };

--- a/components/UpdatedVcItem.tsx
+++ b/components/UpdatedVcItem.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { useInterpret, useSelector } from '@xstate/react';
-import { Pressable, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet, Image, ImageBackground } from 'react-native';
 import { CheckBox, Icon } from 'react-native-elements';
 import { ActorRefFrom } from 'xstate';
 import {
@@ -16,7 +16,6 @@ import { Colors } from './ui/styleUtils';
 import { RotatingIcon } from './RotatingIcon';
 import { GlobalContext } from '../shared/GlobalContext';
 import { useTranslation } from 'react-i18next';
-import { Image } from 'react-native';

 const styles = StyleSheet.create({
  title: {
@@ -36,22 +35,19 @@ const styles = StyleSheet.create({
    borderRadius: 4,
  },
  container: {
-    backgroundColor: Colors.White,
+    borderRadius: 10,
  },
  loadingContainer: {
+    flex: 1,
+    flexDirection: 'row',
    backgroundColor: Colors.Grey6,
    borderRadius: 4,
+    margin: 5,
  },
  detailsContainer: {
    flex: 1,
    flexDirection: 'row',
    padding: 10,
-    backgroundColor: '#fef5eb',
-  },
-  bgContainer: {
-    backgroundColor: '#fef5eb',
-    borderRadius: 15,
-    marginTop: 10,
  },
  logoContainer: {
    flex: 1,
@@ -59,6 +55,10 @@ const styles = StyleSheet.create({
    justifyContent: 'flex-end',
    marginLeft: 300,
  },
+  bgContainer: {
+    borderRadius: 10,
+    margin: 5,
+  },
 });

 const VerifiedIcon: React.FC = () => {
@@ -75,7 +75,6 @@ const VerifiedIcon: React.FC = () => {
 export const UpdatedVcItem: React.FC<VcItemProps> = (props) => {
  const { appService } = useContext(GlobalContext);
  const { t } = useTranslation('VcDetails');
-
  const machine = useRef(
    createVcItemMachine(
      appService.getSnapshot().context.serviceRefs,
@@ -85,7 +84,8 @@ export const UpdatedVcItem: React.FC<VcItemProps> = (props) => {
  const service = useInterpret(machine.current);
  const uin = useSelector(service, selectId);
  const tag = useSelector(service, selectTag);
-  const verifiableCredential = useSelector(service, selectVerifiableCredential);
+
+  const context = useSelector(service, selectVerifiableCredential);
  const generatedOn = useSelector(service, selectGeneratedOn);

  const selectableOrCheck = props.selectable ? (
@@ -100,91 +100,125 @@ export const UpdatedVcItem: React.FC<VcItemProps> = (props) => {
  return (
    <Pressable
      onPress={() => props.onPress(service)}
-      disabled={!verifiableCredential}
+      disabled={!context.verifiableCredential}
      style={styles.bgContainer}>
-      <Row
-        crossAlign="center"
-        margin={props.margin}
-        backgroundColor={!verifiableCredential ? Colors.Grey6 : Colors.White}
+      <ImageBackground
+        source={
+          !context.verifiableCredential
+            ? null
+            : require('../assets/ID-closed.png')
+        }
        style={
-          !verifiableCredential ? styles.loadingContainer : styles.container
+          !context.verifiableCredential
+            ? styles.loadingContainer
+            : styles.container
        }>
-        {/* <Column style={styles.logoContainer}>
-        <Logo height={30} />
-      </Column> */}
+        <Row
+          crossAlign="center"
+          style={
+            !context.verifiableCredential
+              ? styles.loadingContainer
+              : styles.container
+          }>
+          <Column
+            style={
+              !context.verifiableCredential
+                ? styles.loadingContainer
+                : styles.detailsContainer
+            }>
+            <Image
+              source={
+                !context.verifiableCredential
+                  ? require('../assets/placeholder-photo.png')
+                  : { uri: context.credential.biometrics.face }
+              }
+              style={{
+                width: 130,
+                height: 145,
+                resizeMode: 'cover',
+              }}
+            />

-        <Column fill style={styles.detailsContainer}>
-          <Image
-            source={require('../assets/placeholder-photo.png')}
-            style={{
-              width: 110,
-              height: 110,
-              resizeMode: 'cover',
-              marginTop: 10,
-            }}
-          />
-          <Column margin="0 0 0 50">
-            <Column>
-              <Text color={Colors.Orange} size="smaller">
-                Full name
-              </Text>
-              <Text weight="bold" size="smaller">
-                {!verifiableCredential
-                  ? ''
-                  : getLocalizedField(
-                      verifiableCredential.credentialSubject.fullName
-                    )}
-              </Text>
-            </Column>
-
-            <Column>
-              <Text color={Colors.Orange} size="smaller">
-                UIN
-              </Text>
-              <Text
-                weight="bold"
-                size="smaller"
-                style={
-                  !verifiableCredential ? styles.loadingTitle : styles.title
-                }>
-                {!verifiableCredential ? '' : tag || uin}
-              </Text>
-            </Column>
-            <Column>
-              <Text color={Colors.Orange} size="smaller">
-                Generated on
-              </Text>
-              <Text
-                numLines={1}
-                weight="bold"
-                size="smaller"
-                style={
-                  !verifiableCredential
-                    ? styles.loadingSubtitle
-                    : styles.subtitle
-                }>
-                {!verifiableCredential ? '' : generatedOn}
-              </Text>
-            </Column>
-            <Column>
-              <Text size="smaller" color={Colors.Orange}>
-                {t('status')}
-              </Text>
-              <Row>
-                <Text weight="bold" size="smaller">
-                  {t('valid')}
+            <Column margin="0 0 0 50">
+              <Column>
+                <Text color={Colors.Orange} size="smaller">
+                  Full name
                </Text>
-                <VerifiedIcon />
-              </Row>
+                <Text
+                  weight="bold"
+                  size="smaller"
+                  style={
+                    !context.verifiableCredential
+                      ? styles.loadingTitle
+                      : styles.title
+                  }>
+                  {!context.verifiableCredential
+                    ? ''
+                    : getLocalizedField(
+                        context.verifiableCredential.credentialSubject.fullName
+                      )}
+                </Text>
+              </Column>
+
+              <Column>
+                <Text color={Colors.Orange} size="smaller">
+                  UIN
+                </Text>
+                <Text
+                  weight="bold"
+                  size="smaller"
+                  style={
+                    !context.verifiableCredential
+                      ? styles.loadingTitle
+                      : styles.title
+                  }>
+                  {!context.verifiableCredential ? '' : tag || uin}
+                </Text>
+              </Column>
+              <Column>
+                <Text color={Colors.Orange} size="smaller">
+                  Generated on
+                </Text>
+                <Text
+                  numLines={1}
+                  weight="bold"
+                  size="smaller"
+                  style={
+                    !context.verifiableCredential
+                      ? styles.loadingTitle
+                      : styles.subtitle
+                  }>
+                  {!context.verifiableCredential ? '' : generatedOn}
+                </Text>
+              </Column>
+              <Column>
+                <Text size="smaller" color={Colors.Orange}>
+                  {t('status')}
+                </Text>
+                <Row>
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    style={
+                      !context.verifiableCredential
+                        ? styles.loadingTitle
+                        : styles.subtitle
+                    }>
+                    {!context.verifiableCredential ? '' : t('valid')}
+                  </Text>
+                  {!context.verifiableCredential ? null : <VerifiedIcon />}
+                </Row>
+              </Column>
            </Column>
          </Column>
-        </Column>
-        {verifiableCredential ? (
-          selectableOrCheck
-        ) : (
-          <RotatingIcon name="sync" color={Colors.Grey5} />
-        )}
-      </Row>
+
+          {context.verifiableCredential ? (
+            selectableOrCheck
+          ) : (
+            <RotatingIcon name="sync" color={Colors.Grey5} />
+          )}
+        </Row>
+      </ImageBackground>
    </Pressable>
  );
 };
@@ -195,7 +229,7 @@ interface VcItemProps {
  selectable?: boolean;
  selected?: boolean;
  onPress?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
-  onShow?: () => void;
+  onShow?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
 }

 function getLocalizedField(rawField: string | LocalizedField) {
--- a/components/VcItem.tsx
+++ b/components/VcItem.tsx
@@ -96,12 +96,14 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
            {!verifiableCredential
              ? ''
              : getLocalizedField(
-                  verifiableCredential.credentialSubject.fullName
+                  verifiableCredential.verifiableCredential.credentialSubject
+                    .fullName
                ) +
                ' · ' +
                generatedOn}
          </Text>
        </Column>
+
        {verifiableCredential ? (
          selectableOrCheck
        ) : (
--- a/components/displayVcItem.tsx
+++ b/components/displayVcItem.tsx
@@ -96,7 +96,8 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
            {!verifiableCredential
              ? ''
              : getLocalizedField(
-                  verifiableCredential.credentialSubject.fullName
+                  verifiableCredential.verifiableCredential.credentialSubject
+                    .fullName
                ) +
                ' · ' +
                generatedOn}
--- a/machines/vcItem.ts
+++ b/machines/vcItem.ts
@@ -556,7 +556,7 @@ export function selectCredential(state: State) {
 }

 export function selectVerifiableCredential(state: State) {
-  return state.context.verifiableCredential;
+  return state.context;
 }

 export function selectIsEditingTag(state: State) {
--- a/package.json
+++ b/package.json
@@ -89,7 +89,6 @@
  "name": "mosip-resident-app",
  "version": "1.0.0",
  "lint-staged": {
-    "*.{ts,tsx}": "eslint --cache --fix",
    "*.{ts,tsx,js,css,md}": "prettier --write",
    "*.strings.json": "node scripts/compile-strings.js"
  }
--- a/routes/main.ts
+++ b/routes/main.ts
@@ -24,16 +24,16 @@ export const mainRoutes: TabScreen[] = [
      headerShown: false,
    },
  },
-  {
-    name: 'TimerBasedRequest',
-    component: TimerBasedRequestScreen,
-    icon: 'file-download',
-  },
  {
    name: 'Request',
    component: RequestScreen,
    icon: 'file-download',
  },
+  {
+    name: 'TimerBasedRequest',
+    component: TimerBasedRequestScreen,
+    icon: 'timer',
+  },
  {
    name: 'Profile',
    component: ProfileScreen,
--- a/screens/Home/HomeScreen.tsx
+++ b/screens/Home/HomeScreen.tsx
@@ -54,13 +54,11 @@ export const HomeScreen: React.FC<HomeRouteProps> = (props) => {
              isVisible={controller.activeTab === 1}
              service={controller.tabRefs.receivedVcs}
              vcItemActor={controller.selectedVc}
-              onSwipe={() => props.navigation.navigate('TimerBasedRequest')}
            />
            <HistoryTab
              isVisible={controller.activeTab === 2}
              vcItemActor={controller.selectedVc}
              service={controller.tabRefs.history}
-              onSwipe={() => props.navigation.navigate('TimerBasedRequest')}
            />
          </Column>
        )}
@@ -92,6 +90,6 @@ function TabItem(title: string) {
 export interface HomeScreenTabProps {
  isVisible: boolean;
  service: TabRef;
-  onSwipe: () => void;
+  onSwipe?: () => void;
  vcItemActor: ActorRefFrom<typeof vcItemMachine>;
 }
--- a/screens/Home/ViewVcModal.tsx
+++ b/screens/Home/ViewVcModal.tsx
@@ -26,7 +26,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
        <Icon name="edit" onPress={controller.EDIT_TAG} color={Colors.Orange} />
      }>
      <Column scroll>
-        <Column fill backgroundColor={'#fef5eb'}>
+        <Column fill>
          <UpdatedVcDetails vc={controller.vc} />
        </Column>
      </Column>
--- a/screens/Profile/ProfileScreen.tsx
+++ b/screens/Profile/ProfileScreen.tsx
@@ -83,14 +83,14 @@ export const ProfileScreen: React.FC<MainRouteProps> = (props) => {
      </ListItem>
      <Text
        weight="semibold"
-        margin="32"
+        margin="32 0 0 0"
        align="center"
        size="smaller"
        color={Colors.Grey}>
        Version: {getVersion()}
      </Text>
      {controller.backendInfo.application.name !== '' ? (
-        <div>
+        <Column>
          <Text
            weight="semibold"
            align="center"
@@ -106,7 +106,7 @@ export const ProfileScreen: React.FC<MainRouteProps> = (props) => {
            color={Colors.Grey}>
            MOSIP: {controller.backendInfo.config['mosip.host']}
          </Text>
-        </div>
+        </Column>
      ) : null}
    </Column>
  );
--- a/screens/Request/ReceiveVcModal.tsx
+++ b/screens/Request/ReceiveVcModal.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import { Button, Column } from '../../components/ui';
+import { DeviceInfoList } from '../../components/DeviceInfoList';
+import { Button, Column, Text } from '../../components/ui';
 import { Colors } from '../../components/ui/styleUtils';
+import { VcDetails } from '../../components/VcDetails';
 import { Modal, ModalProps } from '../../components/ui/Modal';
 import { useReceiveVcModal } from './ReceiveVcModalController';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +12,15 @@ export const ReceiveVcModal: React.FC<ReceveVcModalProps> = (props) => {
  const controller = useReceiveVcModal();

  return (
-    <Modal
-      {...props}
-      onShow={() =>
-        setTimeout(() => {
-          props.onAccept();
-        }, 5000)
-      }>
+    <Modal {...props}>
      <Column scroll padding="24 0 48 0" backgroundColor={Colors.LightGrey}>
+        <Column>
+          <DeviceInfoList of="sender" deviceInfo={controller.senderInfo} />
+          <Text weight="semibold" margin="24 24 0 24">
+            {t('header', { vcLabel: controller.vcLabel.singular })}
+          </Text>
+          <VcDetails vc={controller.incomingVc} />
+        </Column>
        <Column padding="0 24" margin="32 0 0 0">
          <Button
            title={t('acceptRequest', { vcLabel: controller.vcLabel.singular })}
@@ -39,5 +42,4 @@ export const ReceiveVcModal: React.FC<ReceveVcModalProps> = (props) => {
 interface ReceveVcModalProps extends ModalProps {
  onAccept: () => void;
  onReject: () => void;
-  onShow: () => void;
 }
--- a/screens/Request/RequestScreen.tsx
+++ b/screens/Request/RequestScreen.tsx
@@ -7,10 +7,12 @@ import { ReceiveVcModal } from './ReceiveVcModal';
 import { MessageOverlay } from '../../components/MessageOverlay';
 import { useRequestScreen } from './RequestScreenController';
 import { useTranslation } from 'react-i18next';
+import { useIsFocused } from '@react-navigation/native';

 export const RequestScreen: React.FC<MainRouteProps> = (props) => {
  const { t } = useTranslation('RequestScreen');
  const controller = useRequestScreen(props);
+  const isFocused = useIsFocused();

  return (
    <Column fill padding="98 24 24 24" backgroundColor={Colors.LightGrey}>
@@ -45,41 +47,47 @@ export const RequestScreen: React.FC<MainRouteProps> = (props) => {
        </Column>
      )}

-      <ReceiveVcModal
-        isVisible={controller.isReviewing}
-        onDismiss={controller.REJECT}
-        onAccept={controller.ACCEPT}
-        onReject={controller.REJECT}
-        onShow={() => console.log('rec')}
-        headerTitle={t('incomingVc', { vcLabel: controller.vcLabel.singular })}
-      />
+      {isFocused && (
+        <ReceiveVcModal
+          isVisible={controller.isReviewing}
+          onDismiss={controller.REJECT}
+          onAccept={controller.ACCEPT}
+          onReject={controller.REJECT}
+          headerTitle={t('incomingVc', {
+            vcLabel: controller.vcLabel.singular,
+          })}
+        />
+      )}

-      <MessageOverlay
-        isVisible={controller.isAccepted}
-        title={t('status.accepted.title')}
-        message={t('status.accepted.message', {
-          vcLabel: controller.vcLabel.singular,
-          sender: controller.senderInfo.deviceName,
-        })}
-        onBackdropPress={controller.DISMISS}
-      />
+      {isFocused && (
+        <MessageOverlay
+          isVisible={controller.isAccepted}
+          title={t('status.accepted.title')}
+          message={t('status.accepted.message', {
+            vcLabel: controller.vcLabel.singular,
+            sender: controller.senderInfo.deviceName,
+          })}
+          onBackdropPress={controller.DISMISS}
+        />
+      )}

-      <MessageOverlay
-        isVisible={controller.isRejected}
-        title={t('status.rejected.title')}
-        message={t('status.rejected.message', {
-          vcLabel: controller.vcLabel.singular,
-          sender: controller.senderInfo.deviceName,
-        })}
-        onBackdropPress={controller.DISMISS}
-      />
+      {isFocused && (
+        <MessageOverlay
+          isVisible={controller.isRejected}
+          title={t('status.disconnected.title')}
+          message={t('status.disconnected.message')}
+          onBackdropPress={controller.DISMISS}
+        />
+      )}

-      <MessageOverlay
-        isVisible={controller.isDisconnected}
-        title={t('status.disconnected.title')}
-        message={t('status.disconnected.message')}
-        onBackdropPress={controller.DISMISS}
-      />
+      {isFocused && (
+        <MessageOverlay
+          isVisible={controller.isDisconnected}
+          title={t('Rejected')}
+          message={t('The request to share ID was rejected')}
+          onBackdropPress={controller.DISMISS}
+        />
+      )}
    </Column>
  );
 };
--- a/screens/Request/TimerBasedRequestScreen.tsx
+++ b/screens/Request/TimerBasedRequestScreen.tsx
@@ -7,9 +7,13 @@ import { TimerBasedReceiveVcModal } from './TimerBasedReceiveVcModal';
 import { MessageOverlay } from '../../components/MessageOverlay';
 import { useRequestScreen } from './RequestScreenController';
 import { SuccesfullyReceived } from '../../components/SuccesfullyReceived';
+import { useTranslation } from 'react-i18next';
+import { useIsFocused } from '@react-navigation/native';

 export const TimerBasedRequestScreen: React.FC<MainRouteProps> = (props) => {
  const controller = useRequestScreen(props);
+  const { t } = useTranslation('RequestScreen');
+  const isFocused = useIsFocused();

  return (
    <Column fill padding="98 24 24 24" backgroundColor={Colors.LightGrey}>
@@ -43,35 +47,43 @@ export const TimerBasedRequestScreen: React.FC<MainRouteProps> = (props) => {
        </Column>
      )}

-      <TimerBasedReceiveVcModal
-        isVisible={controller.isReviewing}
-        onDismiss={controller.REJECT}
-        onAccept={controller.ACCEPT}
-        onReject={controller.REJECT}
-        onShow={controller.ACCEPT}
-        headerTitle={``}
-      />
+      {isFocused && (
+        <TimerBasedReceiveVcModal
+          isVisible={controller.isReviewing}
+          onDismiss={controller.REJECT}
+          onAccept={controller.ACCEPT}
+          onReject={controller.REJECT}
+          onShow={controller.ACCEPT}
+          headerTitle={``}
+        />
+      )}

-      <SuccesfullyReceived
-        img="true"
-        isVisible={controller.isAccepted}
-        onBackdropPress={controller.DISMISS}
-        onShow={controller.GOBACK}
-      />
+      {isFocused && (
+        <SuccesfullyReceived
+          img="true"
+          isVisible={controller.isAccepted}
+          onBackdropPress={controller.DISMISS}
+          onShow={controller.GOBACK}
+        />
+      )}

-      <MessageOverlay
-        isVisible={controller.isRejected}
-        title="Notice"
-        message={`You rejected ${controller.senderInfo.deviceName}'s ${controller.vcLabel.singular}'`}
-        onBackdropPress={controller.DISMISS}
-      />
+      {isFocused && (
+        <MessageOverlay
+          isVisible={controller.isRejected}
+          title="Notice"
+          message={`You rejected ${controller.senderInfo.deviceName}'s ${controller.vcLabel.singular}'`}
+          onBackdropPress={controller.DISMISS}
+        />
+      )}

-      <MessageOverlay
-        isVisible={controller.isDisconnected}
-        title="Disconnected"
-        message="The connection was interrupted. Please try again."
-        onBackdropPress={controller.DISMISS}
-      />
+      {isFocused && (
+        <MessageOverlay
+          isVisible={controller.isDisconnected}
+          title={t('Rejected')}
+          message={t('The request to share ID was rejected')}
+          onBackdropPress={controller.DISMISS}
+        />
+      )}
    </Column>
  );
 };
--- a/screens/Scan/UpdatedSendVcModal.tsx
+++ b/screens/Scan/UpdatedSendVcModal.tsx
@@ -9,6 +9,7 @@ import { useSendVcModal } from './SendVcModalController';
 import { useTranslation } from 'react-i18next';
 import { UpdatedVcItem } from '../../components/UpdatedVcItem';
 import { useSelectVcOverlay } from './SelectVcOverlayController';
+import { SingleVcItem } from '../../components/SingleVcItem';

 export const UpdatedSendVcModal: React.FC<SendVcModalProps> = (props) => {
  const { t } = useTranslation('UpdatedSendVcModal');
@@ -29,7 +30,7 @@ export const UpdatedSendVcModal: React.FC<SendVcModalProps> = (props) => {

  const controller2 = useSelectVcOverlay(details);

-  const reasonLabel = t('reasonForSharing');
+  const reasonLabel = t('Reason For Sharing');

  return (
    <Modal {...props}>
@@ -45,16 +46,28 @@ export const UpdatedSendVcModal: React.FC<SendVcModalProps> = (props) => {
            />
          </Column>
          <Column>
-            {controller.vcKeys.map((vcKey, index) => (
-              <UpdatedVcItem
-                key={vcKey}
-                vcKey={vcKey}
+            {controller.vcKeys.length === 1 && (
+              <SingleVcItem
+                key={controller.vcKeys[0]}
+                vcKey={controller.vcKeys[0]}
                margin="0 2 8 2"
-                onPress={controller2.selectVcItem(index)}
+                onShow={controller2.selectVcItem(0)}
                selectable
-                selected={index === controller2.selectedIndex}
+                selected={0 === controller2.selectedIndex}
              />
-            ))}
+            )}
+
+            {controller.vcKeys.length > 1 &&
+              controller.vcKeys.map((vcKey, index) => (
+                <UpdatedVcItem
+                  key={vcKey}
+                  vcKey={vcKey}
+                  margin="0 2 8 2"
+                  onPress={controller2.selectVcItem(index)}
+                  selectable
+                  selected={index === controller2.selectedIndex}
+                />
+              ))}
          </Column>
        </Column>
        <Column
@@ -76,17 +89,9 @@ export const UpdatedSendVcModal: React.FC<SendVcModalProps> = (props) => {
        </Column>
      </Column>

-      {/* <SelectVcOverlay
-        isVisible={controller.isSelectingVc}
-        receiverName={controller.receiverInfo.deviceName}
-        onSelect={controller.SELECT_VC}
-        onCancel={controller.CANCEL}
-        vcKeys={controller.vcKeys}
-      /> */}
-
      <MessageOverlay
        isVisible={controller.isSendingVc}
-        title={t('statusSharing.title')}
+        title={t('Sharing..')}
        hasProgress
      />