Feature: Safe area context added.

package.json

@@ -103,6 +103,7 @@
         "react": "*",
         "react-native": "*",
         "react-native-portalize": ">= 1.0.7",
+        "react-native-safe-area-context": ">= 5.7.0",
         "react-native-svg": ">= 15.15.3"
     },
     "workspaces": [
@@ -158,6 +159,7 @@
         "lucide-react-native": "0.577.0",
         "ncore-context": "1.0.5",
         "react-native-portalize": "1.0.7",
+        "react-native-safe-area-context": "5.7.0",
         "react-native-svg": "15.15.3"
     }
 }

src/components/pageContainer/index.tsx

@@ -10,10 +10,16 @@ import stylesheet from "./stylesheet";
 import {
     NCoreUIKitTheme
 } from "../../core/hooks";
+import {
+    SafeAreaView
+} from "react-native-safe-area-context";
 
 const PageContainer: FC<IPageContainerProps> = ({
     backgroundColor = "default" as keyof NCoreUIKit.ContainerContentColors,
+    isWrapSafeareaContext = true,
+    safeAreaViewBackgroundColor,
     isScrollable = false,
+    safeAreaViewStyle,
     scrollViewStyle,
     scrollViewProps,
     children,
@@ -78,6 +84,28 @@ const PageContainer: FC<IPageContainerProps> = ({
         </View>;
     };
 
-    return isScrollable ? renderScrollview() : renderView();
+    const renderWithSafeareaView = () => {
+        return <SafeAreaView
+            style={[
+                safeAreaViewStyle,
+                {
+                    backgroundColor: safeAreaViewBackgroundColor ? colors.content.container[safeAreaViewBackgroundColor] : colors.content.container[backgroundColor]
+                },
+                stylesheet.safeAreaViewContainer
+            ]}
+        >
+            {isScrollable ? renderScrollview() : renderView()}
+        </SafeAreaView>;
+    };
+
+    const renderWithoutSafeareaView = () => {
+        return isScrollable ? renderScrollview() : renderView();
+    };
+
+    const renderSafeareaContext = () => {
+        return isWrapSafeareaContext ? renderWithSafeareaView() : renderWithoutSafeareaView();
+    };
+
+    return renderSafeareaContext();
 };
 export default PageContainer;

src/components/pageContainer/stylesheet.ts

@@ -5,6 +5,9 @@ import {
 const stylesheet = StyleSheet.create({
     container: {
         flex: 1
+    },
+    safeAreaViewContainer: {
+        flex: 1
     }
 });
 export default stylesheet;

src/components/pageContainer/type.ts

@@ -8,9 +8,12 @@ import type {
 } from "react-native";
 
 interface IPageContainerProps {
+    safeAreaViewBackgroundColor?: keyof NCoreUIKit.ContainerContentColors;
     backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
-    scrollViewStyle?: StyleProp<ScrollViewProps["style"]>;
+    scrollViewStyle?: StyleProp<ScrollViewProps>;
+    safeAreaViewStyle?: StyleProp<ViewStyle>;
     scrollViewProps?: ScrollViewProps;
+    isWrapSafeareaContext?: boolean;
     style?: StyleProp<ViewStyle>;
     isScrollable?: boolean;
     children?: ReactNode;

src/core/index.tsx

@@ -7,6 +7,9 @@ import {
 import type {
     NCoreUIKitConfig
 } from "../types";
+import {
+    SafeAreaProvider
+} from "react-native-safe-area-context";
 import CoreContext from "../context";
 
 export class NCoreUIKitBase<T extends NCoreUIKitConfig> {
@@ -24,7 +27,9 @@ export class NCoreUIKitBase<T extends NCoreUIKitConfig> {
         const NCoreUIKitContext = this.NCoreUIKitContext;
 
         return <NCoreUIKitContext.Provider>
-            {children}
+            <SafeAreaProvider>
+                {children}
+            </SafeAreaProvider>
         </NCoreUIKitContext.Provider>;
     };
 };

yarn.lock

@@ -4139,7 +4139,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/copyfiles@npm:^2":
+"@types/copyfiles@npm:2":
   version: 2.4.4
   resolution: "@types/copyfiles@npm:2.4.4"
   checksum: 10c0/c57d13c4a4fa85ba052cce3921cc73624a64df40077e2fa9ba704ddf43a2c342e151c0e090531e3366dc5545cc2e48649933aaf501070923f11374fac42f9e2a
@@ -4302,7 +4302,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-native@npm:0.73.0, @types/react-native@npm:^0.73.0":
+"@types/react-native@npm:0.73.0":
   version: 0.73.0
   resolution: "@types/react-native@npm:0.73.0"
   dependencies:
@@ -7027,7 +7027,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copyfiles@npm:^2.4.1":
+"copyfiles@npm:2.4.1":
   version: 2.4.1
   resolution: "copyfiles@npm:2.4.1"
   dependencies:
@@ -13069,12 +13069,12 @@ __metadata:
   dependencies:
     "@react-native/babel-preset": "npm:0.83.0"
     "@release-it/conventional-changelog": "npm:10.0.1"
-    "@types/copyfiles": "npm:^2"
+    "@types/copyfiles": "npm:2"
     "@types/eslint-plugin-jsx-a11y": "npm:6"
     "@types/react": "npm:19.2.14"
-    "@types/react-native": "npm:^0.73.0"
+    "@types/react-native": "npm:0.73.0"
     babel-plugin-module-resolver: "npm:5.0.2"
-    copyfiles: "npm:^2.4.1"
+    copyfiles: "npm:2.4.1"
     del-cli: "npm:6.0.0"
     eslint: "npm:9.37.0"
     eslint-import-resolver-typescript: "npm:4.4.4"
@@ -13093,6 +13093,7 @@ __metadata:
     react-native: "npm:0.83.2"
     react-native-builder-bob: "npm:0.40.13"
     react-native-portalize: "npm:1.0.7"
+    react-native-safe-area-context: "npm:^5.7.0"
     react-native-svg: "npm:15.15.3"
     release-it: "npm:19.0.4"
     turbo: "npm:2.5.6"
@@ -14635,6 +14636,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-safe-area-context@npm:^5.7.0":
+  version: 5.7.0
+  resolution: "react-native-safe-area-context@npm:5.7.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/c3799e17321b41df1e0a10492c98472f8f8225ef0bbaf8146c4a9acb9519aae9ac11429059143c215e4402c2808e8445274850a339f8477522ded2461e18da80
+  languageName: node
+  linkType: hard
+
 "react-native-svg@npm:15.15.3, react-native-svg@npm:^15.15.3":
   version: 15.15.3
   resolution: "react-native-svg@npm:15.15.3"