@brightlayer-ui/react-native-template-authentication-typescript 2.1.0 → 3.0.0-alpha.0

package/template/ios/blankTemplate.xcodeproj/xcshareddata/xcschemes/blankTemplate.xcscheme

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1210"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "blankTemplate.app"
+               BlueprintName = "blankTemplate"
+               ReferencedContainer = "container:blankTemplate.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "blankTemplateTests.xctest"
+               BlueprintName = "blankTemplateTests"
+               ReferencedContainer = "container:blankTemplate.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "blankTemplate.app"
+            BlueprintName = "blankTemplate"
+            ReferencedContainer = "container:blankTemplate.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "blankTemplate.app"
+            BlueprintName = "blankTemplate"
+            ReferencedContainer = "container:blankTemplate.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

package/template/ios/blankTemplate.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:blankTemplate.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

package/template/ios/blankTemplate.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

package/template/ios/blankTemplateTests/Info.plist

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>

package/template/ios/blankTemplateTests/blankTemplateTests.m

@@ -0,0 +1,66 @@
+#import <UIKit/UIKit.h>
+#import <XCTest/XCTest.h>
+
+#import <React/RCTLog.h>
+#import <React/RCTRootView.h>
+
+#define TIMEOUT_SECONDS 600
+#define TEXT_TO_LOOK_FOR @"Welcome to React"
+
+@interface blankTemplateTests : XCTestCase
+
+@end
+
+@implementation blankTemplateTests
+
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
+{
+  if (test(view)) {
+    return YES;
+  }
+  for (UIView *subview in [view subviews]) {
+    if ([self findSubviewInView:subview matching:test]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+- (void)testRendersWelcomeScreen
+{
+  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
+  BOOL foundElement = NO;
+
+  __block NSString *redboxError = nil;
+#ifdef DEBUG
+  RCTSetLogFunction(
+      ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+        if (level >= RCTLogLevelError) {
+          redboxError = message;
+        }
+      });
+#endif
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    foundElement = [self findSubviewInView:vc.view
+                                  matching:^BOOL(UIView *view) {
+                                    if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+                                      return YES;
+                                    }
+                                    return NO;
+                                  }];
+  }
+
+#ifdef DEBUG
+  RCTSetLogFunction(RCTDefaultLogFunction);
+#endif
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+@end

package/template/ios/link-assets-manifest.json

@@ -0,0 +1,25 @@
+{
+    "migIndex": 1,
+    "data": [
+        {
+            "path": "assets/fonts/OpenSans-Bold.ttf",
+            "sha1": "1e3704ee48b5ff7e582488ead87b05249f14dc1c"
+        },
+        {
+            "path": "assets/fonts/OpenSans-ExtraBold.ttf",
+            "sha1": "5acb1de2513aca9ce4fcf5d1e1e49aad86f1888c"
+        },
+        {
+            "path": "assets/fonts/OpenSans-Light.ttf",
+            "sha1": "bf0d133b628259eca01049d30fa6316094d00bcf"
+        },
+        {
+            "path": "assets/fonts/OpenSans-Regular.ttf",
+            "sha1": "babe8dce93a3e48b6c3c79720a0c048e88dd1fe7"
+        },
+        {
+            "path": "assets/fonts/OpenSans-SemiBold.ttf",
+            "sha1": "e256f8391718ef61f253dfb4e95bbeb3c5857afc"
+        }
+    ]
+}

package/template/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    preset: 'react-native',
+};

package/template/metro.config.js

@@ -1,29 +1,11 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
 /**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
  *
- * @format
+ * @type {import('metro-config').MetroConfig}
  */
+const config = {};
 
-const { getDefaultConfig } = require('metro-config');
-
-module.exports = (async () => {
-    const {
-        resolver: { sourceExts, assetExts },
-    } = await getDefaultConfig();
-    return {
-        transformer: {
-            babelTransformerPath: require.resolve('react-native-svg-transformer'),
-            getTransformOptions: async () => ({
-                transform: {
-                    experimentalImportSupport: false,
-                    inlineRequires: true,
-                },
-            }),
-        },
-        resolver: {
-            assetExts: assetExts.filter((ext) => ext !== 'svg'),
-            sourceExts: [...sourceExts, 'svg'],
-        },
-    };
-})();
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package/template/package.json

