feat(CORE/NAVIGATION): stack navigator support

.changeset/small-tables-work.md

@@ -0,0 +1,9 @@
+---
+"@equinor/mad-core": minor
+---
+
+BREAKING: replace `createCoreStackNavigator` with
+`createStackCoreNavigator`/`createNativeStackCoreNavigator`. Under the hood they use
+`createStackNavigator`/`createNativeStackNavigator` respectively. If you don't want any breaking
+changes in your app, migrate `createCoreStackNavigator` to `createNativeStackCoreNavigator`. The
+stack-type you use is displayed in the about-screen.

.changeset/thin-rice-sort.md

@@ -0,0 +1,5 @@
+---
+"@equinor/mad-navigation": minor
+---
+
+add stack navigator

apps/chronicles/navigation/index.tsx

@@ -16,9 +16,9 @@ import { Color, Icon, IconName, useBreakpoint, useToken } from "@equinor/mad-com
 import {
     createBottomTabNavigator,
     createNativeStackNavigator,
-    createCoreStackNavigator,
     NavigationContainer,
     getDefaultScreenOptionsForLoginScreen,
+    createNativeStackCoreNavigator,
 } from "@equinor/mad-core";
 import { config } from "../mad.config";
 import { GoToSettingsButton } from "../components/GoToSettingsButton";
@@ -36,6 +36,7 @@ import { DFWComponentScreen } from "../screens/dfw/DFWComponentsScreen";
 import { DFWComponentName } from "../types/dfwcomponents";
 import { SampleLoginScreen } from "./LoginScreen";
 import { ToastScreen } from "../screens/ToastScreen";
+
 export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
     const token = useToken();
     return (
@@ -58,7 +59,7 @@ export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeNa
     );
 }
 
