@brightlayer-ui/react-native-template-routing-typescript 2.2.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,61 @@
+{
+    "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-components": "^8.0.2",
+        "@brightlayer-ui/react-native-themes": "^7.0.0",
+        "@brightlayer-ui/react-native-vector-icons": "^2.2.0",
+        "@react-navigation/drawer": "^6.6.15",
+        "@react-navigation/native": "^6.1.17",
+        "@react-navigation/stack": "^6.3.29",
+        "react": "18.2.0",
+        "react-native": "0.74.1",
+        "react-native-gesture-handler": "^2.16.2",
+        "react-native-paper": "^5.0.0",
+        "react-native-reanimated": "^3.11.0",
+        "react-native-safe-area-context": "^4.0.0",
+        "react-native-screens": "^3.31.1",
+        "react-native-vector-icons": "^9.2.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/navigation/index.tsx

@@ -2,41 +2,41 @@ import React, { ReactNode } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { View } from 'react-native';
+// Your Three Pages (replace with your actual page components)
+import Home from '../screens/home'; // Replace with your Home screen component path
+import PageOne from '../screens/pageOne'; // Replace with your PageOne screen component path
+import PageTwo from '../screens/pageTwo'; // Replace with your PageTwo screen component path
 import { NavigationDrawer } from './navigation-drawer';
-import { createStackNavigator } from '@react-navigation/stack';
-import Home from '../screens/home';
-import PageOne from '../screens/pageOne';
-import PageTwo from '../screens/pageTwo';
 
 const Drawer = createDrawerNavigator();
 
+// Type definitions for navigation parameters (optional)
 export type RootStackParamList = {
     Home: undefined;
     PageOne: undefined;
     PageTwo: undefined;
-    NavigationDrawer: undefined;
 };
-
-const RootStack = createStackNavigator<RootStackParamList>();
-
 const CustomDrawerContent = (props: any): any => (
     <View style={{ height: '100%' }}>
         <NavigationDrawer {...props} />
     </View>
 );
-
-export const MainRouter = (): any => (
+const MainRouter = (): ReactNode => (
     <NavigationContainer>
         <Drawer.Navigator
             initialRouteName="Home"
             screenOptions={{
                 headerShown: false,
+                drawerType: 'front',
+                drawerStyle: { backgroundColor: 'transparent' },
             }}
-            drawerContent={(props: any): ReactNode => <CustomDrawerContent {...props} />}
+            drawerContent={(props) => <CustomDrawerContent {...props} />}
         >
-            <RootStack.Screen name="Home" component={Home} />
-            <RootStack.Screen name="PageOne" component={PageOne} />
-            <RootStack.Screen name="PageTwo" component={PageTwo} />
+            <Drawer.Screen name="Home" component={Home} />
+            <Drawer.Screen name="PageOne" component={PageOne} />
+            <Drawer.Screen name="PageTwo" component={PageTwo} />
         </Drawer.Navigator>
     </NavigationContainer>
 );
+
+export default MainRouter;

package/template/src/navigation/navigation-drawer.tsx

@@ -1,6 +1,5 @@
 import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@brightlayer-ui/react-native-components';
 import React, { useState, useCallback } from 'react';
-import * as Colors from '@brightlayer-ui/colors';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from './index';
 import { DrawerActions } from '@react-navigation/native';
@@ -42,7 +41,7 @@ export const NavigationDrawer: React.FC<NavDrawerProps> = ({ navigation }) => {
             <DrawerHeader
                 title={'Brightlayer UI'}
                 subtitle={'React Native Project'}
-                fontColor={Colors.white[50]}
+                // fontColor={}
                 icon={{ name: 'menu' }}
                 onIconPress={(): void => {
                     navigation.dispatch(DrawerActions.closeDrawer());

package/template/src/screens/home.tsx

@@ -1,3 +1,10 @@
+/**
+ Copyright (c) 2021-present, Eaton
+
+ All rights reserved.
+
+ This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
+ **/
 import React, { useCallback } from 'react';
 import {
     SafeAreaView,
@@ -9,18 +16,17 @@ import {
     View,
     Animated,
     Easing,
+    Image,
 } from 'react-native';
-import { Button, Divider, useTheme } from 'react-native-paper';
-import { Body1, H4, Header, IconFamily } from '@brightlayer-ui/react-native-components';
-import { Theme } from 'react-native-paper/lib/typescript/types';
-import Logo from '../../assets/images/Logo.svg';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Button, Divider, Text, Provider as ThemeProvider } from 'react-native-paper';
+import { ExtendedTheme, useExtendedTheme, blue } from '@brightlayer-ui/react-native-themes';
+import { Header } from '@brightlayer-ui/react-native-components';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../navigation';
 
-const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
-
 const styles = (
-    theme: Theme
+    theme: ExtendedTheme
 ): StyleSheet.NamedStyles<{
     content: ViewStyle;
     pxbLogoWrapper: ViewStyle;
@@ -58,14 +64,14 @@ const styles = (
             marginVertical: 24,
         },
         openURLButtonText: {
-            color: theme.colors.text,
+            color: theme.colors.primary,
             padding: 8,
         },
     });
 
 const OpenURLButton = (props: any): JSX.Element => {
     const { url, title } = props;
-    const theme = useTheme();
+    const theme = useExtendedTheme();
     const defaultStyles = styles(theme);
 
     const handlePress = useCallback(async () => {
@@ -88,7 +94,7 @@ type AppProps = {
 };
 
 const Home: React.FC<AppProps> = ({ navigation }): JSX.Element => {
-    const theme = useTheme();
+    const theme = useExtendedTheme();
     const defaultStyles = styles(theme);
     const spinValue = new Animated.Value(0);
 
@@ -107,54 +113,67 @@ const Home: React.FC<AppProps> = ({ navigation }): JSX.Element => {
     });
 
     return (
-        <>
-            <Header
-                title={'Home Page'}
-                icon={MenuIcon}
-                onIconPress={(): void => {
-                    navigation.openDrawer();
-                }}
-            />
-            <SafeAreaView style={defaultStyles.content}>
-                <ScrollView>
-                    <View style={defaultStyles.pxbLogoWrapper}>
-                        <Animated.View style={[defaultStyles.pxbLogo, { transform: [{ rotate: spin }] }]}>
-                            <Logo height={100} width={100} fill={'#007bc1'} />
-                        </Animated.View>
-                    </View>
-                    <H4 style={defaultStyles.title}>
-                        Welcome to Brightlayer <H4 color={'primary'}>UI</H4>.
-                    </H4>
-                    <Body1 style={defaultStyles.subtitle}>
-                        Edit <Body1 style={defaultStyles.bold}>screens/home.tsx</Body1> and save to reload.
-                    </Body1>
-                    <Divider style={defaultStyles.divider} />
-                    <OpenURLButton title={'Brightlayer UI Documentation'} url={'https://brightlayer-ui.github.io/'} />
-                    <OpenURLButton
-                        title={'React Native Getting Started Guide'}
-                        url={'https://brightlayer-ui.github.io/development/frameworks-mobile/react-native'}
-                    />
-                    <OpenURLButton
-                        title={'Design Pattern Descriptions'}
-                        url={'https://brightlayer-ui.github.io/patterns'}
-                    />
-                    <OpenURLButton
-                        title={'React Native Component Library'}
-                        url={'https://brightlayer-ui-components.github.io/react-native/'}
-                    />
-                    <OpenURLButton title={'Visit Us on GitHub'} url={'https://github.com/etn-ccis?q=blui'} />
-                    <OpenURLButton
-                        title={'Design Pattern Source on GitHub'}
-                        url={'https://github.com/etn-ccis/blui-react-native-design-patterns'}
-                    />
-                    <OpenURLButton title={'Release Roadmap'} url={'https://brightlayer-ui.github.io/roadmap'} />
-                    <OpenURLButton
-                        title={'Send Feedback or Suggestions'}
-                        url={'https://brightlayer-ui.github.io/community/contactus'}
-                    />
-                </ScrollView>
-            </SafeAreaView>
-        </>
+        <ThemeProvider theme={blue}>
+            <SafeAreaProvider>
+                <Header
+                    title={'Home Page'}
+                    icon={{ name: 'menu' }}
+                    onIconPress={(): void => {
+                        navigation.openDrawer();
+                    }}
+                />
+                <SafeAreaView style={defaultStyles.content}>
+                    <ScrollView>
+                        <View style={defaultStyles.pxbLogoWrapper}>
+                            <Animated.View style={[defaultStyles.pxbLogo, { transform: [{ rotate: spin }] }]}>
+                                <Image source={require('../../assets/images/Logo.png')} />
+                            </Animated.View>
+                        </View>
+                        <Text variant={'headlineLarge'} style={defaultStyles.title}>
+                            Welcome to Brightlayer{' '}
+                            <Text variant={'headlineLarge'} style={{ fontSize: 34, color: theme.colors.primary }}>
+                                UI
+                            </Text>
+                            .
+                        </Text>
+                        <Text variant={'bodyLarge'} style={defaultStyles.subtitle}>
+                            Edit{' '}
+                            <Text variant={'bodyLarge'} style={defaultStyles.bold}>
+                                ./src/screen/home.tsx
+                            </Text>{' '}
+                            and save to reload.
+                        </Text>
+                        <Divider style={defaultStyles.divider} />
+                        <OpenURLButton
+                            title={'Brightlayer UI Documentation'}
+                            url={'https://brightlayer-ui.github.io/'}
+                        />
+                        <OpenURLButton
+                            title={'React Native Getting Started Guide'}
+                            url={'https://brightlayer-ui.github.io/development/frameworks-mobile/react-native'}
+                        />
+                        <OpenURLButton
+                            title={'Design Pattern Descriptions'}
+                            url={'https://brightlayer-ui.github.io/patterns'}
+                        />
+                        <OpenURLButton
+                            title={'React Native Component Library'}
+                            url={'https://brightlayer-ui-components.github.io/react-native/'}
+                        />
+                        <OpenURLButton title={'Visit Us on GitHub'} url={'https://github.com/etn-ccis?q=blui'} />
+                        <OpenURLButton
+                            title={'Design Pattern Source on GitHub'}
+                            url={'https://github.com/etn-ccis/blui-react-native-design-patterns'}
+                        />
+                        <OpenURLButton title={'Release Roadmap'} url={'https://brightlayer-ui.github.io/roadmap'} />
+                        <OpenURLButton
+                            title={'Send Feedback or Suggestions'}
+                            url={'https://brightlayer-ui.github.io/community/contactus'}
+                        />
+                    </ScrollView>
+                </SafeAreaView>
+            </SafeAreaProvider>
+        </ThemeProvider>
     );
 };
 

package/template/src/screens/pageOne.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
-import { EmptyState, Header, IconFamily } from '@brightlayer-ui/react-native-components';
+import { EmptyState, Header } from '@brightlayer-ui/react-native-components';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../navigation';
-const Event: IconFamily = { name: 'event', direction: 'rtl' };
-const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
 
 const styles = (): StyleSheet.NamedStyles<{
     content: ViewStyle;
@@ -32,7 +30,7 @@ const PageOne: React.FC<AppProps> = ({ navigation }): JSX.Element => {
         <>
             <Header
                 title={'Page One'}
-                icon={MenuIcon}
+                icon={{ name: 'menu' }}
                 onIconPress={(): void => {
                     navigation.openDrawer();
                 }}
@@ -40,7 +38,7 @@ const PageOne: React.FC<AppProps> = ({ navigation }): JSX.Element => {
             <SafeAreaView style={defaultStyles.content}>
                 <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
                     <EmptyState
-                        icon={Event}
+                        icon={{ family: 'material', name: 'event', direction: 'ltr' }}
                         title={'Coming Soon'}
                         description={'Replace this page with your own content'}
                     />

package/template/src/screens/pageTwo.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
-import { EmptyState, Header, IconFamily } from '@brightlayer-ui/react-native-components';
+import { EmptyState, Header } from '@brightlayer-ui/react-native-components';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../navigation';
-const Event: IconFamily = { name: 'event', direction: 'rtl' };
-const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
 
 const styles = (): StyleSheet.NamedStyles<{
     content: ViewStyle;
@@ -32,7 +30,7 @@ const PageTwo: React.FC<AppProps> = ({ navigation }): JSX.Element => {
         <>
             <Header
                 title={'Page Two'}
-                icon={MenuIcon}
+                icon={{ name: 'menu' }}
                 onIconPress={(): void => {
                     navigation.openDrawer();
                 }}
@@ -40,7 +38,7 @@ const PageTwo: React.FC<AppProps> = ({ navigation }): JSX.Element => {
             <SafeAreaView style={defaultStyles.content}>
                 <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
                     <EmptyState
-                        icon={Event}
+                        icon={{ name: 'event' }}
                         title={'Coming Soon'}
                         description={'Replace this page with your own content'}
                     />