feat: Custom screen options dictionary: Onboarding stack only

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

@@ -9,7 +9,7 @@ import { RecordProps } from '../components/record/Record'
 import { Locales } from '../localization'
 import OnboardingPages from '../screens/OnboardingPages'
 import { GetCredentialHelpEntry } from '../types/get-credential-help'
-import { ConnectStackParams } from '../types/navigators'
+import { ConnectStackParams, ScreenOptionsType } from '../types/navigators'
 import { PINSecurityParams } from '../types/security'
 import { SettingSection } from '../types/settings'
 
@@ -57,6 +57,7 @@ export interface ConfigurationContext {
   showScanHelp?: boolean
   showScanButton?: boolean
   globalScreenOptions?: StackNavigationOptions
+  screenOptionsDictionary?: ScreenOptionsType
   showDetailsInfo?: boolean
   getCredentialHelpDictionary?: GetCredentialHelpEntry[]
   contactHideList?: string[]

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

@@ -61,6 +61,7 @@ const RootStack: React.FC = () => {
     enableImplicitInvitations,
     enableReuseConnections,
     disableOnboardingSkip,
+    screenOptionsDictionary,
   } = useConfiguration()
   useDeepLinks()
 
@@ -283,7 +284,7 @@ const RootStack: React.FC = () => {
     const Stack = createStackNavigator()
     const carousel = createCarouselStyle(OnboardingTheme)
     return (
-      <Stack.Navigator initialRouteName={Screens.Splash} screenOptions={{ ...defaultStackOptions, headerShown: false }}>
+      <Stack.Navigator initialRouteName={Screens.Splash} screenOptions={{ ...defaultStackOptions }}>
         <Stack.Screen name={Screens.Splash} component={splash} />
         <Stack.Screen
           name={Screens.Preface}
@@ -292,13 +293,10 @@ const RootStack: React.FC = () => {
         />
         <Stack.Screen
           name={Screens.Onboarding}
-          options={() => ({
+          options={{
+            ...screenOptionsDictionary?.[Screens.Onboarding],
             title: t('Screens.Onboarding'),
-            headerTintColor: OnboardingTheme.headerTintColor,
-            headerShown: true,
-            gestureEnabled: false,
-            headerLeft: () => false,
-          })}
+          }}
         >
           {(props) => (
             <Onboarding
@@ -313,52 +311,44 @@ const RootStack: React.FC = () => {
         </Stack.Screen>
         <Stack.Screen
           name={Screens.Terms}
-          options={() => ({
+          options={{
+            ...screenOptionsDictionary?.[Screens.Terms],
             title: t('Screens.Terms'),
-            headerTintColor: OnboardingTheme.headerTintColor,
-            headerShown: true,
-            headerLeft: () => false,
-            rightLeft: () => false,
-          })}
+          }}
           component={terms}
         />
         <Stack.Screen
           name={Screens.CreatePIN}
-          options={() => ({
+          options={{
+            ...screenOptionsDictionary?.[Screens.CreatePIN],
             title: t('Screens.CreatePIN'),
-            headerShown: true,
-            headerLeft: () => false,
-            rightLeft: () => false,
-          })}
+          }}
         >
           {(props) => <PINCreate {...props} setAuthenticated={onAuthenticated} />}
         </Stack.Screen>
         <Stack.Screen
           name={Screens.NameWallet}
-          options={() => ({
+          options={{
+            ...screenOptionsDictionary?.[Screens.NameWallet],
             title: t('Screens.NameWallet'),
-            headerTintColor: OnboardingTheme.headerTintColor,
-            headerShown: true,
-            headerLeft: () => false,
-            rightLeft: () => false,
-          })}
+          }}
           component={NameWallet}
         />
         <Stack.Screen
           name={Screens.UseBiometry}
-          options={() => ({
+          options={{
+            ...screenOptionsDictionary?.[Screens.UseBiometry],
             title: t('Screens.Biometry'),
-            headerTintColor: OnboardingTheme.headerTintColor,
-            headerShown: true,
-            headerLeft: () => false,
-            rightLeft: () => false,
-          })}
+          }}
           component={useBiometry}
         />
         <Stack.Screen
           name={Screens.Developer}
           component={developer}
-          options={{ ...defaultStackOptions, title: t('Screens.Developer'), headerBackTestID: testIdWithKey('Back') }}
+          options={{
+            ...screenOptionsDictionary?.[Screens.Developer],
+            title: t('Screens.Developer'),
+          }}
         />
       </Stack.Navigator>
     )

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

@@ -4,7 +4,36 @@ import { useTranslation } from 'react-i18next'
 
 import HeaderTitle from '../components/texts/HeaderTitle'
 import { useConfiguration } from '../contexts/configuration'
-import { ITheme } from '../theme'
+import { ITheme, OnboardingTheme } from '../theme'
+import { ScreenOptionsType, Screens } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
+
+const defaultScreenOptionsDictionary: ScreenOptionsType = {
+  [Screens.Onboarding]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerLeft: () => false,
+  },
+  [Screens.Terms]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerLeft: () => false,
+  },
+  [Screens.CreatePIN]: {
+    headerLeft: () => false,
+  },
+  [Screens.NameWallet]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerLeft: () => false,
+  },
+  [Screens.UseBiometry]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerLeft: () => false,
+  },
+  [Screens.Developer]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerShown: false,
+    headerBackTestID: testIdWithKey('Back'),
+  },
+}
 
 export function createDefaultStackOptions({ ColorPallet }: ITheme): StackNavigationOptions {
   const { t } = useTranslation()
@@ -34,3 +63,9 @@ export function createDefaultStackOptions({ ColorPallet }: ITheme): StackNavigat
     }
   )
 }
+
+export function createDefaultScreenStackOptions(): ScreenOptionsType {
+  const { screenOptionsDictionary } = useConfiguration()
+
+  return screenOptionsDictionary ?? defaultScreenOptionsDictionary
+}

packages/legacy/core/App/types/navigators.ts

@@ -1,5 +1,6 @@
 import { CredentialExchangeRecord } from '@aries-framework/core'
 import { NavigatorScreenParams } from '@react-navigation/core'
+import { StackNavigationOptions } from '@react-navigation/stack'
 
 export enum Screens {
   AttemptLockout = 'Temporarily Locked',
@@ -161,3 +162,5 @@ export type DeliveryStackParams = {
   [Screens.Declined]: { credentialId: string }
   [Screens.Chat]: { connectionId: string }
 }
+
+export type ScreenOptionsType = Partial<Record<Screens, StackNavigationOptions>>