-const CoreStack = createCoreStackNavigator<RootStackParamList>(config);
+const CoreStack = createNativeStackCoreNavigator<RootStackParamList>(config);
 function RootNavigator() {
     return (
         <CoreStack.Navigator>

apps/chronicles/package.json

@@ -15,6 +15,7 @@
         "@react-navigation/bottom-tabs": "^6.6.0",
         "@react-navigation/native": "^6.1.17",
         "@react-navigation/native-stack": "^6.10.0",
+        "@react-navigation/stack": "^6",
         "@shopify/react-native-skia": "1.5.0",
         "expo": "~52.0.11",
         "expo-asset": "~11.0.1",

apps/docs/docs/mad-core/migration-guide/3-use-createCoreStackNavigator.md

@@ -1,24 +1,35 @@
 ---
-sidebar_label: Use createCoreStackNavigator
-description: Learn how to use createCoreStackNavigator!
+sidebar_label: Use createStackCoreNavigator/createNativeStackCoreNavigator
+description: Learn how to use `createStackCoreNavigator`/`createNativeStackCoreNavigator`!
 ---
 
-# Use `createCoreStackNavigator`
+# Use `createStackCoreNavigator`/`createNativeStackCoreNavigator`
 
 Next step is replacing your topmost `createStackNavigator`/`createNativeStackNavigator` with
-`createCoreStackNavigator` from `@equinor/mad-core`. It takes one argument: The config you created
-in step 2. You use it the same way you would a normal `Stack`.
+`createStackCoreNavigator`/`createNativeStackCoreNavigator` from `@equinor/mad-core`. It takes one
+argument: The config you created in step 2. You use it the same way you would a normal `Stack`.
 
 ```tsx
-import { createCoreStackNavigator } from "@equinor/mad-core";
+import { createNativeStackCoreNavigator } from "@equinor/mad-core";
 import { config } from "path/to/mad.config.ts";
 import { RootStackParamList } from "path/to/paramList.ts";
 
-const RootStack = createCoreStackNavigator<RootStackParamList>(config);
+const RootStack = createNativeStackCoreNavigator<RootStackParamList>(config);
+```
+
+or
+
+```tsx
+import { createStackCoreNavigator } from "@equinor/mad-core";
+import { config } from "path/to/mad.config.ts";
+import { RootStackParamList } from "path/to/paramList.ts";
+
+const RootStack = createStackCoreNavigator<RootStackParamList>(config);
 ```
 
 If you have leftover screens from `mad-expo-core` in the stack, they should be removed.
-`createCoreStackNavigator` will add similar screens for you behind the scenes.
+`createStackCoreNavigator`/`createNativeStackCoreNavigator` will add similar screens for you behind
+the scenes.
 
 `SettingsScreen` also has to be added manually. This is because you most likely have app-specific
 settings you want to hook up to the settings screen.
@@ -30,7 +41,7 @@ suggest creating a wrapper component that passes in the props you need to `Setti
 Example stack:
 
 ```tsx
-const CoreStack = createCoreStackNavigator<RootStackParamList>(config);
+const CoreStack = createNativeStackCoreNavigator<RootStackParamList>(config);
 function RootNavigator() {
     return (
         <CoreStack.Navigator>

apps/docs/docs/mad-core/migration-guide/4-replace-navigation-imports.md

@@ -22,7 +22,7 @@ navigation tracking for you automatically, which is a nice feature to have!
 import {
     createBottomTabNavigator,
     createNativeStackNavigator,
-    createCoreStackNavigator,
+    createNativeStackCoreNavigator,
     NavigationContainer,
 } from "@equinor/mad-core";
 ```

apps/docs/docs/mad-navigation/2-installation.md

@@ -16,3 +16,4 @@ running a newer version of v6 and some features are missing, create an issue_
 | @react-navigation/bottom-tabs  | 6.5.7   |
 | @react-navigation/native       | 6.1.6   |
 | @react-navigation/native-stack | 6.9.12  |
+| @react-navigation/stack        | 6.4.1   |

apps/docs/docs/mad-navigation/3-usage.md

@@ -6,8 +6,8 @@ description: Learn how to use this package!
 # Usage
 
 If you want to add custom sub-headers to your navigation system, you first have to create custom
-navigator-creator functions. You can do so with `createBottomTabNavigatorFactory` and
-`createNativeStackNavigatorFactory`.
+navigator-creator functions. You can do so with `createBottomTabNavigatorFactory`,
+`createNativeStackNavigatorFactory` and `createStackNavigatorFactory`.
 
 Step 1: Create your custom sub-header:
 
@@ -22,11 +22,13 @@ Step 2: Create your new navigator-creator functions:
 import {
     createBottomTabNavigatorFactory,
     createNativeStackNavigatorFactory,
+    createStackNavigatorFactory,
 } from "@equinor/mad-navigation";
 import { CustomSubHeader } from "path/to/subHeader";
 
 export const createBottomTabNavigator = createBottomTabNavigatorFactory(CustomSubHeader);
 export const createNativeStackNavigator = createNativeStackNavigatorFactory(CustomSubHeader);
+export const createStackNavigator = createStackNavigatorFactory(CustomSubHeader);
 ```
 
 Follow [React Navigation’s documentation](https://reactnavigation.org/docs/getting-started/). When

packages/core/src/components/CoreNavigatorTypeProvider.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, PropsWithChildren, useContext } from "react";
+
+export type CoreNavigatorType = "stack" | "native-stack"
+
+const CoreNavigatorTypeContext = createContext<CoreNavigatorType | null>(null)
+
+type CoreNavigatorTypeProviderProps = PropsWithChildren<{type: CoreNavigatorType}>
+
+export const CoreNavigatorTypeProvider = ({type, children}: CoreNavigatorTypeProviderProps) => {
+    return <CoreNavigatorTypeContext.Provider value={type}>{children}</CoreNavigatorTypeContext.Provider>
+}
+
+export const useCoreNavigatorType = () => {
+    const coreNavigatorType = useContext(CoreNavigatorTypeContext)
+    if (!coreNavigatorType) throw new Error("Could not find core navigator type. You have most likely not added a core navigator to your application")
+    return coreNavigatorType;
+}

packages/core/src/components/createCoreStackNavigator.tsx

@@ -1,15 +1,27 @@
-import { CoreStackParamListBase, MadConfig } from "../types";
-import { createNativeStackNavigator } from "./navigation";
-import { createMadCoreNavigator } from "../utils/createMadCoreNavigator";
-import { setConfig } from "../store/mad-config";
 import { ParamListBase } from "@react-navigation/native";
+import { setConfig } from "../store/mad-config";
+import { CoreStackParamListBase, MadConfig } from "../types";
+import { createMadCoreStackNavigator, createMadCoreNativeStackNavigator } from "../utils/createMadCoreNavigator";
 import { initiateAuthenticationClient } from "../utils/initiateAuthenticationClient";
+import { createNativeStackNavigator, createStackNavigator } from "./navigation";
 
-export const createCoreStackNavigator = <T extends ParamListBase>(config: MadConfig<T>) => {
+export const createStackCoreNavigator = <T extends ParamListBase>(config: MadConfig<T>) => {
+    setConfig(config as MadConfig);
+    initiateAuthenticationClient();
+    const Stack = createStackNavigator<CoreStackParamListBase & T>();
+    const Navigator = createMadCoreStackNavigator(Stack);
+    return { ...Stack, Navigator }; 
+}
+export const createNativeStackCoreNavigator = <T extends ParamListBase>(config: MadConfig<T>) => {
     setConfig(config as MadConfig);
     initiateAuthenticationClient();
     const Stack = createNativeStackNavigator<CoreStackParamListBase & T>();
-    const Navigator = createMadCoreNavigator(Stack);
+    const Navigator = createMadCoreNativeStackNavigator(Stack);
+    return { ...Stack, Navigator }; 
+}
 
-    return { ...Stack, Navigator };
-};
+/**
+ * 
+ * @deprecated This functions is replaced by `createStackCoreNavigator` and `createNativeStackCoreNavigator`. USE `createNativeStackCoreNavigator` IF YOU DON'T WANT BREAKING CHANGES IN YOUR APP
+ */
+export const createCoreStackNavigator = <T extends ParamListBase>(config: MadConfig<T>) => createNativeStackCoreNavigator(config)

packages/core/src/components/navigation/navigation-creators.ts

@@ -1,8 +1,10 @@
 import {
     createBottomTabNavigatorFactory,
     createNativeStackNavigatorFactory,
+    createStackNavigatorFactory,
 } from "@equinor/mad-navigation";
 import { MadCoreSubHeader } from "./MadCoreSubHeader";
 
 export const createBottomTabNavigator = createBottomTabNavigatorFactory(MadCoreSubHeader);
 export const createNativeStackNavigator = createNativeStackNavigatorFactory(MadCoreSubHeader);
+export const createStackNavigator = createStackNavigatorFactory(MadCoreSubHeader);

packages/core/src/components/screens/AboutScreen.tsx

@@ -8,13 +8,15 @@ import {
     useExperimentalFeatures,
 } from "../../store/mad-config";
 import { getMadCommonBaseUrl } from "../../utils/madCommonUtils";
+import { useCoreNavigatorType } from "../CoreNavigatorTypeProvider";
 
 export const AboutScreen = () => {
     const styles = useStyles(themeStyles);
     const environment = useEnvironment();
     const environmentName = environment.charAt(0).toUpperCase() + environment.slice(1);
     const appVersion = useAppVersion();
     const about = useAbout();
+    const coreNavigatorType = useCoreNavigatorType();
     const experimentalFeatures = useExperimentalFeatures();
     const authenticationMethod = experimentalFeatures?.useExpoAuthSession ? "Expo" : "MSAL";
     const endpoints = [getMadCommonBaseUrl(environment)].concat(about?.endpoints ?? []);
@@ -33,12 +35,14 @@ export const AboutScreen = () => {
                             <Typography>BuildNr</Typography>
                             <Typography>App version</Typography>
                             <Typography>Authentication</Typography>
+                            <Typography>Core navigator type</Typography>
                         </View>
                         <View style={styles.columnContainer}>
                             <Typography>{environmentName}</Typography>
                             <Typography>{about?.buildNumber}</Typography>
                             <Typography>{appVersion}</Typography>
                             <Typography>{authenticationMethod}</Typography>
+                            <Typography>{coreNavigatorType}</Typography>
                         </View>
                     </View>
                 </View>

packages/core/src/store/mad-config/mad-config.ts

@@ -26,14 +26,14 @@
 );
 
 const MAD_CONFIG_NOT_FOUND_ERROR =
-    "Mad config has not been provided! Make sure you use 'createCoreStackNavigator' to provide your config";
+    "Mad config has not been provided! Make sure you use 'createNativeStackCoreNavigator'/'createStackCoreNavigator' to provide your config";
 
 export const useMadConfig = (): EnvironmentContextualConfig => {
     const config = useMadConfigStore().config;
     if (!config) throw new Error(MAD_CONFIG_NOT_FOUND_ERROR);
     return useMemo(() => {
         return createEnvironmentProxy(config.currentEnvironment);
     }, [config, config.currentEnvironment]);
 };
 
 export const getConfig = (): EnvironmentContextualConfig => {

packages/core/src/utils/MadCoreProviders.tsx

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from "react";
+import { ParamListBase } from "@react-navigation/native";
+import { MadConfig, WithoutEnvironmentOptionValues } from "../types";
+import { AppInsightsInitializer } from "@equinor/mad-insights";
+import { ToastEmitter } from "@equinor/mad-toast";
+import { ServiceMessageProvider } from "../components/service-message/ServiceMessageProvider";
+import { EnvironmentProvider } from "../components/EnvironmentProvider";
+import {
+    CoreNavigatorType,
+    CoreNavigatorTypeProvider,
+} from "../components/CoreNavigatorTypeProvider";
+
+export type MadCoreProvidersProps<T extends ParamListBase | void> = PropsWithChildren<{
+    config: WithoutEnvironmentOptionValues<MadConfig<T>>;
+    type: CoreNavigatorType;
+}>;
+export const MadCoreProviders = <T extends ParamListBase | void>({
+    config,
+    type,
+    children,
+}: MadCoreProvidersProps<T>) => {
+    return (
+        <AppInsightsInitializer config={config.applicationInsights}>
+            <CoreNavigatorTypeProvider type={type}>
+                <EnvironmentProvider>
+                    <ServiceMessageProvider>
+                        {children}
+                        <ToastEmitter />
+                    </ServiceMessageProvider>
+                </EnvironmentProvider>
+            </CoreNavigatorTypeProvider>
+        </AppInsightsInitializer>
+    );
+};