@@ -0,0 +1,70 @@
+{
+    "name": "blank-template",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "android": "react-native run-android",
+        "ios": "react-native run-ios",
+        "lint": "eslint ",
+        "lint:fix": "eslint \"src/**/**.ts\" --fix",
+        "prettier": "prettier \"**/**.{tsx,ts,js,json}\" --write",
+        "start": "react-native start",
+        "test": "jest"
+    },
+    "dependencies": {
+        "@brightlayer-ui/react-native-auth-workflow": "6.0.0-alpha.2",
+        "@brightlayer-ui/react-native-components": "^8.0.2",
+        "@brightlayer-ui/react-native-themes": "^7.0.0",
+        "@brightlayer-ui/react-native-vector-icons": "^2.2.0",
+        "@react-native-async-storage/async-storage": "^1.23.1",
+        "@react-navigation/drawer": "^6.6.15",
+        "@react-navigation/native": "^6.1.17",
+        "@react-navigation/native-stack": "^6.9.26",
+        "i18next": "^23.11.3",
+        "intl-pluralrules": "^2.0.1",
+        "react": "18.2.0",
+        "react-i18next": "^14.1.1",
+        "react-native": "0.74.1",
+        "react-native-gesture-handler": "^2.16.2",
+        "react-native-pager-view": "^6.3.1",
+        "react-native-paper": "^5.0.0",
+        "react-native-reanimated": "^3.11.0",
+        "react-native-restart": "^0.0.27",
+        "react-native-safe-area-context": "^4.0.0",
+        "react-native-screens": "^3.31.1",
+        "react-native-select-dropdown": "^3.4.0",
+        "react-native-vector-icons": "^9.2.0",
+        "react-native-webview": "^13.10.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.0",
+        "@babel/preset-env": "^7.20.0",
+        "@babel/runtime": "^7.20.0",
+        "@brightlayer-ui/eslint-config": "^3.0.1",
+        "@brightlayer-ui/prettier-config": "^1.0.3",
+        "@eslint/js": "^9.2.0",
+        "@react-native/babel-preset": "0.74.83",
+        "@react-native/eslint-config": "0.74.83",
+        "@react-native/metro-config": "0.74.83",
+        "@react-native/typescript-config": "0.74.83",
+        "@types/react": "^18.2.6",
+        "@types/react-test-renderer": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^7.8.0",
+        "@typescript-eslint/parser": "^7.8.0",
+        "babel-jest": "^29.6.3",
+        "eslint": "8.56.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "globals": "^15.1.0",
+        "jest": "^29.6.3",
+        "prettier": "2.8.8",
+        "react-test-renderer": "18.2.0",
+        "typescript": "5.0.4",
+        "typescript-eslint": "^7.8.0"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "prettier": "@brightlayer-ui/prettier-config"
+}

package/template/src/actions/AuthUIActions.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { AuthUIActions, SecurityContextActions } from '@brightlayer-ui/react-native-auth-workflow';
+import { AuthUIActions } from '@brightlayer-ui/react-native-auth-workflow';
+import { AppContextType } from '../contexts/AppContextProvider';
 import { LocalStorage } from '../store/local-storage';
 
 const sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
@@ -13,8 +14,7 @@ function isRandomFailure(): boolean {
     return false; // randomResponseNumber < 10;
 }
 
-type AuthUIActionsFunction = () => AuthUIActions;
-type AuthUIActionsWithSecurity = (securityHelper: SecurityContextActions) => AuthUIActionsFunction;
+type AuthUIActionsWithApp = (appHelper: AppContextType) => AuthUIActions;
 
 /**
  * Example implementation of [[AuthUIActions]] to start with during development.
@@ -23,7 +23,7 @@ type AuthUIActionsWithSecurity = (securityHelper: SecurityContextActions) => Aut
  * appropriate actions (often api calls, local network storage, credential updates, etc) and update
  * the global security state based on the actionable needs of the user.
  */
