@bifold/core 2.1.10 → 2.2.1

package/src/contexts/network.tsx

@@ -1,7 +1,10 @@
 import { NetInfoStateType, useNetInfo } from '@react-native-community/netinfo'
-import { createContext, useContext, useState, useCallback, PropsWithChildren } from 'react'
+import { createContext, useContext, useState, useCallback, PropsWithChildren, useEffect } from 'react'
 
 import NetInfoModal from '../components/modals/NetInfoModal'
+import { useTranslation } from 'react-i18next'
+import { useStore } from './store'
+import { DispatchAction } from './reducers/store'
 
 export interface NetworkContext {
   silentAssertConnectedNetwork: () => boolean | null
@@ -19,6 +22,9 @@ export const NetworkContext = createContext<NetworkContext>(null as unknown as N
 export const NetworkProvider = ({ children }: PropsWithChildren) => {
   const { isConnected, type, isInternetReachable } = useNetInfo()
   const [isNetInfoModalDisplayed, setIsNetInfoModalDisplayed] = useState<boolean>(false)
+  const { t } = useTranslation()
+  const [hasShown, setHasShown] = useState(false)
+  const [, dispatch] = useStore()
 
   const displayNetInfoModal = useCallback(() => {
     setIsNetInfoModalDisplayed(true)
@@ -62,6 +68,38 @@ export const NetworkProvider = ({ children }: PropsWithChildren) => {
     return isInternetReachable
   }, [isInternetReachable])
 
+  const showNetworkWarning = useCallback(() => {
+    setHasShown(true)
+    dispatch({
+      type: DispatchAction.BANNER_MESSAGES,
+      payload: [
+        {
+          id: 'netinfo-no-internet',
+          title: t('NetInfo.NoInternetConnectionTitle'),
+          type: 'error',
+          variant: 'detail',
+          dismissible: false,
+        },
+      ],
+    })
+  }, [dispatch, t])
+
+  useEffect(() => {
+    const internetReachable = assertInternetReachable()
+    if (internetReachable) {
+      setHasShown(false)
+      dispatch({
+        type: DispatchAction.REMOVE_BANNER_MESSAGE,
+        payload: ['netinfo-no-internet'],
+      })
+    }
+
+    // Strict check for false, null means the network state is not yet known
+    if (internetReachable === false && !hasShown) {
+      showNetworkWarning()
+    }
+  }, [showNetworkWarning, assertInternetReachable, hasShown, dispatch])
+
   return (
     <NetworkContext.Provider
       value={{

package/src/contexts/reducers/store.ts

@@ -13,6 +13,7 @@ import {
 } from '../../types/state'
 import { generateRandomWalletName } from '../../utils/helpers'
 import { PersistentStorage } from '../../services/storage'
+import Config from 'react-native-config'
 
 enum StateDispatchAction {
   STATE_DISPATCH = 'state/stateDispatch',
@@ -60,6 +61,11 @@ enum PreferencesDispatchAction {
   UPDATE_ALTERNATE_CONTACT_NAMES = 'preferences/updateAlternateContactNames',
   AUTO_LOCK_TIME = 'preferences/autoLockTime',
   SET_THEME = 'preferences/setTheme',
+  SET_SELECTED_MEDIATOR = 'preferences/setSelectedMediator',
+  ADD_AVAILABLE_MEDIATOR = 'preferences/addAvailableMediator',
+  RESET_MEDIATORS = 'preferences/resetMediators',
+  BANNER_MESSAGES = 'preferences/bannerMessages',
+  REMOVE_BANNER_MESSAGE = 'REMOVE_BANNER_MESSAGE',
 }
 
 enum ToursDispatchAction {
@@ -515,6 +521,76 @@ export const reducer = <S extends State>(state: S, action: ReducerAction<Dispatc
         preferences,
       }
     }
+    case PreferencesDispatchAction.SET_SELECTED_MEDIATOR: {
+      const selectedMediator = (action?.payload ?? []).pop() ?? state.preferences.selectedMediator
+      const preferences: Preferences = {
+        ...state.preferences,
+        selectedMediator,
+      }
+      PersistentStorage.storeValueForKey(LocalStorageKeys.Preferences, preferences)
+      return {
+        ...state,
+        preferences,
+      }
+    }
+    case PreferencesDispatchAction.ADD_AVAILABLE_MEDIATOR: {
+      const mediatorToAdd = (action?.payload ?? []).pop() ?? ''
+      if (!state.preferences.availableMediators.includes(mediatorToAdd)) {
+        const updatedAvailableMediators = [...state.preferences.availableMediators, mediatorToAdd]
+        const preferences: Preferences = {
+          ...state.preferences,
+          availableMediators: updatedAvailableMediators,
+        }
+        PersistentStorage.storeValueForKey(LocalStorageKeys.Preferences, preferences)
+        return {
+          ...state,
+          preferences,
+        }
+      }
+      return state
+    }
+    case PreferencesDispatchAction.RESET_MEDIATORS: {
+      const preferences: Preferences = {
+        ...state.preferences,
+        availableMediators: [Config.MEDIATOR_URL as string],
+        selectedMediator: Config.MEDIATOR_URL as string,
+      }
+
+      PersistentStorage.storeValueForKey(LocalStorageKeys.Preferences, preferences)
+      return {
+        ...state,
+        preferences,
+      }
+    }
+
+    case PreferencesDispatchAction.BANNER_MESSAGES: {
+      const bannerMessageToAdd = action?.payload ?? []
+      const newBannerMessages = [...state.preferences.bannerMessages, ...bannerMessageToAdd]
+      const preferences: Preferences = {
+        ...state.preferences,
+        bannerMessages: newBannerMessages,
+      }
+      PersistentStorage.storeValueForKey(LocalStorageKeys.Preferences, preferences)
+      return {
+        ...state,
+        preferences,
+      }
+    }
+
+    case PreferencesDispatchAction.REMOVE_BANNER_MESSAGE: {
+      const keysToRemove = action?.payload ?? []
+      const newBannerMessages = state.preferences.bannerMessages.filter((msg) => !keysToRemove.includes(msg.id))
+      const preferences: Preferences = {
+        ...state.preferences,
+        bannerMessages: newBannerMessages,
+      }
+      PersistentStorage.storeValueForKey(LocalStorageKeys.Preferences, preferences)
+      return {
+        ...state,
+        preferences,
+      }
+    }
+
     case OnboardingDispatchAction.ONBOARDING_VERSION: {
       const version = (action?.payload || []).pop()
       const onboarding = {

package/src/contexts/store.tsx

@@ -5,6 +5,7 @@ import { generateRandomWalletName } from '../utils/helpers'
 
 import _defaultReducer, { ReducerAction } from './reducers/store'
 import { defaultAutoLockTime } from '../constants'
+import Config from 'react-native-config'
 
 type Reducer = <S extends State>(state: S, action: ReducerAction<any>) => S
 
@@ -57,6 +58,9 @@ export const defaultState: State = {
     enableShareableLink: false,
     alternateContactNames: {},
     autoLockTime: defaultAutoLockTime, // default wallets lockout time to 5 minutes
+    availableMediators: [Config.MEDIATOR_URL ?? ''],
+    selectedMediator: Config.MEDIATOR_URL ?? '',
+    bannerMessages: [],
   },
   tours: {
     seenToursPrompt: false,

package/src/hooks/useBifoldAgentSetup.ts

@@ -3,7 +3,6 @@ import { IndyVdrPoolService } from '@credo-ts/indy-vdr/build/pool'
 import { agentDependencies } from '@credo-ts/react-native'
 import { GetCredentialDefinitionRequest, GetSchemaRequest } from '@hyperledger/indy-vdr-shared'
 import { useCallback, useRef, useState } from 'react'
-import { Config } from 'react-native-config'
 import { CachesDirectoryPath } from 'react-native-fs'
 
 import { TOKENS, useServices } from '../container-api'
@@ -51,7 +50,7 @@ const useBifoldAgentSetup = (): AgentSetupReturnType => {
   )
 
   const createNewAgent = useCallback(
-    async (walletSecret: WalletSecret): Promise<Agent> => {
+    async (walletSecret: WalletSecret, mediatorUrl: string): Promise<Agent> => {
       const newAgent = new Agent({
         config: {
           label: store.preferences.walletName || 'Aries Bifold',
@@ -65,7 +64,7 @@ const useBifoldAgentSetup = (): AgentSetupReturnType => {
         dependencies: agentDependencies,
         modules: getAgentModules({
           indyNetworks: indyLedgers,
-          mediatorInvitationUrl: Config.MEDIATOR_URL,
+          mediatorInvitationUrl: mediatorUrl,
           txnCache: {
             capacity: 1000,
             expiryOffsetMs: 1000 * 60 * 60 * 24 * 7,
@@ -118,6 +117,7 @@ const useBifoldAgentSetup = (): AgentSetupReturnType => {
 
   const initializeAgent = useCallback(
     async (walletSecret: WalletSecret): Promise<void> => {
+      const mediatorUrl = store.preferences.selectedMediator
       logger.info('Checking for existing agent...')
       if (agentInstanceRef.current) {
         const restartedAgent = await restartExistingAgent(agentInstanceRef.current, walletSecret)
@@ -130,7 +130,7 @@ const useBifoldAgentSetup = (): AgentSetupReturnType => {
       }
 
       logger.info('Creating new agent...')
-      const newAgent = await createNewAgent(walletSecret)
+      const newAgent = await createNewAgent(walletSecret, mediatorUrl)
 
       logger.info('Migrating if required...')
       await migrateIfRequired(newAgent, walletSecret)
@@ -148,7 +148,7 @@ const useBifoldAgentSetup = (): AgentSetupReturnType => {
       agentInstanceRef.current = newAgent
       setAgent(newAgent)
     },
-    [logger, restartExistingAgent, createNewAgent, migrateIfRequired, warmUpCache]
+    [logger, restartExistingAgent, createNewAgent, migrateIfRequired, warmUpCache, store.preferences.selectedMediator]
   )
 
   const shutdownAndClearAgentIfExists = useCallback(async () => {

package/src/index.ts

@@ -15,7 +15,6 @@ import CredentialCard from './components/misc/CredentialCard'
 import InfoBox, { InfoBoxType } from './components/misc/InfoBox'
 import ErrorModal from './components/modals/ErrorModal'
 import SafeAreaModal from './components/modals/SafeAreaModal'
-import NetInfo from './components/network/NetInfo'
 import Record from './components/record/Record'
 import InfoTextBox from './components/texts/InfoTextBox'
 import Link from './components/texts/Link'
@@ -189,7 +188,6 @@ export {
   ToastType,
   toastConfig,
   NavContainer,
-  NetInfo,
   OnboardingPages,
   OpenIDCredentialRecordProvider,
   NotificationListItem,

package/src/localization/en/en.json

@@ -48,6 +48,7 @@
     "Remove": "Remove",
     "GotIt": "Got it",
     "Send": "Send",
+    "Reset": "Reset",
     "ViewJSON": "View JSON Details"
   },
   "Date": {
@@ -675,6 +676,7 @@
     "RejectThisProof?": "Reject this Proof Request?",
     "DeclineThisProof?": "Decline this Proof Request?",
     "MultipleCredentials": "You have multiple credentials to choose from:",
+    "AvailableCards": "Available cards",
     "AcceptingProof": "Accepting Proof",
     "SuccessfullyAcceptedProof": "Successfully Accepted Proof",
     "SensitiveInformation": "This request is asking for sensitive information.",
@@ -747,7 +749,10 @@
     "Developer": "Developer options",
     "Notifications": "Notifications",
     "AutoLockTime": "Auto lock time",
-    "Logout": "Log out"
+    "Logout": "Log out",
+    "ConfigureMediator": "Configure Mediator",
+    "ChangeMediator": "Change Mediator",
+    "ChangeMediatorDescription": "Changing the mediator will restart the app. Do you want to continue?"
   },
   "AutoLockTimes": {
     "FiveMinutes": "Five Minutes",
@@ -803,6 +808,7 @@
     "CredentialOffer": "Credential Offer",
     "ProofChangeCredential": "Choose a credential",
     "ProofRequest": "Proof Request",
+    "ChangeCard": "Change Card",
     "ProofRequestDetails": "Proof Request Details",
     "ProofRequestAttributeDetails": "Proof Request Attribute Details",
     "ProofDetails": "Proof Details",
@@ -938,5 +944,8 @@
     "LearnMore": "Learn what's New",
     "UpdateNow": "Update the app",
     "UpdateLater": "Do this later"
+  },
+  "Banner": {
+    "AlertsLength": "You have {{ alerts }} alerts"
   }
 }

package/src/localization/fr/fr.json

@@ -48,6 +48,7 @@
     "Close": "Fermer",
     "GotIt": "Got it (FR)",
     "Send": "Envoyer",
+    "Reset": "Reset (FR)",
     "ViewJSON": "View JSON Details (FR)"
 
   },
@@ -675,6 +676,7 @@
     "RejectThisProof?": "Rejeter cette preuve?",
     "AcceptingProof": "Acceptation de la preuve",
     "MultipleCredentials": "Vous avez le choix entre plusieurs attestations d'identification :",
+    "AvailableCards": "Available cards (FR)",
     "SuccessfullyAcceptedProof": "Preuve acceptée avec succès",
     "SensitiveInformation": "Cette requête contient des données sensibles.",
     "RejectingProof": "Rejet de la preuve",
@@ -735,7 +737,10 @@
     "ScanMyQR": "Scanner mon code QR",
     "Developer": "Options de développeur",
     "AutoLockTime": "Auto lock time (FR)",
-    "Logout": "Déconnexion"
+    "Logout": "Déconnexion",
+    "ConfigureMediator": "Configurer le médiateur",
+    "ChangeMediator": "Change mediator (FR)",
+    "ChangeMediatorDescription": "Changing the mediator will restart the app. Do you want to continue? (FR)"
   },
   "AutoLockTimes": {
     "FiveMinutes": "Five Minutes (FR)",
@@ -805,6 +810,7 @@
     "ChangePIN": "Changer NIP",
     "CommonDecline": "Refuser",
     "ProofRequests": "Demandes de preuve",
+    "ChangeCard": "Change Card (FR)",
     "ProofRequestDetails": "Détails de la Demande de preuve",
     "SendProofRequest": "Envoyer une demande d'attestation",
     "ChooseProofRequest": "Choisissez une demande d'attestation",
@@ -921,5 +927,8 @@
     "LearnMore": "Learn what's New (FR)",
     "UpdateNow": "Update the app (FR)",
     "UpdateLater": "Do this later (FR)"
+  },
+  "Banner": {
+    "AlertsLength": "You have {{ alerts }} alerts (FR)"
   }
 }

package/src/localization/pt-br/pt-br.json

@@ -47,6 +47,7 @@
     "Remove": "Remover",
     "GotIt": "Got it (PT-BR)",
     "Send": "Enviar",
+    "Reset": "Reset (PT-BR)",
     "ViewJSON": "View JSON Details (PT-BR)"
 
   },
@@ -660,6 +661,7 @@
     "DeclineThisProof?": "Recusar esta Requisição de Prova?",
     "AcceptingProof": "Aceitando Prova",
     "MultipleCredentials": "Você tem múltiplas credenciais para escolher:",
+    "AvailableCards": "Available cards (PT-BR)",
     "SuccessfullyAcceptedProof": "Prova Aceita com Sucesso",
     "SensitiveInformation": "Esta requisição está solicitando informações sensíveis.",
     "ProofRequestNotFound": "Requisição de Prova não encontrada.",
@@ -721,7 +723,10 @@
     "ScanMyQR": "Scanear meu QR code",
     "Developer": "Opções de Desenvolvedor",
     "AutoLockTime": "Auto lock time (PT-BR)",
-    "Logout": "Sair"
+    "Logout": "Sair",
+    "ConfigureMediator": "Configurar Mediator",
+    "ChangeMediator": "Change mediator (PT-BR)",
+    "ChangeMediatorDescription": "Changing the mediator will restart the app. Do you want to continue? (PT-BR)"
   },
   "AutoLockTimes": {
     "FiveMinutes": "Five Minutes (PT-BR)",
@@ -774,6 +779,7 @@
     "Notifications": "Notificações",
     "CredentialOffer": "Oferta de Credencial",
     "ProofRequest": "Requisição de Prova",
+    "ChangeCard": "Change Card (PT-BR)",
     "ProofChangeCredential": "Escolha uma credencial",
     "ProofRequestDetails": "Detalhes Da Solicitação De Comprovação",
     "ProofRequestAttributeDetails": "Atributos de Requisição de Prova",
@@ -899,5 +905,8 @@
     "LearnMore": "Learn what's New (PT-BR)",
     "UpdateNow": "Update the app (PT-BR)",
     "UpdateLater": "Do this later (PT-BR)"
+  },
+   "Banner": {
+    "AlertsLength": "You have {{ alerts }} alerts (PT-BR)"
   }
 }

package/src/modules/openid/screens/OpenIDProofChangeCredential.tsx

@@ -1,8 +1,9 @@
 import { StackScreenProps } from '@react-navigation/stack'
-import { DeliveryStackParams, Screens } from '../../../types/navigators'
-import ScreenLayout from '../../../layout/ScreenLayout'
 import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native'
 import { useTranslation } from 'react-i18next'
+
+import { DeliveryStackParams, Screens } from '../../../types/navigators'
+import ScreenLayout from '../../../layout/ScreenLayout'
 import { useTheme } from '../../../contexts/theme'
 import { useEffect, useState } from 'react'
 import { MdocRecord, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
@@ -90,13 +91,13 @@ const OpenIDProofCredentialSelect: React.FC<Props> = ({ route, navigation }: Pro
 
   const listHeader = () => {
     return (
-      <View style={{ ...styles.pageMargin, marginVertical: 20 }}>
+      <View style={{ ...styles.pageMargin, marginTop: 40, marginBottom: 20 }}>
         {loading ? (
           <View style={styles.cardLoading}>
             <RecordLoading />
           </View>
         ) : (
-          <ThemedText>{t('ProofRequest.MultipleCredentials')}</ThemedText>
+          <ThemedText variant='bold'>{t('ProofRequest.AvailableCards')}</ThemedText>
         )}
       </View>
     )

package/src/navigators/DeliveryStack.tsx

@@ -3,11 +3,13 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import HeaderRightHome from '../components/buttons/HeaderHome'
+import IconButton, { ButtonLocation } from '../components/buttons/IconButton'
 import { useTheme } from '../contexts/theme'
 import Connection from '../screens/Connection'
 import CredentialOffer from '../screens/CredentialOffer'
 import ProofRequest from '../screens/ProofRequest'
 import { DeliveryStackParams, Screens } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
 
 import { useDefaultStackOptions } from './defaultStackOptions'
 import OpenIDProofPresentation from '../modules/openid/screens/OpenIDProofPresentation'
@@ -71,10 +73,19 @@ const DeliveryStack: React.FC = () => {
       <Stack.Screen
         name={Screens.OpenIDProofCredentialSelect}
         component={OpenIDProofCredentialSelect}
-        options={{
-          title: t('Screens.ProofRequest'),
+        options={({ navigation }) => ({
+          title: t('Screens.ChangeCard'),
+          headerLeft: () => (
+            <IconButton
+              buttonLocation={ButtonLocation.Left}
+              accessibilityLabel={t('Global.Back')}
+              testID={testIdWithKey('BackButton')}
+              onPress={() => navigation.goBack()}
+              icon="arrow-left"
+            />
+          ),
           ...ScreenOptionsDictionary[Screens.OpenIDProofCredentialSelect],
-        }}
+        })}
       />
     </Stack.Navigator>
   )

package/src/navigators/MainStack.tsx

@@ -68,7 +68,10 @@ const MainStack: React.FC = () => {
     <View style={{ flex: 1 }} importantForAccessibility={hideElements}>
       <Stack.Navigator
         initialRouteName={Stacks.TabStack}
-        screenOptions={{ ...defaultStackOptions, headerShown: false }}
+        screenOptions={{
+          ...defaultStackOptions,
+          headerShown: false,
+        }}
       >
         <Stack.Screen name={Stacks.TabStack} component={TabStack} />
         <Stack.Screen

package/src/navigators/SettingStack.tsx

@@ -19,6 +19,7 @@ import { testIdWithKey } from '../utils/testable'
 import { useDefaultStackOptions } from './defaultStackOptions'
 import { TOKENS, useServices } from '../container-api'
 import AutoLock from '../screens/AutoLock'
+import ConfigureMediator from '../screens/ConfigureMediator'
 
 const SettingStack: React.FC = () => {
   const Stack = createStackNavigator<SettingStackParams>()
@@ -64,6 +65,15 @@ const SettingStack: React.FC = () => {
           ...ScreenOptionsDictionary[Screens.Language],
         }}
       />
+      <Stack.Screen
+        name={Screens.ConfigureMediator}
+        component={ConfigureMediator}
+        options={{
+          title: 'Configure Mediator',
+          headerBackTestID: testIdWithKey('Back'),
+          ...ScreenOptionsDictionary[Screens.ConfigureMediator],
+        }}
+      />
       <Stack.Screen
         name={Screens.AutoLock}
         component={AutoLock}

package/src/navigators/defaultStackOptions.tsx

@@ -7,6 +7,7 @@ import { ITheme, OnboardingTheme } from '../theme'
 import { ScreenOptionsType, Screens } from '../types/navigators'
 import { testIdWithKey } from '../utils/testable'
 import { TOKENS, useServices } from '../container-api'
+import HeaderWithBanner from '../components/views/HeaderWithBanner'
 
 export const DefaultScreenOptionsDictionary: ScreenOptionsType = {
   [Screens.Preface]: {
@@ -94,6 +95,7 @@ export function useDefaultStackOptions({ ColorPallet }: ITheme): StackNavigation
       },
       headerTitleAlign: 'center' as 'center' | 'left',
       headerTitle: (props: { children: React.ReactNode }) => <HeaderTitle {...props} />,
+      header: (props) => <HeaderWithBanner {...props} />,
       headerBackAccessibilityLabel: t('Global.Back'),
     }
   )

package/src/screens/Chat.tsx

@@ -1,6 +1,7 @@
 import { BasicMessageRepository, ConnectionRecord } from '@credo-ts/core'
 import { useAgent, useBasicMessagesByConnectionId, useConnectionById } from '@credo-ts/react-hooks'
 import { useIsFocused, useNavigation } from '@react-navigation/native'
+import { useHeaderHeight } from '@react-navigation/elements'
 import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,6 +21,7 @@ import { Role } from '../types/chat'
 import { BasicMessageMetadata, basicMessageCustomMetadata } from '../types/metadata'
 import { RootStackParams, ContactStackParams, Screens, Stacks } from '../types/navigators'
 import { getConnectionName } from '../utils/helpers'
+import { KeyboardAvoidingView } from 'react-native'
 
 type ChatProps = StackScreenProps<ContactStackParams, Screens.Chat> | StackScreenProps<RootStackParams, Screens.Chat>
 
@@ -41,6 +43,7 @@ const Chat: React.FC<ChatProps> = ({ route }) => {
   const [showActionSlider, setShowActionSlider] = useState(false)
   const { ChatTheme: theme, Assets } = useTheme()
   const [theirLabel, setTheirLabel] = useState(getConnectionName(connection, store.preferences.alternateContactNames))
+  const headerHeight = useHeaderHeight()
 
   // This useEffect is for properly rendering changes to the alt contact name, useMemo did not pick them up
   useEffect(() => {
@@ -105,25 +108,28 @@ const Chat: React.FC<ChatProps> = ({ route }) => {
 
   return (
     <SafeAreaView edges={['bottom', 'left', 'right']} style={{ flex: 1, paddingTop: 20 }}>
-      <GiftedChat
-        messages={chatMessages}
-        showAvatarForEveryMessage={true}
-        alignTop
-        renderAvatar={() => null}
-        messageIdGenerator={(msg) => msg?._id.toString() || '0'}
-        renderMessage={(props) => <ChatMessage messageProps={props} />}
-        renderInputToolbar={(props) => renderInputToolbar(props, theme)}
-        renderSend={(props) => renderSend(props, theme)}
-        renderComposer={(props) => renderComposer(props, theme, t('Contacts.TypeHere'))}
-        disableComposer={!silentAssertConnectedNetwork()}
-        onSend={onSend}
-        user={{
-          _id: Role.me,
-        }}
-        renderActions={(props) => renderActions(props, theme, actions)}
-        onPressActionButton={actions ? () => setShowActionSlider(true) : undefined}
-      />
-      {showActionSlider && <ActionSlider onDismiss={onDismiss} actions={actions} />}
+      <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" keyboardVerticalOffset={headerHeight}>
+        <GiftedChat
+          keyboardShouldPersistTaps={'handled'}
+          messages={chatMessages}
+          showAvatarForEveryMessage={true}
+          alignTop
+          renderAvatar={() => null}
+          messageIdGenerator={(msg) => msg?._id.toString() || '0'}
+          renderMessage={(props) => <ChatMessage messageProps={props} />}
+          renderInputToolbar={(props) => renderInputToolbar(props, theme)}
+          renderSend={(props) => renderSend(props, theme)}
+          renderComposer={(props) => renderComposer(props, theme, t('Contacts.TypeHere'))}
+          disableComposer={!silentAssertConnectedNetwork()}
+          onSend={onSend}
+          user={{
+            _id: Role.me,
+          }}
+          renderActions={(props) => renderActions(props, theme, actions)}
+          onPressActionButton={actions ? () => setShowActionSlider(true) : undefined}
+        />
+        {showActionSlider && <ActionSlider onDismiss={onDismiss} actions={actions} />}
+      </KeyboardAvoidingView>
     </SafeAreaView>
   )
 }