Update the documentation to explain need for portrait lock

login-workflow/docs/routing.md

@@ -6,7 +6,25 @@ While this workflow library will work with different routing providers, we gener
 
 Because this workflow package is router-agnostic, you will be required to set up your routing solution and configure which of the workflow screens will appear on each of your routes.
 
-The Workflow support only Portrait mode in mobile devices and should be used only in Portrait mode
+The Login Workflow has been set up to only support Portrait mode on mobile devices. It is important to use Portrait mode because when the soft keyboard is opened in Landscape mode, the text input fields can get pushed under the workflow card header in certain views, causing inconvenience. We have locked the Login Workflow to support Portrait mode to prevent this issue.
+
+<img width="400" alt="Account Details" src="../media/landscape-mode.png">
+
+To update the router to lock the orientation, we need to pass the logic to `orientation` attribute which is present inside `screenOptions` prop of `Stack.Navigator`. Please refer to the example below.
+
+```tsx
+<NavigationContainer ref={navigationRef}>
+    <Stack.Navigator
+        initialRouteName={'AuthProviderExample'}
+        screenOptions={{
+            headerShown: false,
+            orientation: width >= 768 && height >= 768 ? 'all' : 'portrait',
+        }}
+    >
+        <Stack.Screen name="AuthProviderExample" component={AuthRouter} />
+    </Stack.Navigator>
+</NavigationContainer>
+```
 
 ### Authentication
 

login-workflow/example/src/navigation/index.tsx

@@ -11,7 +11,6 @@ import {
 import i18nAppInstance from '../../translations/i18n';
 import { NavigationDrawer } from './navigation-drawer';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { createStackNavigator } from '@react-navigation/stack';
 import { Dimensions, View } from 'react-native';
 
 import { ProjectAuthUIActions } from '../actions/AuthUIActions';
@@ -48,6 +47,7 @@ const AuthRouter = (): any => {
     const app = useApp();
     const { email, rememberMe } = app.loginData;
     const navigation = useNavigation<NativeStackNavigationProp<any>>();
+
     return (
         <>
             <AuthContextProvider
@@ -146,7 +146,8 @@ const AuthRouter = (): any => {
 const RegistrationRouter = (): any => {
     const app = useApp();
     const navigation = useNavigation<NativeStackNavigationProp<any>>();
-    const RegistrationStack = createStackNavigator();
+    const RegistrationStack = createNativeStackNavigator();
+
     return (
         <>
             <RegistrationContextProvider