feat: inject global screen configuration into core config (#1054)

Signed-off-by: OPS <[email protected]>

packages/legacy/core/App/contexts/configuration.tsx

@@ -1,7 +1,7 @@
 import { IndyVdrPoolConfig } from '@aries-framework/indy-vdr'
 import { ProofRequestTemplate } from '@hyperledger/aries-bifold-verifier'
 import { OCABundleResolverType } from '@hyperledger/aries-oca/build/legacy'
-import { StackScreenProps } from '@react-navigation/stack'
+import { StackNavigationOptions, StackScreenProps } from '@react-navigation/stack'
 import { createContext, ReducerAction, useContext } from 'react'
 
 import { EmptyListProps } from '../components/misc/EmptyList'
@@ -54,6 +54,7 @@ export interface ConfigurationContext {
   whereToUseWalletUrl: string
   showScanHelp?: boolean
   showScanButton?: boolean
+  globalScreenOptions?: StackNavigationOptions
 }
 
 export const ConfigurationContext = createContext<ConfigurationContext>(null as unknown as ConfigurationContext)

packages/legacy/core/App/navigators/defaultStackOptions.tsx

@@ -1,30 +1,36 @@
+import { StackNavigationOptions } from '@react-navigation/stack'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import HeaderTitle from '../components/texts/HeaderTitle'
+import { useConfiguration } from '../contexts/configuration'
 import { ITheme } from '../theme'
 
-export function createDefaultStackOptions({ ColorPallet }: ITheme): any {
+export function createDefaultStackOptions({ ColorPallet }: ITheme): StackNavigationOptions {
   const { t } = useTranslation()
-  return {
-    headerTintColor: ColorPallet.brand.headerIcon,
-    headerShown: true,
-    headerBackTitleVisible: false,
-    headerTitleContainerStyle: {
-      flexShrink: 1,
-      maxWidth: '68%',
-      width: '100%',
-    },
-    headerStyle: {
-      elevation: 0,
-      shadowOffset: { width: 0, height: 6 },
-      shadowRadius: 6,
-      shadowColor: ColorPallet.grayscale.black,
-      shadowOpacity: 0.15,
-      borderBottomWidth: 0,
-    },
-    headerTitleAlign: 'center' as 'center' | 'left',
-    headerTitle: (props: { children: React.ReactNode }) => <HeaderTitle {...props} />,
-    headerBackAccessibilityLabel: t('Global.Back'),
-  }
+  const { globalScreenOptions } = useConfiguration()
+
+  return (
+    globalScreenOptions ?? {
+      headerTintColor: ColorPallet.brand.headerIcon,
+      headerShown: true,
+      headerBackTitleVisible: false,
+      headerTitleContainerStyle: {
+        flexShrink: 1,
+        maxWidth: '68%',
+        width: '100%',
+      },
+      headerStyle: {
+        elevation: 0,
+        shadowOffset: { width: 0, height: 6 },
+        shadowRadius: 6,
+        shadowColor: ColorPallet.grayscale.black,
+        shadowOpacity: 0.15,
+        borderBottomWidth: 0,
+      },
+      headerTitleAlign: 'center' as 'center' | 'left',
+      headerTitle: (props: { children: React.ReactNode }) => <HeaderTitle {...props} />,
+      headerBackAccessibilityLabel: t('Global.Back'),
+    }
+  )
 }