Feature: PageContainer component added.

Feature: ...props added for Button and TextInput components.

src/components/button/index.tsx

@@ -40,7 +40,8 @@ const Button: FC<IButtonProps> = ({
     isLoading,
     onPress,
     title,
-    style
+    style,
+    ...props
 }) => {
     const {
         typography,
@@ -168,6 +169,7 @@ const Button: FC<IButtonProps> = ({
 
     return (
         <TouchableOpacity
+            {...props}
             onPress={isDisabled || isLoading ? () => null : onPress}
             disabled={isDisabled || isLoading}
             style={[

src/components/button/type.ts

@@ -1,4 +1,5 @@
 import {
+    type ButtonProps,
     type ViewStyle,
     type StyleProp,
     type TextStyle
@@ -76,7 +77,7 @@ export type ButtonVariant = "filled" | "outline" | "ghost";
 
 export type ButtonSize = "small" | "medium" | "large";
 
-interface IButtonProps {
+interface IButtonProps extends Omit<ButtonProps, "title"> {
     displayBehaviourWhileLoading?: ButtonDisplayBehaviourWhileLoading;
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;

src/components/index.ts

@@ -5,6 +5,11 @@ export {
 export {
     default as Button
 } from "./button";
+
+export {
+    default as PageContainer
+} from "./pageContainer";
+
 /*
 export {
     default as Dialog

src/components/pageContainer/index.tsx

@@ -0,0 +1,82 @@
+import {
+    type FC
+} from "react";
+import {
+    ScrollView,
+    View
+} from "react-native";
+import type IPageContainerProps from "./type";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+
+const PageContainer: FC<IPageContainerProps> = ({
+    backgroundColor = "default" as keyof NCoreUIKit.ContainerContentColors,
+    isScrollable = false,
+    scrollViewStyle,
+    scrollViewProps,
+    children,
+    style,
+    ...props
+}) => {
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const renderScrollview = () => {
+        if(style) {
+            console.log("Hey!. You make wrong things. If you must be use isScrollable={true}, you must be use scrollViewStyle. Do not use style prop for this case.");
+        }
+
+        if(props) {
+            console.log("Hey!. You make wrong things. If you must be use isScrollable={true}, you must be use scrollViewProps. Do not use default view props for this case.");
+        }
+
+        return <ScrollView
+            {...scrollViewProps}
+            contentContainerStyle={[
+                {
+                    padding: spaces.spacingMd
+                },
+                scrollViewProps?.contentContainerStyle
+            ]}
+            style={[
+                {
+                    backgroundColor: backgroundColor
+                },
+                stylesheet.container,
+                scrollViewStyle
+            ]}
+        >
+            {children}
+        </ScrollView>;
+    };
+
+    const renderView = () => {
+        if(scrollViewStyle) {
+            console.log("Hey!. You make wrong things. If you must be use isScrollable={false}, you must be use style. Do not use scrollViewStyle prop for this case.");
+        }
+
+        if(scrollViewProps) {
+            console.log("Hey!. You make wrong things. If you must be use isScrollable={false}, you musn't use scrollViewProps.");
+        }
+
+        return <View
+            {...props}
+            style={[
+                {
+                    backgroundColor: backgroundColor,
+                    padding: spaces.spacingMd
+                },
+                stylesheet.container,
+                style
+            ]}
+        >
+            {children}
+        </View>;
+    };
+
+    return isScrollable ? renderScrollview() : renderView();
+};
+export default PageContainer;

src/components/pageContainer/stylesheet.ts

@@ -0,0 +1,10 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});
+export default stylesheet;

src/components/pageContainer/type.ts

@@ -0,0 +1,20 @@
+import {
+    type ReactNode
+} from "react";
+import type {
+    ScrollViewProps,
+    StyleProp,
+    ViewStyle
+} from "react-native";
+
+interface IPageContainerProps {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    scrollViewStyle?: StyleProp<ScrollViewProps["style"]>;
+    scrollViewProps?: ScrollViewProps;
+    style?: StyleProp<ViewStyle>;
+    isScrollable?: boolean;
+    children?: ReactNode;
+}
+export type {
+    IPageContainerProps as default
+};

src/components/text/type.ts

@@ -2,11 +2,12 @@ import {
     type ReactNode
 } from "react";
 import {
+    type TextProps,
     type TextStyle,
     type StyleProp
 } from "react-native";
 
-interface ITextProps {
+interface ITextProps extends TextProps {
     style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     color?: keyof NCoreUIKit.TextContentColors;
     variant?: keyof NCoreUIKit.Typography;

src/components/textInput/type.ts

@@ -1,4 +1,5 @@
 import {
+    type TextInputProps,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -50,7 +51,7 @@ export type TextInputSpreadBehaviour = "baseline" | "stretch" | "free";
 
 export type TextInputVariant = "text" | "hidden";
 
-interface ITextInputProps {
+interface ITextInputProps extends TextInputProps {
     spreadBehaviour?: TextInputSpreadBehaviour;
     onChangeText?: (value: string) => void;
     validation?: (text: string) => boolean;

src/index.tsx

@@ -9,6 +9,7 @@ export {
 } from "./core/hooks";
 
 export {
+    PageContainer,
     TextInput,
     Loading,
     // Dialog,