-export const ProjectAuthUIActions: AuthUIActionsWithSecurity = (securityHelper) => (): AuthUIActions => ({
+export const ProjectAuthUIActions: AuthUIActionsWithApp = (appHelper) => ({
     /**
      * Initialize the application security state. This will involve reading any local storage,
      * validating existing credentials (token expiration, for example). At the end of validation,
@@ -48,16 +48,15 @@ export const ProjectAuthUIActions: AuthUIActionsWithSecurity = (securityHelper)
         // After restoring token, we may need to validate it in production apps
         // This will switch to the App screen or Auth screen and this loading
         // screen will be unmounted and thrown away.
-        // securityHelper.onUserAuthenticated()
         if (authData?.email !== undefined) {
-            securityHelper.onUserAuthenticated({
+            appHelper.onUserAuthenticated({
                 email: authData?.email,
                 userId: authData.userId ?? '',
                 rememberMe: authData?.rememberMeData.rememberMe,
             });
         } else {
             const rememberMeEmail = authData?.rememberMeData.rememberMe ? authData?.rememberMeData.user : undefined;
-            securityHelper.onUserNotAuthenticated(false, rememberMeEmail);
+            appHelper.onUserNotAuthenticated(false, rememberMeEmail);
         }
     },
     /**
@@ -87,15 +86,17 @@ export const ProjectAuthUIActions: AuthUIActionsWithSecurity = (securityHelper)
     logIn: async (email: string, password: string, rememberMe: boolean): Promise<void> => {
         await sleep(1000);
 
+        // throw new Error('My Custom Error');
+
         if (isRandomFailure()) {
             // reject(new Error('LOGIN.GENERIC_ERROR'));
-            throw new Error('LOGIN.INVALID_CREDENTIALS');
+            throw new Error('bluiAuth:LOGIN.INVALID_CREDENTIALS');
         }
 
         LocalStorage.saveAuthCredentials(email, email);
         LocalStorage.saveRememberMeData(email, rememberMe);
 
-        securityHelper.onUserAuthenticated({ email: email, userId: email, rememberMe: rememberMe });
+        appHelper.onUserAuthenticated({ email: email, userId: email, rememberMe: rememberMe });
     },
     /**
      * The user has forgotten their password and wants help.
@@ -130,7 +131,6 @@ export const ProjectAuthUIActions: AuthUIActionsWithSecurity = (securityHelper)
         if (isRandomFailure()) {
             throw new Error('Sorry, there was a problem sending your request.');
         }
-
         return;
     },
     /**
@@ -172,7 +172,6 @@ export const ProjectAuthUIActions: AuthUIActionsWithSecurity = (securityHelper)
         if (isRandomFailure()) {
             throw new Error('Sorry, there was a problem sending your request.');
         }
-
         return;
     },
 });

package/template/src/actions/RegistrationUIActions.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { RegistrationUIActions, AccountDetailInformation } from '@brightlayer-ui/react-native-auth-workflow';
+import { RegistrationUIActions, AccountDetails } from '@brightlayer-ui/react-native-auth-workflow';
 
 // Constants
 import { SAMPLE_EULA } from '../constants/sampleEula';
@@ -30,14 +30,14 @@ export const ProjectRegistrationUIActions: () => RegistrationUIActions = () => (
      *
      * @returns Resolve with EULA, otherwise reject with an error message.
      */
-    loadEULA: async (language: string): Promise<string> => {
+    loadEula: async (language: string): Promise<string> => {
         await sleep(1000);
 
         if (isRandomFailure()) {
             throw new Error('Sorry, there was a problem sending your request.');
         }
 
-        if (language !== 'en' && language !== 'en_US') {
+        if (!language.includes('en')) {
             return 'Other language EULA';
         }
 
@@ -45,20 +45,43 @@ export const ProjectRegistrationUIActions: () => RegistrationUIActions = () => (
     },
 
     /**
-     * The user entered their email address and accepted the EULA.
-     * The API should now send them an email with the validation code.
+     * The user accepted the EULA.
+     * The API should now update accepted EULA.
      *
-     * @param email  Email for the registering user.
      *
      * @returns Resolve when the server accepted the request.
      */
-    requestRegistrationCode: async (email: string): Promise<void> => {
+    acceptEula: async (): Promise<void> => {
         await sleep(800);
         if (isRandomFailure()) {
             throw new Error('Sorry, there was a problem sending your request.');
         }
     },
 
+    requestRegistrationCode: async (email: string): Promise<string> => {
+        await sleep(800);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+        return 'a1b2c3';
+    },
+
+    createPassword: async (password: string): Promise<boolean> => {
+        await sleep(800);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+        return true;
+    },
+
+    setAccountDetails: async (details: AccountDetails): Promise<boolean> => {
+        await sleep(800);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+        return true;
+    },
+
     /**
      * The user has tapped on an email link inviting them to register with the application.
      * The application should validate the code provided by the link.
@@ -69,35 +92,19 @@ export const ProjectRegistrationUIActions: () => RegistrationUIActions = () => (
      * @returns Resolves when the code is valid. True if registration is complete, False if account information is needed.
      *          If the code is not valid a rejection will occur with an error message.
      */
-    validateUserRegistrationRequest: async (validationCode: string, validationEmail?: string): Promise<boolean> => {
+    validateUserRegistrationRequest: async (
+        validationCode: string,
+        validationEmail?: string
+    ): Promise<{ codeValid: boolean | string; accountExists?: boolean }> => {
         await sleep(800);
 
         if (isRandomFailure()) {
             throw new Error('Sorry, there was a problem sending your request.');
         }
-        return isRandomFailure();
+        return { codeValid: true, accountExists: false };
     },
-    /**
-     * The user has been invited to register and has entered the necessary account and
-     * password information.
-     * The application should now complete the registration process given the user's data.
-     *
-     * Note: Upon resolution, the user will be brought back to the Login screen.
-     *
-     * @param userData  Account details and password entered by the user.
-     * @param validationCode  Registration code provided from the invitation email link.
-     * @param validationEmail  Email provided from the invitation email link (optional) `?email=addr%40domain.com`.
-     *
-     * @returns Resolve when account creation succeeds, otherwise reject with an error message.
-     */
-    completeRegistration: async (
-        userData: {
-            password: string;
-            accountDetails: AccountDetailInformation;
-        },
-        validationCode: string,
-        validationEmail?: string
-    ): Promise<{ email: string; organizationName: string }> => {
+
+    completeRegistration: async (userData: object): Promise<{ email: string; organizationName: string }> => {
         const email = 'example@email.com';
         const organizationName = 'Acme Co.';
         const userInfo = { email, organizationName };

package/template/src/components/AuthCustomScreen.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    useAuthContext,
+} from '@brightlayer-ui/react-native-auth-workflow';
+import { Text } from 'react-native-paper';
+import { View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+
+export const AuthCustomScreen: React.FC = () => {
+    const { actions } = useAuthContext();
+
+    const handleOnNext = useCallback(async () => {
+        try {
+            await actions.forgotPassword('email@email.email');
+        } catch (_error) {
+            // eslint-disable-next-line no-console
+            console.log('Error ::', _error);
+        }
+    }, [actions]);
+
+    const { t } = useTranslation();
+
+    return (
+        <WorkflowCard>
+            <WorkflowCardHeader title="Auth Screen" />
+            <WorkflowCardBody>
+                <View
+                    style={{
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        paddingTop: 50,
+                        paddingBottom: 50,
+                    }}
+                >
+                    <Text variant="headlineSmall">Auth Translations</Text>
+                    <Text variant="bodyMedium">{`Auth Translations: ${t('bluiAuth:FORGOT_PASSWORD.ERROR')}`}</Text>
+                    <Text variant="bodyMedium">{`Common Translations: ${t(
+                        'bluiCommon:ACTIONS.CHANGE_LANGUAGE'
+                    )}`}</Text>
+                    <Text variant="bodyMedium">{`App Translations: ${t('app:PAGE_DETAILS.AUTHORISED_MESSAGE')}`}</Text>
+                </View>
+            </WorkflowCardBody>
+            <WorkflowCardActions showNext nextLabel={'Press'} onNext={(): void => void handleOnNext()} />
+        </WorkflowCard>
+    );
+};

package/template/src/components/CustomScreen.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useState } from 'react';
+// import { useRegistrationWorkflowContext } from '../../contexts';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    useRegistrationWorkflowContext,
+    useRegistrationContext,
+} from '@brightlayer-ui/react-native-auth-workflow';
+import { TextInput } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+type CustomScreenProps = {
+    /**
+     * Used to pre-populate the data when the screen loads
+     *
+     */
+    organisationName?: any;
+};
+
+export const CustomScreen: React.FC<CustomScreenProps> = (props) => {
+    const regWorkflow = useRegistrationWorkflowContext();
+    const { navigate } = useRegistrationContext();
+    const { nextScreen, screenData, currentScreen, totalScreens, resetScreenData, previousScreen } = regWorkflow;
+    const { organisationName } = props;
+    const { t } = useTranslation();
+
+    const [organisationNameInput, setOrganisationNameInput] = useState(
+        organisationName ? organisationName : screenData.Other?.organisationName
+    );
+
+    const onNext = useCallback(() => {
+        void nextScreen({
+            screenId: 'Custom',
+            values: { organisationName: organisationNameInput },
+            // isAccountExist: true,
+        });
+    }, [organisationNameInput, nextScreen]);
+
+    const onIconPress = useCallback(() => {
+        navigate(-1);
+        resetScreenData();
+    }, [navigate, resetScreenData]);
+
+    const onPrevious = useCallback(() => {
+        void previousScreen({
+            screenId: 'Custom',
+            values: { organisationName: organisationNameInput },
+            // isAccountExist: true,
+        });
+    }, [organisationNameInput, previousScreen]);
+
+    return (
+        <WorkflowCard>
+            <WorkflowCardHeader title="Custom Screen" onIconPress={onIconPress} icon={{ name: 'arrow-back' }} />
+            <WorkflowCardBody>
+                <TextInput
+                    label={t('app:ORGANAIZATION_DETAILS.NAME')}
+                    mode="flat"
+                    value={organisationNameInput}
+                    onChangeText={(value) => setOrganisationNameInput(value)}
+                />
+            </WorkflowCardBody>
+            <WorkflowCardActions
+                showPrevious
+                showNext
+                previousLabel={t('bluiCommon:ACTIONS.BACK')}
+                nextLabel={t('bluiCommon:ACTIONS.OKAY')}
+                currentStep={currentScreen}
+                totalSteps={totalScreens}
+                onNext={onNext}
+                onPrevious={onPrevious}
+            />
+        </WorkflowCard>
+    );
+};