Feature: General type definitions.

babel.config.js

@@ -1,11 +1,15 @@
 module.exports = {
     overrides: [
         {
-            presets: ["module:react-native-builder-bob/babel-preset"],
+            presets: [
+                "module:react-native-builder-bob/babel-preset"
+            ],
             exclude: /\/node_modules\//
         },
         {
-            presets: ["module:@react-native/babel-preset"],
+            presets: [
+                "module:@react-native/babel-preset"
+            ],
             include: /\/node_modules\//
         }
     ],

eslint-local-rules/index.js

@@ -64,39 +64,96 @@ module.exports = {
             const sourceCode = context.getSourceCode();
 
             function checkProperties(node, properties) {
-                if (properties.length <= 1) return;
+                if (properties.length === 0) return;
 
-                for (let i = 0; i < properties.length - 1; i++) {
-                    const current = properties[i];
-                    const next = properties[i + 1];
+                const openBrace = sourceCode.getFirstToken(node);
 
-                    if (current.loc.end.line === next.loc.start.line) {
-                        context.report({
-                            node: next,
-                            message: "Each property should be on a new line",
-                            fix(fixer) {
-                                const openBrace = sourceCode.getFirstToken(node);
-                                const openBraceLine = sourceCode.lines[openBrace.loc.start.line - 1];
-                                const baseIndent = openBraceLine.match(/^\s*/)[0];
-                                const indent = baseIndent + "    ";
+                let closingBraceToken = sourceCode.getTokenAfter(properties[properties.length - 1]);
+                while (closingBraceToken && closingBraceToken.value !== "}") {
+                    closingBraceToken = sourceCode.getTokenAfter(closingBraceToken);
+                }
+                const closingBrace = closingBraceToken;
 
-                                const comma = sourceCode.getTokenBefore(next);
+                if (openBrace.loc.start.line === closingBrace.loc.end.line) return;
 
-                                return fixer.replaceTextRange(
-                                    [
-                                        comma.range[1],
-                                        next.range[0]
-                                    ],
-                                    "\n" + indent
-                                );
-                            }
-                        });
+                const firstProperty = properties[0];
+
+                if (openBrace.loc.end.line !== firstProperty.loc.start.line - 1) {
+                    context.report({
+                        node: firstProperty,
+                        message: "First property should be exactly on the next line",
+                        fix(fixer) {
+                            const openBraceLine = sourceCode.lines[openBrace.loc.start.line - 1];
+                            const baseIndent = openBraceLine.match(/^\s*/)[0];
+                            const indent = baseIndent + "    ";
+
+                            return fixer.replaceTextRange(
+                                [
+                                    openBrace.range[1],
+                                    firstProperty.range[0]
+                                ],
+                                "\n" + indent
+                            );
+                        }
+                    });
+                }
+
+                if (properties.length > 1) {
+                    for (let i = 0; i < properties.length - 1; i++) {
+                        const current = properties[i];
+                        const next = properties[i + 1];
+
+                        if (current.loc.end.line !== next.loc.start.line - 1) {
+                            context.report({
+                                node: next,
+                                message: "Each property should be exactly on the next line (no empty lines)",
+                                fix(fixer) {
+                                    const openBraceLine = sourceCode.lines[openBrace.loc.start.line - 1];
+                                    const baseIndent = openBraceLine.match(/^\s*/)[0];
+                                    const indent = baseIndent + "    ";
+
+                                    const comma = sourceCode.getTokenBefore(next);
+
+                                    return fixer.replaceTextRange(
+                                        [
+                                            comma.range[1],
+                                            next.range[0]
+                                        ],
+                                        "\n" + indent
+                                    );
+                                }
+                            });
+                        }
                     }
                 }
 
                 const lastProperty = properties[properties.length - 1];
-                const tokenAfter = sourceCode.getTokenAfter(lastProperty);
 
+                if (lastProperty.loc.end.line !== closingBrace.loc.start.line - 1) {
+                    context.report({
+                        node: closingBrace,
+                        message: "Object closing brace should be exactly on the next line",
+                        fix(fixer) {
+                            const openBraceLine = sourceCode.lines[openBrace.loc.start.line - 1];
+                            const baseIndent = openBraceLine.match(/^\s*/)[0];
+
+                            // Be careful about trailing comma
+                            const tokenAfter = sourceCode.getTokenAfter(lastProperty);
+                            const hasTrailingComma = tokenAfter && tokenAfter.value === ",";
+                            const startRange = hasTrailingComma ? tokenAfter.range[1] : lastProperty.range[1];
+
+                            return fixer.replaceTextRange(
+                                [
+                                    startRange,
+                                    closingBrace.range[0]
+                                ],
+                                "\n" + baseIndent
+                            );
+                        }
+                    });
+                }
+
+                const tokenAfter = sourceCode.getTokenAfter(lastProperty);
                 if (tokenAfter && tokenAfter.value === ",") {
                     context.report({
                         node: lastProperty,
@@ -112,7 +169,6 @@ module.exports = {
                 ObjectExpression(node) {
                     checkProperties(node, node.properties);
                 },
-
                 ObjectPattern(node) {
                     checkProperties(node, node.properties);
                 }
@@ -130,16 +186,16 @@ module.exports = {
 
             return {
                 JSXOpeningElement(node) {
-                    if (node.attributes.length <= 1) return;
+                    if (node.attributes.length === 0) return;
 
                     const firstToken = sourceCode.getFirstToken(node);
                     const tagNameToken = sourceCode.getTokenAfter(firstToken);
                     const firstAttr = node.attributes[0];
 
-                    if (tagNameToken.loc.end.line === firstAttr.loc.start.line) {
+                    if (tagNameToken.loc.end.line !== firstAttr.loc.start.line - 1) {
                         context.report({
                             node: firstAttr,
-                            message: "First JSX attribute should be on a new line",
+                            message: "First JSX attribute should be exactly on the next line",
                             fix(fixer) {
                                 const openBraceLine = sourceCode.lines[firstToken.loc.start.line - 1];
                                 const baseIndent = openBraceLine.match(/^\s*/)[0];
@@ -160,10 +216,10 @@ module.exports = {
                         const current = node.attributes[i];
                         const next = node.attributes[i + 1];
 
-                        if (current.loc.end.line === next.loc.start.line) {
+                        if (current.loc.end.line !== next.loc.start.line - 1) {
                             context.report({
                                 node: next,
-                                message: "Each JSX attribute should be on a new line",
+                                message: "Each JSX attribute should be exactly on the next line (no empty lines)",
                                 fix(fixer) {
                                     const openBraceLine = sourceCode.lines[firstToken.loc.start.line - 1];
                                     const baseIndent = openBraceLine.match(/^\s*/)[0];
@@ -193,37 +249,53 @@ module.exports = {
 
                     const closingBracket = allTokens[allTokens.length - 1];
 
-                    if (lastAttr.loc.end.line === closingBracket.loc.start.line) {
-                        context.report({
-                            node: closingBracket,
-                            message: "JSX closing bracket should be on a new line",
-                            fix(fixer) {
-                                const openBraceLine = sourceCode.lines[firstToken.loc.start.line - 1];
-                                const baseIndent = openBraceLine.match(/^\s*/)[0];
+                    // Check if self-closing slash is present
+                    let hasSelfClosingSlash = false;
+                    let slashToken = null;
 
-                                if (node.selfClosing && allTokens.length >= 2) {
-                                    const slashToken = allTokens[allTokens.length - 2];
-
-                                    if (slashToken && slashToken.value === "/") {
-                                        return fixer.replaceTextRange(
-                                            [
-                                                lastAttr.range[1],
-                                                slashToken.range[0]
-                                            ],
-                                            "\n" + baseIndent
-                                        );
-                                    }
-                                }
+                    if (node.selfClosing && allTokens.length >= 2) {
+                        slashToken = allTokens[allTokens.length - 2];
+                        if (slashToken && slashToken.value === "/") {
+                            hasSelfClosingSlash = true;
+                        }
+                    }
 
-                                return fixer.replaceTextRange(
-                                    [
-                                        lastAttr.range[1],
-                                        closingBracket.range[0]
-                                    ],
-                                    "\n" + baseIndent
-                                );
-                            }
-                        });
+                    if (hasSelfClosingSlash) {
+                        if (lastAttr.loc.end.line !== slashToken.loc.start.line - 1) {
+                            context.report({
+                                node: slashToken,
+                                message: "JSX closing slash should be exactly on the next line",
+                                fix(fixer) {
+                                    const openBraceLine = sourceCode.lines[firstToken.loc.start.line - 1];
+                                    const baseIndent = openBraceLine.match(/^\s*/)[0];
+                                    return fixer.replaceTextRange(
+                                        [
+                                            lastAttr.range[1],
+                                            slashToken.range[0]
+                                        ],
+                                        "\n" + baseIndent
+                                    );
+                                }
+                            });
+                        }
+                    } else {
+                        if (lastAttr.loc.end.line !== closingBracket.loc.start.line - 1) {
+                            context.report({
+                                node: closingBracket,
+                                message: "JSX closing bracket should be exactly on the next line",
+                                fix(fixer) {
+                                    const openBraceLine = sourceCode.lines[firstToken.loc.start.line - 1];
+                                    const baseIndent = openBraceLine.match(/^\s*/)[0];
+                                    return fixer.replaceTextRange(
+                                        [
+                                            lastAttr.range[1],
+                                            closingBracket.range[0]
+                                        ],
+                                        "\n" + baseIndent
+                                    );
+                                }
+                            });
+                        }
                     }
                 }
             };
@@ -240,15 +312,19 @@ module.exports = {
 
             return {
                 ArrayExpression(node) {
-                    if (node.elements.length <= 1) return;
+                    if (node.elements.length === 0) return;
 
                     const openBracket = sourceCode.getFirstToken(node);
+                    const closingBracket = sourceCode.getLastToken(node);
+
+                    if (openBracket.loc.start.line === closingBracket.loc.end.line) return;
+
                     const firstElement = node.elements[0];
 
-                    if (openBracket.loc.end.line === firstElement.loc.start.line) {
+                    if (openBracket.loc.end.line !== firstElement.loc.start.line - 1) {
                         context.report({
                             node: firstElement,
-                            message: "First array element should be on a new line",
+                            message: "First array element should be exactly on the next line",
                             fix(fixer) {
                                 const openBracketLine = sourceCode.lines[openBracket.loc.start.line - 1];
                                 const baseIndent = openBracketLine.match(/^\s*/)[0];
@@ -271,10 +347,10 @@ module.exports = {
 
                         if (!current || !next) continue;
 
-                        if (current.loc.end.line === next.loc.start.line) {
+                        if (current.loc.end.line !== next.loc.start.line - 1) {
                             context.report({
                                 node: next,
-                                message: "Each array element should be on a new line",
+                                message: "Each array element should be exactly on the next line (no empty lines)",
                                 fix(fixer) {
                                     const openBracketLine = sourceCode.lines[openBracket.loc.start.line - 1];
                                     const baseIndent = openBracketLine.match(/^\s*/)[0];
@@ -295,19 +371,22 @@ module.exports = {
                     }
 
                     const lastElement = node.elements[node.elements.length - 1];
-                    const closingBracket = sourceCode.getLastToken(node);
 
-                    if (lastElement && lastElement.loc.end.line === closingBracket.loc.start.line) {
+                    if (lastElement && lastElement.loc.end.line !== closingBracket.loc.start.line - 1) {
                         context.report({
                             node: closingBracket,
-                            message: "Array closing bracket should be on a new line",
+                            message: "Array closing bracket should be exactly on the next line",
                             fix(fixer) {
                                 const openBracketLine = sourceCode.lines[openBracket.loc.start.line - 1];
                                 const baseIndent = openBracketLine.match(/^\s*/)[0];
 
+                                const tokenAfter = sourceCode.getTokenAfter(lastElement);
+                                const hasTrailingComma = tokenAfter && tokenAfter.value === ",";
+                                const startRange = hasTrailingComma ? tokenAfter.range[1] : lastElement.range[1];
+
                                 return fixer.replaceTextRange(
                                     [
-                                        lastElement.range[1],
+                                        startRange,
                                         closingBracket.range[0]
                                     ],
                                     "\n" + baseIndent
@@ -345,7 +424,6 @@ module.exports = {
                 ImportDeclaration(node) {
                     imports.push(node);
                 },
-
                 "Program:exit"() {
                     if (imports.length <= 1) return;
 
@@ -450,5 +528,326 @@ module.exports = {
                 ], newImports);
             }
         }
+    },
+    "multiline-jsx-children": {
+        meta: {
+            type: "layout",
+            fixable: "whitespace",
+            schema: []
+        },
+        create(context) {
+            return {
+                JSXElement(node) {
+                    if (!node.closingElement) return;
+                    if (node.children.length === 0) return;
+
+                    const meaningfulChildren = node.children.filter(child => {
+                        if (child.type === "JSXText" && child.value.trim() === "") return false;
+                        return true;
+                    });
+
+                    if (meaningfulChildren.length === 0) return;
+
+                    const openingElement = node.openingElement;
+                    const closingElement = node.closingElement;
+                    const isMultilineOpening = openingElement.loc.start.line !== openingElement.loc.end.line;
+
+                    if (!isMultilineOpening) return;
+
+                    const sourceCode = context.getSourceCode();
+
+                    if (meaningfulChildren.length === 1 && meaningfulChildren[0].type === "JSXText") {
+                        const child = meaningfulChildren[0];
+                        const text = sourceCode.getText(child);
+                        const hasLeadingNewline = /^\s*\n/.test(text);
+                        const hasTrailingNewline = /\n\s*$/.test(text);
+
+                        if (!hasLeadingNewline || !hasTrailingNewline) {
+                            context.report({
+                                node: child,
+                                message: "Multiline JSX element text content must be on its own line",
+                                fix(fixer) {
+                                    const openBracketLine = sourceCode.lines[openingElement.loc.start.line - 1];
+                                    const baseIndent = openBracketLine.match(/^\s*/)[0];
+                                    const indent = baseIndent + "    ";
+                                    return fixer.replaceText(child, "\n" + indent + text.trim() + "\n" + baseIndent);
+                                }
+                            });
+                        }
+                        return;
+                    }
+
+                    const firstChild = meaningfulChildren[0];
+                    const openingEndLine = openingElement.loc.end.line;
+
+                    let needsFirstChildFix = false;
+                    if (firstChild.type === "JSXText") {
+                        const text = sourceCode.getText(firstChild);
+                        if (!/^\s*\n/.test(text)) needsFirstChildFix = true;
+                    } else if (firstChild.loc.start.line === openingEndLine) {
+                        needsFirstChildFix = true;
+                    }
+
+                    if (needsFirstChildFix) {
+                        context.report({
+                            node: firstChild,
+                            message: "First child of a multiline JSX element must be on a new line",
+                            fix(fixer) {
+                                const openBracketLine = sourceCode.lines[openingElement.loc.start.line - 1];
+                                const baseIndent = openBracketLine.match(/^\s*/)[0];
+                                const indent = baseIndent + "    ";
+
+                                if (firstChild.type === "JSXText") {
+                                    const text = sourceCode.getText(firstChild);
+                                    return fixer.replaceText(firstChild, "\n" + indent + text.replace(/^\s+/, ""));
+                                }
+
+                                return fixer.insertTextBefore(firstChild, "\n" + indent);
+                            }
+                        });
+                    }
+
+                    const lastChild = meaningfulChildren[meaningfulChildren.length - 1];
+                    let needsLastChildFix = false;
+
+                    if (lastChild.type === "JSXText") {
+                        const text = sourceCode.getText(lastChild);
+                        if (!/\n\s*$/.test(text)) needsLastChildFix = true;
+                    } else if (lastChild.loc.end.line === closingElement.loc.start.line) {
+                        needsLastChildFix = true;
+                    }
+
+                    if (needsLastChildFix) {
+                        context.report({
+                            node: closingElement,
+                            message: "Closing tag of a multiline JSX element must be on a new line",
+                            fix(fixer) {
+                                const openBracketLine = sourceCode.lines[openingElement.loc.start.line - 1];
+                                const baseIndent = openBracketLine.match(/^\s*/)[0];
+
+                                if (lastChild.type === "JSXText") {
+                                    const text = sourceCode.getText(lastChild);
+                                    return fixer.replaceText(lastChild, text.replace(/\s+$/, "") + "\n" + baseIndent);
+                                }
+
+                                return fixer.insertTextBefore(closingElement, "\n" + baseIndent);
+                            }
+                        });
+                    }
+                }
+            };
+        }
+    },
+    "no-jsx-parens-in-return": {
+        meta: {
+            type: "layout",
+            fixable: "code",
+            schema: []
+        },
+        create(context) {
+            return {
+                ReturnStatement(node) {
+                    if (!node.argument) return;
+                    if (node.argument.type === "JSXElement" || node.argument.type === "JSXFragment") {
+                        const sourceCode = context.getSourceCode();
+                        const returnToken = sourceCode.getFirstToken(node);
+                        const firstChildToken = sourceCode.getFirstToken(node.argument);
+
+                        const tokensBetween = sourceCode.getTokensBetween(returnToken, firstChildToken);
+                        const openParen = tokensBetween.find(t => t.value === "(");
+
+                        if (openParen) {
+                            const closeParen = sourceCode.getTokenAfter(node.argument);
+                            if (closeParen && closeParen.value === ")") {
+                                context.report({
+                                    node: node.argument,
+                                    message: "Returned JSX element should not be wrapped in parentheses",
+                                    fix(fixer) {
+                                        const fixes = [
+                                            fixer.remove(closeParen)
+                                        ];
+
+                                        if (returnToken.loc.end.line !== firstChildToken.loc.start.line) {
+                                            fixes.push(fixer.replaceTextRange([
+                                                returnToken.range[1],
+                                                firstChildToken.range[0]
+                                            ], " "));
+                                        } else {
+                                            fixes.push(fixer.remove(openParen));
+                                        }
+
+                                        return fixes;
+                                    }
+                                });
+                            }
+                        } else if (returnToken.loc.end.line !== firstChildToken.loc.start.line) {
+                            context.report({
+                                node: node.argument,
+                                message: "Returned JSX element must start on the same line as 'return' to avoid Automatic Semicolon Insertion (ASI)",
+                                fix(fixer) {
+                                    return fixer.replaceTextRange([
+                                        returnToken.range[1],
+                                        firstChildToken.range[0]
+                                    ], " ");
+                                }
+                            });
+                        }
+                    }
+                },
+                ArrowFunctionExpression(node) {
+                    if (node.body.type === "JSXElement" || node.body.type === "JSXFragment") {
+                        const sourceCode = context.getSourceCode();
+                        const arrowToken = sourceCode.getTokenBefore(node.body, t => t.value === "=>");
+                        const firstChildToken = sourceCode.getFirstToken(node.body);
+
+                        const tokensBetween = sourceCode.getTokensBetween(arrowToken, firstChildToken);
+                        const openParen = tokensBetween.find(t => t.value === "(");
+
+                        if (openParen) {
+                            const closeParen = sourceCode.getTokenAfter(node.body);
+                            if (closeParen && closeParen.value === ")") {
+                                context.report({
+                                    node: node.body,
+                                    message: "Implicitly returned JSX element should not be wrapped in parentheses",
+                                    fix(fixer) {
+                                        const fixes = [
+                                            fixer.remove(closeParen)
+                                        ];
+
+                                        if (arrowToken.loc.end.line !== firstChildToken.loc.start.line) {
+                                            fixes.push(fixer.replaceTextRange([
+                                                arrowToken.range[1],
+                                                firstChildToken.range[0]
+                                            ], " "));
+                                        } else {
+                                            fixes.push(fixer.remove(openParen));
+                                        }
+
+                                        return fixes;
+                                    }
+                                });
+                            }
+                        } else if (arrowToken.loc.end.line !== firstChildToken.loc.start.line) {
+                            context.report({
+                                node: node.body,
+                                message: "Implicitly returned JSX element must start on the same line as '=>'",
+                                fix(fixer) {
+                                    return fixer.replaceTextRange([
+                                        arrowToken.range[1],
+                                        firstChildToken.range[0]
+                                    ], " ");
+                                }
+                            });
+                        }
+                    }
+                }
+            };
+        }
+    },
+    "no-newline-after-jsx": {
+        meta: {
+            type: "layout",
+            fixable: "whitespace",
+            schema: []
+        },
+        create(context) {
+            function checkPunctuation(node) {
+                const sourceCode = context.getSourceCode();
+                const lastToken = sourceCode.getLastToken(node);
+                const nextToken = sourceCode.getTokenAfter(node);
+
+                if (nextToken && (nextToken.value === ";" || nextToken.value === "," || nextToken.value === ")")) {
+                    if (lastToken.loc.end.line !== nextToken.loc.start.line) {
+                        if (sourceCode.commentsExistBetween(node, nextToken)) return;
+
+                        context.report({
+                            node: nextToken,
+                            message: `Punctuation '${nextToken.value}' should be on the same line as the preceding JSX element`,
+                            fix(fixer) {
+                                return fixer.replaceTextRange([
+                                    node.range[1],
+                                    nextToken.range[0]
+                                ], "");
+                            }
+                        });
+                    }
+                }
+            }
+
+            return {
+                JSXElement: checkPunctuation,
+                JSXFragment: checkPunctuation
+            };
+        }
+    },
+    "no-static-inline-styles": {
+        meta: {
+            type: "suggestion",
+            messages: {
+                staticStyle: "Static inline styles are not allowed. Please move them to a stylesheet file."
+            },
+            schema: []
+        },
+        create(context) {
+            function checkProperty(propertyNode) {
+                if (!propertyNode || propertyNode.type !== "Property") return;
+
+                const value = propertyNode.value;
+                if (!value) return;
+
+                let isStatic = false;
+
+                if (value.type === "Literal") {
+                    if (typeof value.value === "string" || typeof value.value === "number") {
+                        isStatic = true;
+                    }
+                } else if (value.type === "UnaryExpression" && value.operator === "-") {
+                    if (value.argument && value.argument.type === "Literal" && typeof value.argument.value === "number") {
+                        isStatic = true;
+                    }
+                } else if (value.type === "TemplateLiteral" && value.expressions.length === 0) {
+                    isStatic = true;
+                }
+
+                if (isStatic) {
+                    context.report({
+                        node: propertyNode,
+                        messageId: "staticStyle"
+                    });
+                }
+            }
+
+            function checkObjectExpression(node) {
+                if (node.type !== "ObjectExpression") return;
+                node.properties.forEach(checkProperty);
+            }
+
+            function checkStyleValue(node) {
+                if (!node) return;
+
+                if (node.type === "ObjectExpression") {
+                    checkObjectExpression(node);
+                } else if (node.type === "ArrayExpression") {
+                    node.elements.forEach(element => {
+                        if (element && element.type === "ObjectExpression") {
+                            checkObjectExpression(element);
+                        }
+                    });
+                }
+            }
+
+            return {
+                JSXAttribute(node) {
+                    const attrName = node.name.name;
+                    if (typeof attrName !== "string") return;
+
+                    if (attrName === "style" || attrName.endsWith("Style")) {
+                        if (node.value && node.value.type === "JSXExpressionContainer") {
+                            checkStyleValue(node.value.expression);
+                        }
+                    }
+                }
+            };
+        }
     }
 };

eslint.config.mjs

@@ -27,6 +27,10 @@ export default tseslint.config(
             "local-rules/multiline-object-properties": "error",
             "local-rules/multiline-jsx-attributes": "error",
             "local-rules/multiline-array-elements": "error",
+            "local-rules/multiline-jsx-children": "error",
+            "local-rules/no-jsx-parens-in-return": "error",
+            "local-rules/no-newline-after-jsx": "error",
+            "local-rules/no-static-inline-styles": "error",
             "@typescript-eslint/no-empty-object-type": [
                 "error",
                 {

example/src/navigation/index.tsx

@@ -6,6 +6,7 @@ import {
     View
 } from "react-native";
 import type RootStackParamList from "./type";
+import stylesheet from "./stylesheet";
 import {
     NCoreUIKitEmbeddedMenu,
     NCoreUIKitLocalize,
@@ -32,56 +33,54 @@ import {
     GoalIcon,
     HomeIcon
 } from "lucide-react-native";
-
-import AvatarPage from "../pages/components/avatar";
-import AvatarGroupPage from "../pages/components/avatarGroup";
-import BottomSheetPage from "../pages/components/bottomSheet";
-import ButtonPage from "../pages/components/button";
-import CheckBoxPage from "../pages/components/checkBox";
-import ChipPage from "../pages/components/chip";
-import DateSelectorPage from "../pages/components/dateSelector";
-import DateTimePickerPage from "../pages/components/dateTimePicker";
-import DateTimeSheetPage from "../pages/components/dateTimeSheet";
-import DialogPage from "../pages/components/dialog";
-import EmbeddedMenuPage from "../pages/components/embeddedMenu";
-import HeaderPage from "../pages/components/header";
+import NotificationIndicatorPage from "../pages/components/notificationIndicator";
 import HighlightButtonPage from "../pages/components/highlightButton";
-import LoadingPage from "../pages/components/loading";
+import PaletteSwitcherPage from "../pages/components/paletteSwitcher";
+import LocaleExamplesPage from "../pages/coreFeatures/localeExamples";
+import DateTimePickerPage from "../pages/components/dateTimePicker";
 import LocaleSwitcherPage from "../pages/components/localeSwitcher";
-import MainHeaderPage from "../pages/components/mainHeader";
 import MarkdownViewerPage from "../pages/components/markdownViewer";
-import MenuPage from "../pages/components/menu";
-import ModalPage from "../pages/components/modal";
+import ThemeExamplesPage from "../pages/coreFeatures/themeExamples";
+import DateTimeSheetPage from "../pages/components/dateTimeSheet";
 import MonthSelectorPage from "../pages/components/monthSelector";
-import NotificationIndicatorPage from "../pages/components/notificationIndicator";
-import NumericInputPage from "../pages/components/numericInput";
 import PageContainerPage from "../pages/components/pageContainer";
-import PaletteSwitcherPage from "../pages/components/paletteSwitcher";
+import TextAreaInputPage from "../pages/components/textAreaInput";
+import ThemeSwitcherPage from "../pages/components/themeSwitcher";
+import DateSelectorPage from "../pages/components/dateSelector";
+import EmbeddedMenuPage from "../pages/components/embeddedMenu";
+import NumericInputPage from "../pages/components/numericInput";
+import TimeSelectorPage from "../pages/components/timeSelector";
+import WebScrollbarPage from "../pages/components/webScrollbar";
+import YearSelectorPage from "../pages/components/yearSelector";
+import AvatarGroupPage from "../pages/components/avatarGroup";
+import BottomSheetPage from "../pages/components/bottomSheet";
 import RadioButtonPage from "../pages/components/radioButton";
-import RowCardPage from "../pages/components/rowCard";
-import SelectBoxPage from "../pages/components/selectBox";
 import SelectSheetPage from "../pages/components/selectSheet";
+import ToolsUsagePage from "../pages/coreFeatures/toolsUsage";
+import MainHeaderPage from "../pages/components/mainHeader";
+import SelectBoxPage from "../pages/components/selectBox";
 import SeperatorPage from "../pages/components/seperator";
+import StateCardPage from "../pages/components/stateCard";
+import TextInputPage from "../pages/components/textInput";
+import ImplementationPage from "../pages/implementation";
+import CheckBoxPage from "../pages/components/checkBox";
 import SiteLogoPage from "../pages/components/siteLogo";
 import SnackBarPage from "../pages/components/snackBar";
-import StateCardPage from "../pages/components/stateCard";
+import LoadingPage from "../pages/components/loading";
+import RowCardPage from "../pages/components/rowCard";
 import StickerPage from "../pages/components/sticker";
+import InstallationPage from "../pages/installation";
+import AvatarPage from "../pages/components/avatar";
+import ButtonPage from "../pages/components/button";
+import DialogPage from "../pages/components/dialog";
+import HeaderPage from "../pages/components/header";
 import SwitchPage from "../pages/components/switch";
-import TextPage from "../pages/components/text";
-import TextAreaInputPage from "../pages/components/textAreaInput";
-import TextInputPage from "../pages/components/textInput";
-import ThemeSwitcherPage from "../pages/components/themeSwitcher";
-import TimeSelectorPage from "../pages/components/timeSelector";
+import ModalPage from "../pages/components/modal";
 import ToastPage from "../pages/components/toast";
-import WebScrollbarPage from "../pages/components/webScrollbar";
-import YearSelectorPage from "../pages/components/yearSelector";
-
-import LocaleExamplesPage from "../pages/coreFeatures/localeExamples";
-import ThemeExamplesPage from "../pages/coreFeatures/themeExamples";
-import ToolsUsagePage from "../pages/coreFeatures/toolsUsage";
+import ChipPage from "../pages/components/chip";
+import MenuPage from "../pages/components/menu";
+import TextPage from "../pages/components/text";
 import Home from "../pages/home";
-import ImplementationPage from "../pages/implementation";
-import InstallationPage from "../pages/installation";
 
 const RootStack = createNativeStackNavigator();
 const ComponentsStack = createNativeStackNavigator();
@@ -746,12 +745,12 @@ const RootNav = () => {
         isWorkWithSticky={true}
         renderRight={() => {
             return <View
-                style={{
-                    justifyContent: "center",
-                    gap: spaces.spacingMd,
-                    flexDirection: "row",
-                    alignItems: "center"
-                }}
+                style={[
+                    stylesheet.rightContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
             >
                 <LocaleSwitcher/>
                 <PaletteSwitcher/>

example/src/navigation/stylesheet.ts

@@ -0,0 +1,12 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    rightContainer: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center"
+    }
+});
+export default stylesheet;

example/src/navigation/type.ts

@@ -8,9 +8,9 @@ export type GettingStartedStackParamList = {
 };
 
 export type CoreFeaturesStackParamList = {
-    TypesOverride: undefined;
     LocaleExamples: undefined;
     ThemeExamples: undefined;
+    TypesOverride: undefined;
     ToolsUsage: undefined;
 };
 
@@ -56,9 +56,9 @@ export type ComponentsStackParamList = {
 };
 
 type RootStackParamList = {
-    CoreFeatures: NavigatorScreenParams<CoreFeaturesStackParamList>;
-    GettingStarted: NavigatorScreenParams<GettingStartedStackParamList>;
-    Components: NavigatorScreenParams<ComponentsStackParamList>;
+    GettingStarted: NavigatorScreenParams<GettingStartedStackParamList> | undefined;
+    CoreFeatures: NavigatorScreenParams<CoreFeaturesStackParamList> | undefined;
+    Components: NavigatorScreenParams<ComponentsStackParamList> | undefined;
     Home: undefined;
 };
 

example/src/pages/components/avatar/index.tsx

@@ -10,18 +10,18 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     Avatar,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -104,167 +104,186 @@ const AvatarPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("avatar-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("avatar-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("avatar-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("avatar-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Avatar
-                        statusIndicatorType={
-                            AVATAR_STATUS_INDICATOR_TYPES[statusIndicatorIndex]
-                        }
-                        size={AVATAR_SIZES[sizeIndex]}
-                        isStatusIndicator={true}
-                        isDisabled={isDisabled}
-                        isLoading={isLoading}
-                        imageUrl={imageUrl}
-                        title={title}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("avatar-enterImageUrl")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    title={localize("avatar-imageUrl")}
-                    onChangeText={setImageUrl}
-                    spreadBehaviour="stretch"
-                    value={imageUrl}
-                />
-                <TextInput
-                    placeholder={localize("avatar-enterText")}
-                    title={localize("avatar-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Avatar
+                    statusIndicatorType={
+                        AVATAR_STATUS_INDICATOR_TYPES[statusIndicatorIndex]
+                    }
+                    size={AVATAR_SIZES[sizeIndex]}
+                    isStatusIndicator={true}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    imageUrl={imageUrl}
+                    title={title}
                 />
-                <View
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
                     style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
+                        marginBottom: spaces.spacingSm
                     }}
                 >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = AVATAR_SIZES.indexOf(
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Avatar\n} from \"ncore-ui-kit\";\n\n<Avatar\n    title=\"John Doe\"\n    imageUrl=\"https://ncore.nibgat.space/assets/images/ncorelogo.png\"\n    statusIndicatorType=\"online\"\n    isStatusIndicator={true}\n    size=\"large\"\n/>"}
+                    language="tsx"
+                />
+            </View>
+            <TextInput
+                placeholder={localize("avatar-enterImageUrl")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                title={localize("avatar-imageUrl")}
+                onChangeText={setImageUrl}
+                spreadBehaviour="stretch"
+                value={imageUrl}
+            />
+            <TextInput
+                placeholder={localize("avatar-enterText")}
+                title={localize("avatar-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = AVATAR_SIZES.indexOf(
                                     selectedItems[0]!
                                         .__key as IAvatarProps["size"],
-                                );
-                                if (index !== -1) setSizeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            AVATAR_SIZES_DATA[sizeIndex]
-                                ? [AVATAR_SIZES_DATA[sizeIndex]]
-                                : []
+                            );
+                            if (index !== -1) setSizeIndex(index);
                         }
-                        title={localize("change-size")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        data={AVATAR_SIZES_DATA}
-                        spreadBehaviour="free"
-                    />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index =
+                    }}
+                    initialSelectedItems={
+
+                        AVATAR_SIZES_DATA[sizeIndex]
+
+                            ? [
+                                AVATAR_SIZES_DATA[sizeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("change-size")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    data={AVATAR_SIZES_DATA}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index =
                                     AVATAR_STATUS_INDICATOR_TYPES.indexOf(
                                         selectedItems[0]!
                                             .__key as IAvatarProps["statusIndicatorType"],
                                     );
-                                if (index !== -1)
-                                    setStatusIndicatorIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            AVATAR_STATUS_INDICATOR_TYPES_DATA[
-                                statusIndicatorIndex
-                            ]
-                                ? [
+                            if (index !== -1)
+                                setStatusIndicatorIndex(index);
+                        }
+                    }}
+                    initialSelectedItems={
+                        AVATAR_STATUS_INDICATOR_TYPES_DATA[
+                            statusIndicatorIndex
+                        ]
+                            ? [
                                     AVATAR_STATUS_INDICATOR_TYPES_DATA[
                                         statusIndicatorIndex
-                                    ],
-                                ]
-                                : []
-                        }
-                        title={localize("avatar-changeStatus")}
-                        data={AVATAR_STATUS_INDICATOR_TYPES_DATA}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                                    ]!
+                            ]
+                            : []
+                    }
+                    title={localize("avatar-changeStatus")}
+                    data={AVATAR_STATUS_INDICATOR_TYPES_DATA}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        onPress={() => {
+                            setIsLoading(!isLoading);
+                        }}
+                        title={localize("avatar-toggleLoading")}
                         spreadBehaviour="free"
+                        isActive={isLoading}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
+                    <Switch
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
                         }}
-                    >
-                        <Switch
-                            title={localize("avatar-toggleLoading")}
-                            onPress={() => {
-                                setIsLoading(!isLoading);
-                            }}
-                            isActive={isLoading}
-                        />
-                        <Switch
-                            onPress={() => {
-                                setIsDisabled(!isDisabled);
-                            }}
-                            title={localize("avatar-toggleDisabled")}
-                            isActive={isDisabled}
-                        />
-                    </View>
+                        title={localize("avatar-toggleDisabled")}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default AvatarPage;

example/src/pages/components/avatar/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/avatarGroup/index.tsx

@@ -13,14 +13,13 @@ import {
     AvatarGroup,
     SelectBox,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -88,115 +87,116 @@ const AvatarGroupPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("avatarGroup-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("avatarGroup-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("avatarGroup-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("avatarGroup-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <AvatarGroup
+                    size={AVATAR_GROUP_SIZES[sizeIndex]}
+                    isDisabled={isDisabled}
+                    avatars={MOCK_AVATARS}
+                    isLoading={isLoading}
+                />
+            </View>
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = AVATAR_GROUP_SIZES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IAvatarGroupProps["size"],
+                            );
+                            if (index !== -1) setSizeIndex(index);
+                        }
                     }}
-                >
-                    <AvatarGroup
-                        size={AVATAR_GROUP_SIZES[sizeIndex]}
-                        isDisabled={isDisabled}
-                        avatars={MOCK_AVATARS}
-                        isLoading={isLoading}
-                    />
-                </View>
+                    initialSelectedItems={
+
+                        AVATAR_GROUP_SIZES_DATA[sizeIndex]
+
+                            ? [
+                                AVATAR_GROUP_SIZES_DATA[sizeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("avatarGroup-changeSize")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    data={AVATAR_GROUP_SIZES_DATA}
+                    spreadBehaviour="free"
+                />
                 <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
+                    style={stylesheet.switchesContainer}
                 >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = AVATAR_GROUP_SIZES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as IAvatarGroupProps["size"],
-                                );
-                                if (index !== -1) setSizeIndex(index);
-                            }
+                    <Switch
+                        onPress={() => {
+                            setIsLoading(!isLoading);
                         }}
-                        initialSelectedItems={
-                            AVATAR_GROUP_SIZES_DATA[sizeIndex]
-                                ? [AVATAR_GROUP_SIZES_DATA[sizeIndex]]
-                                : []
-                        }
-                        title={localize("avatarGroup-changeSize")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        data={AVATAR_GROUP_SIZES_DATA}
+                        title={localize("avatarGroup-toggleLoading")}
                         spreadBehaviour="free"
+                        isActive={isLoading}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
+                    <Switch
+                        title={localize(
+                            "avatarGroup-toggleDisabled",
+                        )}
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
                         }}
-                    >
-                        <Switch
-                            title={localize("avatarGroup-toggleLoading")}
-                            onPress={() => {
-                                setIsLoading(!isLoading);
-                            }}
-                            isActive={isLoading}
-                        />
-                        <Switch
-                            title={localize(
-                                "avatarGroup-toggleDisabled",
-                            )}
-                            onPress={() => {
-                                setIsDisabled(!isDisabled);
-                            }}
-                            isActive={isDisabled}
-                        />
-                    </View>
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default AvatarGroupPage;

example/src/pages/components/avatarGroup/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/bottomSheet/index.tsx

@@ -19,7 +19,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -60,129 +60,123 @@ const BottomSheetPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("bottomSheet-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("bottomSheet-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("bottomSheet-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("bottomSheet-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Button
-                        title={localize("bottomSheet-openSheet")}
-                        onPress={() => setIsActive(true)}
-                    />
-                </View>
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize(
-                                "bottomSheet-toggleSwipeClose",
-                            )}
-                            onPress={() => {
-                                setIsSwipeClose(!isSwipeClose);
-                            }}
-                            isActive={isSwipeClose}
-                        />
-                        <Switch
-                            title={localize(
-                                "bottomSheet-toggleShowHandle",
-                            )}
-                            onPress={() => {
-                                setIsShowHandle(!isShowHandle);
-                            }}
-                            isActive={isShowHandle}
-                        />
-                        <Switch
-                            onPress={() => {
-                                setIsWorkWithPortal(!isWorkWithPortal);
-                            }}
-                            title={localize("bottomSheet-togglePortal")}
-                            isActive={isWorkWithPortal}
-                        />
-                    </View>
-                </View>
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Button
+                    title={localize("bottomSheet-openSheet")}
+                    onPress={() => setIsActive(true)}
+                />
             </View>
-            <BottomSheet
-                isWorkWithPortal={isWorkWithPortal}
-                onClose={() => setIsActive(false)}
-                isSwipeClose={isSwipeClose}
-                isShowHandle={isShowHandle}
-                isActive={isActive}
+            <View
+                style={[
+                    stylesheet.rowSpaceBetween,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
             >
                 <View
-                    style={{
-                        padding: spaces.spacingMd
-                    }}
+                    style={stylesheet.rowSpaceBetween2}
                 >
-                    <Text
-                        style={{
-                            marginBottom: spaces.spacingMd,
-                            textAlign: "center"
+                    <Switch
+                        title={localize(
+                            "bottomSheet-toggleSwipeClose",
+                        )}
+                        onPress={() => {
+                            setIsSwipeClose(!isSwipeClose);
+                        }}
+                        isActive={isSwipeClose}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize(
+                            "bottomSheet-toggleShowHandle",
+                        )}
+                        onPress={() => {
+                            setIsShowHandle(!isShowHandle);
                         }}
-                    >
-                        {localize("bottomSheet-content")}
-                    </Text>
-                    <Button
-                        title={localize("bottomSheet-close")}
-                        onPress={() => setIsActive(false)}
-                        spreadBehaviour="stretch"
-                        type="danger"
+                        isActive={isShowHandle}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsWorkWithPortal(!isWorkWithPortal);
+                        }}
+                        title={localize("bottomSheet-togglePortal")}
+                        isActive={isWorkWithPortal}
+                        spreadBehaviour="free"
                     />
                 </View>
-            </BottomSheet>
-        </PageContainer>
-    );
+            </View>
+        </View>
+        <BottomSheet
+            isWorkWithPortal={isWorkWithPortal}
+            onClose={() => setIsActive(false)}
+            isSwipeClose={isSwipeClose}
+            isShowHandle={isShowHandle}
+            isActive={isActive}
+        >
+            <View
+                style={{
+                    padding: spaces.spacingMd
+                }}
+            >
+                <Text
+                    style={[
+                        stylesheet.centeredText,
+                        {
+                            marginBottom: spaces.spacingMd
+                        }
+                    ]}
+                >
+                    {localize("bottomSheet-content")}
+                </Text>
+                <Button
+                    title={localize("bottomSheet-close")}
+                    onPress={() => setIsActive(false)}
+                    spreadBehaviour="stretch"
+                    type="danger"
+                />
+            </View>
+        </BottomSheet>
+    </PageContainer>;
 };
 export default BottomSheetPage;

example/src/pages/components/bottomSheet/stylesheet.ts

@@ -13,6 +13,53 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%",
+        alignItems: "center"
+    },
+    rowSpaceBetween2: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%",
+        alignItems: "center"
+    },
+    centeredText: {
+        textAlign: "center"
     }
 });
 export default stylesheet;

example/src/pages/components/button/index.tsx

@@ -10,18 +10,18 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -165,23 +165,21 @@ const ButtonPage = () => {
             <Text
                 variant="bodyMediumSize"
                 color="mid"
-                style={{
-                    marginBottom: 20
-                }}
+                style={stylesheet.descText}
             >
                 {localize("button-desc")}
             </Text>
             <View
-                style={{
-                    borderColor: colors.content.border.subtle,
-                    marginBottom: spaces.spacingMd,
-                    borderRadius: radiuses.form,
-                    borderWidth: borders.line,
-                    padding: spaces.spacingMd,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    minHeight: 120
-                }}
+                style={[
+                    stylesheet.previewContainer,
+                    {
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd
+                    }
+                ]}
             >
                 <Button
                     spreadBehaviour={BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}
@@ -207,6 +205,24 @@ const ButtonPage = () => {
                     }}
                 />
             </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Button\n} from \"ncore-ui-kit\";\n\n<Button\n    title=\"Click Me!\"\n    onPress={() => console.log(\"Pressed\")}\n    spreadBehaviour=\"stretch\"\n    iconDirection=\"left\"\n    variant=\"filled\"\n    type=\"primary\"\n    size=\"medium\"\n/>"}
+                    language="tsx"
+                />
+            </View>
             <TextInput
                 placeholder={localize("enter-text")}
                 title={localize("button-title")}
@@ -218,18 +234,25 @@ const ButtonPage = () => {
                 }}
             />
             <View
-                style={{
-                    justifyContent: "space-between",
-                    gap: spaces.spacingMd,
-                    flexDirection: "row",
-                    flexWrap: "wrap",
-                    width: "100%"
-                }}
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
             >
                 <SelectBox
-                    initialSelectedItems={BUTTON_TYPES_DATA[typeIndex] ? [
+                    initialSelectedItems={
+
                         BUTTON_TYPES_DATA[typeIndex]
-                    ] : []}
+
+                            ? [
+                                BUTTON_TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     title={localize("change-type")}
@@ -243,9 +266,17 @@ const ButtonPage = () => {
                     }}
                 />
                 <SelectBox
-                    initialSelectedItems={BUTTON_VARIANTS_DATA[variantIndex] ? [
+                    initialSelectedItems={
+
                         BUTTON_VARIANTS_DATA[variantIndex]
-                    ] : []}
+
+                            ? [
+                                BUTTON_VARIANTS_DATA[variantIndex]!
+                            ]
+
+                            : []
+
+                    }
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     title={localize("change-variant")}
@@ -268,9 +299,17 @@ const ButtonPage = () => {
                     }}
                 />
                 <SelectBox
-                    initialSelectedItems={BUTTON_SIZES_DATA[sizeIndex] ? [
+                    initialSelectedItems={
+
                         BUTTON_SIZES_DATA[sizeIndex]
-                    ] : []}
+
+                            ? [
+                                BUTTON_SIZES_DATA[sizeIndex]!
+                            ]
+
+                            : []
+
+                    }
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     title={localize("change-size")}
@@ -284,49 +323,48 @@ const ButtonPage = () => {
                     }}
                 />
                 <View
-                    style={{
-                        justifyContent: "space-between",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
+                    style={stylesheet.switchesContainer}
                 >
                     <Switch
-                        title={localize("toggle-icon-direction")}
-                        isActive={iconDirection === "right"}
-                        subTitle={localize(iconDirection)}
                         onPress={() => {
                             setIconDirection(iconDirection === "left" ? "right" : "left");
                         }}
+                        title={localize("toggle-icon-direction")}
+                        isActive={iconDirection === "right"}
+                        subTitle={localize(iconDirection)}
+                        spreadBehaviour="free"
                     />
                     <Switch
-                        title={localize("toggle-icon")}
-                        isActive={showIcon}
                         onPress={() => {
                             setShowIcon(!showIcon);
                         }}
+                        title={localize("toggle-icon")}
+                        spreadBehaviour="free"
+                        isActive={showIcon}
                     />
                     <Switch
-                        title={localize("toggle-loading")}
-                        isActive={isLoading}
                         onPress={() => {
                             setIsLoading(!isLoading);
                         }}
+                        title={localize("toggle-loading")}
+                        spreadBehaviour="free"
+                        isActive={isLoading}
                     />
                     <Switch
-                        title={localize("toggle-disabled")}
-                        isActive={isDisabled}
                         onPress={() => {
                             setIsDisabled(!isDisabled);
                         }}
+                        title={localize("toggle-disabled")}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
                     />
                     <Switch
-                        title={localize("toggle-custom-padding")}
-                        isActive={isCustomPadding}
                         onPress={() => {
                             setIsCustomPadding(!isCustomPadding);
                         }}
+                        title={localize("toggle-custom-padding")}
+                        isActive={isCustomPadding}
+                        spreadBehaviour="free"
                     />
                 </View>
             </View>

example/src/pages/components/button/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/checkBox/index.tsx

@@ -15,14 +15,13 @@ import {
     TextInput,
     CheckBox,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -122,196 +121,204 @@ const CheckBoxPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("checkBox-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("checkBox-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("checkBox-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("checkBox-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <CheckBox
-                        onPress={() => {
-                            setIsCheckedIndex((prev) => (prev === 0 ? 2 : 0));
-                        }}
-                        spreadBehaviour={
-                            CHECK_BOX_SPREAD_BEHAVIOURS[spreadIndex]
-                        }
-                        isChecked={IS_CHECKED_TYPES[isCheckedIndex]}
-                        type={CHECK_BOX_TYPES[typeIndex]}
-                        isDisabled={isDisabled}
-                        isLoading={isLoading}
-                        subTitle={subTitle}
-                        isFlip={isFlip}
-                        title={title}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("checkBox-enterText")}
-                    title={localize("checkBox-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <CheckBox
+                    onPress={() => {
+                        setIsCheckedIndex((prev) => (prev === 0 ? 2 : 0));
                     }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    spreadBehaviour={
+                        CHECK_BOX_SPREAD_BEHAVIOURS[spreadIndex]
+                    }
+                    isChecked={IS_CHECKED_TYPES[isCheckedIndex]}
+                    type={CHECK_BOX_TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    subTitle={subTitle}
+                    isFlip={isFlip}
+                    title={title}
                 />
-                <TextInput
-                    placeholder={localize("checkBox-enterSubText")}
-                    title={localize("checkBox-subTitleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    onChangeText={setSubTitle}
-                    spreadBehaviour="stretch"
-                    value={subTitle}
-                />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = CHECK_BOX_TYPES.indexOf(
+            </View>
+            <TextInput
+                placeholder={localize("checkBox-enterText")}
+                title={localize("checkBox-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <TextInput
+                placeholder={localize("checkBox-enterSubText")}
+                title={localize("checkBox-subTitleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                onChangeText={setSubTitle}
+                spreadBehaviour="stretch"
+                value={subTitle}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = CHECK_BOX_TYPES.indexOf(
                                     selectedItems[0]!
                                         .__key as ICheckBoxProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            CHECK_BOX_TYPES_DATA[typeIndex]
-                                ? [CHECK_BOX_TYPES_DATA[typeIndex]]
-                                : []
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        title={localize("checkBox-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        data={CHECK_BOX_TYPES_DATA}
-                        spreadBehaviour="free"
-                    />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index =
+                    }}
+                    initialSelectedItems={
+
+                        CHECK_BOX_TYPES_DATA[typeIndex]
+
+                            ? [
+                                CHECK_BOX_TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("checkBox-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    data={CHECK_BOX_TYPES_DATA}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index =
                                     CHECK_BOX_SPREAD_BEHAVIOURS.indexOf(
                                         selectedItems[0]!
                                             .__key as ICheckBoxProps["spreadBehaviour"],
                                     );
-                                if (index !== -1) setSpreadIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            CHECK_BOX_SPREAD_BEHAVIOURS_DATA[spreadIndex]
-                                ? [
+                            if (index !== -1) setSpreadIndex(index);
+                        }
+                    }}
+                    initialSelectedItems={
+                        CHECK_BOX_SPREAD_BEHAVIOURS_DATA[spreadIndex]
+                            ? [
                                     CHECK_BOX_SPREAD_BEHAVIOURS_DATA[
                                         spreadIndex
-                                    ],
-                                ]
-                                : []
+                                    ]!
+                            ]
+                            : []
+                    }
+                    title={localize("checkBox-changeSpread")}
+                    data={CHECK_BOX_SPREAD_BEHAVIOURS_DATA}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = IS_CHECKED_TYPES_DATA.findIndex(
+                                (item) =>
+                                    item.__key === selectedItems[0]!.__key,
+                            );
+                            if (index !== -1) setIsCheckedIndex(index);
                         }
-                        title={localize("checkBox-changeSpread")}
-                        data={CHECK_BOX_SPREAD_BEHAVIOURS_DATA}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    }}
+                    initialSelectedItems={
+
+                        IS_CHECKED_TYPES_DATA[isCheckedIndex]
+
+                            ? [
+                                IS_CHECKED_TYPES_DATA[isCheckedIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("checkBox-changeIsChecked")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    data={IS_CHECKED_TYPES_DATA}
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        onPress={() => {
+                            setIsLoading(!isLoading);
+                        }}
+                        title={localize("checkBox-toggleLoading")}
                         spreadBehaviour="free"
+                        isActive={isLoading}
                     />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = IS_CHECKED_TYPES_DATA.findIndex(
-                                    (item) =>
-                                        item.__key === selectedItems[0]!.__key,
-                                );
-                                if (index !== -1) setIsCheckedIndex(index);
-                            }
+                    <Switch
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
                         }}
-                        initialSelectedItems={
-                            IS_CHECKED_TYPES_DATA[isCheckedIndex]
-                                ? [IS_CHECKED_TYPES_DATA[isCheckedIndex]]
-                                : []
-                        }
-                        title={localize("checkBox-changeIsChecked")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        data={IS_CHECKED_TYPES_DATA}
+                        title={localize("checkBox-toggleDisabled")}
                         spreadBehaviour="free"
+                        isActive={isDisabled}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
+                    <Switch
+                        onPress={() => {
+                            setIsFlip(!isFlip);
                         }}
-                    >
-                        <Switch
-                            title={localize("checkBox-toggleLoading")}
-                            onPress={() => {
-                                setIsLoading(!isLoading);
-                            }}
-                            isActive={isLoading}
-                        />
-                        <Switch
-                            title={localize("checkBox-toggleDisabled")}
-                            onPress={() => {
-                                setIsDisabled(!isDisabled);
-                            }}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            title={localize("checkBox-toggleFlip")}
-                            onPress={() => {
-                                setIsFlip(!isFlip);
-                            }}
-                            isActive={isFlip}
-                        />
-                    </View>
+                        title={localize("checkBox-toggleFlip")}
+                        spreadBehaviour="free"
+                        isActive={isFlip}
+                    />
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default CheckBoxPage;

example/src/pages/components/checkBox/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/chip/index.tsx

@@ -14,14 +14,13 @@ import {
     TextInput,
     Header,
     Switch,
-    Chip
-    ,
+    Chip,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -112,175 +111,189 @@ const ChipPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("chip-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("chip-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("chip-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("chip-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Chip
+                    spreadBehaviour={CHIP_SPREAD_BEHAVIOURS[spreadIndex]}
+                    type={CHIP_TYPES[typeIndex]}
+                    size={CHIP_SIZES[sizeIndex]}
+                    isClosable={isClosable}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    title={title}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("chip-enterText")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                title={localize("chip-titleLabel")}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = CHIP_TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IChipProps["type"],
+                            );
+                            if (index !== -1) setTypeIndex(index);
+                        }
                     }}
-                >
-                    <Chip
-                        spreadBehaviour={CHIP_SPREAD_BEHAVIOURS[spreadIndex]}
-                        type={CHIP_TYPES[typeIndex]}
-                        size={CHIP_SIZES[sizeIndex]}
-                        isClosable={isClosable}
-                        isDisabled={isDisabled}
-                        isLoading={isLoading}
-                        title={title}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("chip-enterText")}
-                    style={{
-                        marginBottom: spaces.spacingMd
+                    initialSelectedItems={
+
+                        CHIP_TYPES_DATA[typeIndex]
+
+                            ? [
+                                CHIP_TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("chip-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={CHIP_TYPES_DATA}
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = CHIP_SPREAD_BEHAVIOURS.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IChipProps["spreadBehaviour"],
+                            );
+                            if (index !== -1) setSpreadIndex(index);
+                        }
+                    }}
+                    initialSelectedItems={
+
+                        CHIP_SPREAD_BEHAVIOURS_DATA[spreadIndex]
+
+                            ? [
+                                CHIP_SPREAD_BEHAVIOURS_DATA[spreadIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("chip-changeSpread")}
+                    titleExtractor={(item) => item.__title}
+                    data={CHIP_SPREAD_BEHAVIOURS_DATA}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = CHIP_SIZES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IChipProps["size"],
+                            );
+                            if (index !== -1) setSizeIndex(index);
+                        }
                     }}
-                    title={localize("chip-titleLabel")}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    initialSelectedItems={
+
+                        CHIP_SIZES_DATA[sizeIndex]
+
+                            ? [
+                                CHIP_SIZES_DATA[sizeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("chip-changeSize")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    data={CHIP_SIZES_DATA}
+                    spreadBehaviour="free"
                 />
                 <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
+                    style={stylesheet.switchesContainer}
                 >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = CHIP_TYPES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as IChipProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
+                    <Switch
+                        onPress={() => {
+                            setIsClosable(!isClosable);
                         }}
-                        initialSelectedItems={
-                            CHIP_TYPES_DATA[typeIndex]
-                                ? [CHIP_TYPES_DATA[typeIndex]]
-                                : []
-                        }
-                        title={localize("chip-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                        title={localize("chip-toggleClosable")}
                         spreadBehaviour="free"
-                        data={CHIP_TYPES_DATA}
+                        isActive={isClosable}
                     />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = CHIP_SPREAD_BEHAVIOURS.indexOf(
-                                    selectedItems[0]!
-                                        .__key as IChipProps["spreadBehaviour"],
-                                );
-                                if (index !== -1) setSpreadIndex(index);
-                            }
+                    <Switch
+                        onPress={() => {
+                            setIsLoading(!isLoading);
                         }}
-                        initialSelectedItems={
-                            CHIP_SPREAD_BEHAVIOURS_DATA[spreadIndex]
-                                ? [CHIP_SPREAD_BEHAVIOURS_DATA[spreadIndex]]
-                                : []
-                        }
-                        title={localize("chip-changeSpread")}
-                        titleExtractor={(item) => item.__title}
-                        data={CHIP_SPREAD_BEHAVIOURS_DATA}
-                        keyExtractor={(item) => item.__key}
+                        title={localize("chip-toggleLoading")}
                         spreadBehaviour="free"
+                        isActive={isLoading}
                     />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = CHIP_SIZES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as IChipProps["size"],
-                                );
-                                if (index !== -1) setSizeIndex(index);
-                            }
+                    <Switch
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
                         }}
-                        initialSelectedItems={
-                            CHIP_SIZES_DATA[sizeIndex]
-                                ? [CHIP_SIZES_DATA[sizeIndex]]
-                                : []
-                        }
-                        title={localize("chip-changeSize")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        data={CHIP_SIZES_DATA}
+                        title={localize("chip-toggleDisabled")}
                         spreadBehaviour="free"
+                        isActive={isDisabled}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            onPress={() => {
-                                setIsClosable(!isClosable);
-                            }}
-                            title={localize("chip-toggleClosable")}
-                            isActive={isClosable}
-                        />
-                        <Switch
-                            onPress={() => {
-                                setIsLoading(!isLoading);
-                            }}
-                            title={localize("chip-toggleLoading")}
-                            isActive={isLoading}
-                        />
-                        <Switch
-                            onPress={() => {
-                                setIsDisabled(!isDisabled);
-                            }}
-                            title={localize("chip-toggleDisabled")}
-                            isActive={isDisabled}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default ChipPage;

example/src/pages/components/chip/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/dateSelector/index.tsx

@@ -16,7 +16,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -35,57 +35,51 @@ const DateSelectorPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-dateSelector")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-dateSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("dateSelector-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-dateSelector")}
-                </Text>
-                <DateSelector
-                    setIsSheetContentReady={setIsSheetContentReady}
-                    selectMultipleObject={() => {}}
-                    selectObject={() => {}}
-                    variant="single"
-                />
-            </View>
-        </PageContainer>
-    );
+                {localize("dateSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-dateSelector")}
+            </Text>
+            <DateSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                variant="single"
+            />
+        </View>
+    </PageContainer>;
 };
 export default DateSelectorPage;

example/src/pages/components/dateSelector/stylesheet.ts

@@ -15,6 +15,28 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/dateTimePicker/index.tsx

@@ -13,14 +13,13 @@ import {
     PageContainer,
     SelectBox,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -119,189 +118,195 @@ const DateTimePickerPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("dateTimePicker-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("dateTimePicker-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("dateTimePicker-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("dateTimePicker-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <DateTimePicker
-                        spreadBehaviour={
-                            DATE_TIME_PICKER_SPREAD_BEHAVIOURS[spreadIndex]
-                        }
-                        pickerType={
-                            DATE_TIME_PICKER_PICKER_TYPES[pickerTypeIndex]
-                        }
-                        variant={DATE_TIME_PICKER_VARIANTS[variantIndex]}
-                        title={localize("dateTimePicker-title")}
-                        type={DATE_TIME_PICKER_TYPES[typeIndex]}
-                        isDisabled={isDisabled}
-                    />
-                </View>
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = DATE_TIME_PICKER_TYPES.indexOf(
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <DateTimePicker
+                    spreadBehaviour={
+                        DATE_TIME_PICKER_SPREAD_BEHAVIOURS[spreadIndex]
+                    }
+                    pickerType={
+                        DATE_TIME_PICKER_PICKER_TYPES[pickerTypeIndex]
+                    }
+                    variant={DATE_TIME_PICKER_VARIANTS[variantIndex]}
+                    title={localize("dateTimePicker-title")}
+                    type={DATE_TIME_PICKER_TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                />
+            </View>
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = DATE_TIME_PICKER_TYPES.indexOf(
                                     selectedItems[0]!
                                         .__key as IDateTimePickerProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            DATE_TIME_PICKER_TYPES_DATA[typeIndex]
-                                ? [DATE_TIME_PICKER_TYPES_DATA[typeIndex]]
-                                : []
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        title={localize("dateTimePicker-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        data={DATE_TIME_PICKER_TYPES_DATA}
-                        keyExtractor={(item) => item.__key}
-                        spreadBehaviour="free"
-                    />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index =
+                    }}
+                    initialSelectedItems={
+
+                        DATE_TIME_PICKER_TYPES_DATA[typeIndex]
+
+                            ? [
+                                DATE_TIME_PICKER_TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("dateTimePicker-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    data={DATE_TIME_PICKER_TYPES_DATA}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index =
                                     DATE_TIME_PICKER_SPREAD_BEHAVIOURS.indexOf(
                                         selectedItems[0]!
                                             .__key as IDateTimePickerProps["spreadBehaviour"],
                                     );
-                                if (index !== -1) setSpreadIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA[spreadIndex]
-                                ? [
+                            if (index !== -1) setSpreadIndex(index);
+                        }
+                    }}
+                    initialSelectedItems={
+                        DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA[spreadIndex]
+                            ? [
                                     DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA[
                                         spreadIndex
-                                    ],
-                                ]
-                                : []
-                        }
-                        title={localize("dateTimePicker-changeSpread")}
-                        data={DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        spreadBehaviour="free"
-                    />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index =
+                                    ]!
+                            ]
+                            : []
+                    }
+                    title={localize("dateTimePicker-changeSpread")}
+                    data={DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index =
                                     DATE_TIME_PICKER_PICKER_TYPES.indexOf(
                                         selectedItems[0]!
                                             .__key as DateTimePickerPickerType,
                                     );
-                                if (index !== -1) setPickerTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            DATE_TIME_PICKER_PICKER_TYPES_DATA[pickerTypeIndex]
-                                ? [
+                            if (index !== -1) setPickerTypeIndex(index);
+                        }
+                    }}
+                    initialSelectedItems={
+                        DATE_TIME_PICKER_PICKER_TYPES_DATA[pickerTypeIndex]
+                            ? [
                                     DATE_TIME_PICKER_PICKER_TYPES_DATA[
                                         pickerTypeIndex
-                                    ],
-                                ]
-                                : []
+                                    ]!
+                            ]
+                            : []
+                    }
+                    title={localize(
+                        "dateTimePicker-changePickerType",
+                    )}
+                    data={DATE_TIME_PICKER_PICKER_TYPES_DATA}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = DATE_TIME_PICKER_VARIANTS.indexOf(
+                                    selectedItems[0]!
+                                        .__key as IDateTimePickerProps["variant"],
+                            );
+                            if (index !== -1) setVariantIndex(index);
                         }
+                    }}
+                    initialSelectedItems={
+
+                        DATE_TIME_PICKER_VARIANTS_DATA[variantIndex]
+
+                            ? [
+                                DATE_TIME_PICKER_VARIANTS_DATA[variantIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("dateTimePicker-changeVariant")}
+                    titleExtractor={(item) => item.__title}
+                    data={DATE_TIME_PICKER_VARIANTS_DATA}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <Switch
                         title={localize(
-                            "dateTimePicker-changePickerType",
+                            "dateTimePicker-toggleDisabled",
                         )}
-                        data={DATE_TIME_PICKER_PICKER_TYPES_DATA}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        spreadBehaviour="free"
-                    />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = DATE_TIME_PICKER_VARIANTS.indexOf(
-                                    selectedItems[0]!
-                                        .__key as IDateTimePickerProps["variant"],
-                                );
-                                if (index !== -1) setVariantIndex(index);
-                            }
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
                         }}
-                        initialSelectedItems={
-                            DATE_TIME_PICKER_VARIANTS_DATA[variantIndex]
-                                ? [DATE_TIME_PICKER_VARIANTS_DATA[variantIndex]]
-                                : []
-                        }
-                        title={localize("dateTimePicker-changeVariant")}
-                        titleExtractor={(item) => item.__title}
-                        data={DATE_TIME_PICKER_VARIANTS_DATA}
-                        keyExtractor={(item) => item.__key}
                         spreadBehaviour="free"
+                        isActive={isDisabled}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize(
-                                "dateTimePicker-toggleDisabled",
-                            )}
-                            onPress={() => {
-                                setIsDisabled(!isDisabled);
-                            }}
-                            isActive={isDisabled}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default DateTimePickerPage;

example/src/pages/components/dateTimePicker/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/dateTimeSheet/index.tsx

@@ -18,7 +18,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -42,72 +42,66 @@ const DateTimeSheetPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-dateTimeSheet")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-dateTimeSheet")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("dateTimeSheet-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-dateTimeSheet")}
-                </Text>
-                <Button
-                    onPress={() => setIsActive(true)}
-                    title="Open DateTime Sheet"
-                    spreadBehaviour="stretch"
-                />
-                <DateTimeSheet
-                    selectMultipleObject={() => {}}
-                    selectDateRule={() => {}}
-                    selectObject={() => {}}
-                    isWorkWithRealtime={true}
-                    dateTimePickerKey="test"
-                    bottomSheetRef={bottomSheetRef}
-                    setIsActive={setIsActive}
-                    cancel={() => setIsActive(false)}
-                    clean={() => {}}
-                    ok={() => setIsActive(false)}
-                    pickerType="date"
-                    isLoading={false}
-                    isActive={isActive}
-                    variant="single"
-                />
-            </View>
-        </PageContainer>
-    );
+                {localize("dateTimeSheet-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-dateTimeSheet")}
+            </Text>
+            <Button
+                onPress={() => setIsActive(true)}
+                title="Open DateTime Sheet"
+                spreadBehaviour="stretch"
+            />
+            <DateTimeSheet
+                selectMultipleObject={() => {}}
+                selectDateRule={() => {}}
+                selectObject={() => {}}
+                isWorkWithRealtime={true}
+                dateTimePickerKey="test"
+                bottomSheetRef={bottomSheetRef}
+                setIsActive={setIsActive}
+                cancel={() => setIsActive(false)}
+                clean={() => {}}
+                ok={() => setIsActive(false)}
+                pickerType="date"
+                isLoading={false}
+                isActive={isActive}
+                variant="single"
+            />
+        </View>
+    </PageContainer>;
 };
 export default DateTimeSheetPage;

example/src/pages/components/dateTimeSheet/stylesheet.ts

@@ -15,6 +15,28 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/dialog/index.tsx

@@ -14,14 +14,13 @@ import {
     TextInput,
     Button,
     Dialog,
-    Header
-    ,
+    Header,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -76,135 +75,140 @@ const DialogPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("dialog-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("dialog-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("dialog-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("dialog-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Button
-                        title={localize("dialog-openDialog")}
-                        onPress={() => setIsVisible(true)}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("dialog-enterText")}
-                    title={localize("dialog-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
-                />
-                <TextInput
-                    placeholder={localize("dialog-enterContentText")}
-                    title={localize("dialog-contentLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setContent}
-                    value={content}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Button
+                    title={localize("dialog-openDialog")}
+                    onPress={() => setIsVisible(true)}
                 />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = DIALOG_VARIANTS.indexOf(
+            </View>
+            <TextInput
+                placeholder={localize("dialog-enterText")}
+                title={localize("dialog-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <TextInput
+                placeholder={localize("dialog-enterContentText")}
+                title={localize("dialog-contentLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setContent}
+                value={content}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = DIALOG_VARIANTS.indexOf(
                                     selectedItems[0]!
                                         .__key as IDialogProps["variant"],
-                                );
-                                if (index !== -1) setVariantIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            DIALOG_VARIANTS_DATA[variantIndex]
-                                ? [DIALOG_VARIANTS_DATA[variantIndex]]
-                                : []
+                            );
+                            if (index !== -1) setVariantIndex(index);
                         }
-                        title={localize("dialog-changeVariant")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        data={DIALOG_VARIANTS_DATA}
-                        spreadBehaviour="free"
-                    />
-                </View>
-            </View>
-            <Dialog
-                secondaryButtonProps={{
-                    onPress: ({
-                        closeAnimation
-                    }) => {
-                        closeAnimation();
-                    }
-                }}
-                primaryButtonProps={{
-                    onPress: ({
-                        closeAnimation
-                    }) => {
-                        closeAnimation();
+                    }}
+                    initialSelectedItems={
+
+                        DIALOG_VARIANTS_DATA[variantIndex]
+
+                            ? [
+                                DIALOG_VARIANTS_DATA[variantIndex]!
+                            ]
+
+                            : []
+
                     }
-                }}
-                onOverlayPress={({
+                    title={localize("dialog-changeVariant")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    data={DIALOG_VARIANTS_DATA}
+                    spreadBehaviour="free"
+                />
+            </View>
+        </View>
+        <Dialog
+            secondaryButtonProps={{
+                onPress: ({
                     closeAnimation
                 }) => {
                     closeAnimation();
-                }}
-                onClosed={() => {
-                    setIsVisible(false);
-                }}
-                variant={DIALOG_VARIANTS[variantIndex]}
-                isVisible={isVisible}
-                content={content}
-                title={title}
-            />
-        </PageContainer>
-    );
+                }
+            }}
+            primaryButtonProps={{
+                onPress: ({
+                    closeAnimation
+                }) => {
+                    closeAnimation();
+                }
+            }}
+            onOverlayPress={({
+                closeAnimation
+            }) => {
+                closeAnimation();
+            }}
+            onClosed={() => {
+                setIsVisible(false);
+            }}
+            variant={DIALOG_VARIANTS[variantIndex]}
+            isVisible={isVisible}
+            content={content}
+            title={title}
+        />
+    </PageContainer>;
 };
 export default DialogPage;

example/src/pages/components/dialog/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/embeddedMenu/index.tsx

@@ -11,17 +11,19 @@ import {
     PageContainer,
     EmbeddedMenu,
     Button,
-    Header
-    ,
+    Header,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
+import type {
+    IEmbeddedMenuRef
+} from "ncore-ui-kit";
 import {
     SettingsIcon,
     HomeIcon
@@ -34,75 +36,75 @@ const EmbeddedMenuPage = () => {
 
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
-    const menuRef = useRef<any>(null);
+    const menuRef = useRef<IEmbeddedMenuRef>(null);
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("embeddedMenu-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("embeddedMenu-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <View style={stylesheet.container}>
-            <EmbeddedMenu
-                navigation={navigation as unknown as NCoreUIKit.Navigation}
-                buttons={[
-                    {
-                        title: localize("embeddedMenu-settings"),
-                        icon: ({
-                            color
-                        }) => <SettingsIcon color={color} />
-                    },
-                    {
-                        title: localize("embeddedMenu-home"),
-                        icon: ({
-                            color
-                        }) => <HomeIcon color={color} />
-                    }
-                ]}
-                id="embedded-menu-page-example"
-                ref={menuRef}
-            />
-            <PageContainer
-                scrollViewProps={{
-                    contentContainerStyle: stylesheet.scrollContent
-                }}
-                scrollViewStyle={[
-                    stylesheet.container
+    return <View
+        style={stylesheet.container}
+    >
+        <EmbeddedMenu
+            navigation={navigation as unknown as NCoreUIKit.Navigation}
+            buttons={[
+                {
+                    title: localize("embeddedMenu-settings"),
+                    icon: ({
+                        color
+                    }) => <SettingsIcon
+                        color={color}
+                    />
+                },
+                {
+                    title: localize("embeddedMenu-home"),
+                    icon: ({
+                        color
+                    }) => <HomeIcon
+                        color={color}
+                    />
+                }
+            ]}
+            id="embedded-menu-page-example"
+            ref={menuRef}
+        />
+        <PageContainer
+            scrollViewProps={{
+                contentContainerStyle: stylesheet.scrollContent
+            }}
+            scrollViewStyle={[
+                stylesheet.container
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
                 ]}
-                isWorkWithHeaderSpace={false}
-                isScrollable={true}
             >
-                <View
-                    style={[
-                        stylesheet.contentContainer
-                    ]}
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={stylesheet.descText}
                 >
-                    <Text
-                        variant="bodyMediumSize"
-                        color="mid"
-                        style={{
-                            marginBottom: 20
-                        }}
-                    >
-                        {localize("embeddedMenu-desc")}
-                    </Text>
-                    <Button
-                        title={localize("embeddedMenu-openMenu")}
-                        onPress={() => menuRef.current?.open()}
-                        spreadBehaviour="stretch"
-                    />
-                </View>
-            </PageContainer>
-        </View>
-    );
+                    {localize("embeddedMenu-desc")}
+                </Text>
+                <Button
+                    title={localize("embeddedMenu-openMenu")}
+                    onPress={() => menuRef.current?.open()}
+                    spreadBehaviour="stretch"
+                />
+            </View>
+        </PageContainer>
+    </View>;
 };
 export default EmbeddedMenuPage;

example/src/pages/components/embeddedMenu/stylesheet.ts

@@ -11,7 +11,30 @@ const stylesheet = StyleSheet.create({
         padding: 20
     },
     scrollContent: {
-        flexGrow: 1
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/header/index.tsx

@@ -12,14 +12,13 @@ import {
     PageContainer,
     TextInput,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -50,82 +49,74 @@ const HeaderPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("header-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("header-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("header-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("header-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Header
-                        isWrapSafeareaContext={false}
-                        isGoBackEnable={isGoBackEnable}
-                        navigation={navigation}
-                        title={title}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("header-enterTitle")}
-                    title={localize("header-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Header
+                    isWrapSafeareaContext={false}
+                    isGoBackEnable={isGoBackEnable}
+                    navigation={navigation}
+                    title={title}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("header-enterTitle")}
+                title={localize("header-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={stylesheet.rowSpaceBetween}
+            >
+                <Switch
+                    onPress={() => setIsGoBackEnable(!isGoBackEnable)}
+                    title={localize("header-toggleGoBack")}
+                    isActive={isGoBackEnable}
+                    spreadBehaviour="free"
                 />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <Switch
-                        title={localize("header-toggleGoBack")}
-                        onPress={() => setIsGoBackEnable(!isGoBackEnable)}
-                        isActive={isGoBackEnable}
-                    />
-                </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default HeaderPage;

example/src/pages/components/header/stylesheet.ts

@@ -12,6 +12,46 @@ const stylesheet = StyleSheet.create({
     },
     scrollContent: {
         flexGrow: 1
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    previewContainerNoAlign: {
+        justifyContent: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        minHeight: 120
+    },
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/highlightButton/index.tsx

@@ -14,14 +14,13 @@ import {
     SelectBox,
     TextInput,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -123,198 +122,211 @@ const HighlightButtonPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("highlightButton-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("highlightButton-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("highlightButton-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("highlightButton-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <HighlightButton
-                        icon={
-                            showIcon
-                                ? ({
-                                    color,
-                                    size
-                                }) => (
-                                    <HomeIcon
-                                        color={colors.content.icon[color]}
-                                        size={size}
-                                    />
-                                )
-                                : undefined
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <HighlightButton
+                    icon={
+                        showIcon
+                            ? ({
+                                color,
+                                size
+                            }) => <HomeIcon
+                                color={colors.content.icon[color]}
+                                size={size}
+                            />
+
+                            : undefined
+                    }
+                    title={
+                        title || localize("highlightButton-example")
+                    }
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    isCustomPadding={isCustomPadding}
+                    iconDirection={iconDirection}
+                    type={TYPES[typeIndex]}
+                    size={SIZES[sizeIndex]}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    onPress={() => {}}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("highlightButton-enterText")}
+                title={localize("highlightButton-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as IHighlightButtonProps["type"],
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        title={
-                            title || localize("highlightButton-example")
+                    }}
+                    initialSelectedItems={
+
+                        TYPES_DATA[typeIndex]
+
+                            ? [
+                                TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("highlightButton-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
+                />
+                <HighlightButton
+                    onPress={() => {
+                        setSpreadIndex((prev) =>
+                            prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                ? 0
+                                : prev + 1,
+                        );
+                    }}
+                    title={
+                        `${localize("highlightButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = SIZES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as IHighlightButtonProps["size"],
+                            );
+                            if (index !== -1) setSizeIndex(index);
                         }
-                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                        isCustomPadding={isCustomPadding}
-                        iconDirection={iconDirection}
-                        type={TYPES[typeIndex]}
-                        size={SIZES[sizeIndex]}
-                        isDisabled={isDisabled}
-                        isLoading={isLoading}
-                        onPress={() => {}}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("highlightButton-enterText")}
-                    title={localize("highlightButton-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
                     }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    initialSelectedItems={
+
+                        SIZES_DATA[sizeIndex]
+
+                            ? [
+                                SIZES_DATA[sizeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("highlightButton-changeSize")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={SIZES_DATA}
                 />
                 <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
+                    style={stylesheet.switchesContainer}
                 >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = TYPES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as unknown as IHighlightButtonProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                    <Switch
+                        onPress={() =>
+                            setIconDirection(
+                                iconDirection === "left" ? "right" : "left",
+                            )
                         }
-                        title={localize("highlightButton-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                        title={localize(
+                            "highlightButton-toggleIconDir",
+                        )}
+                        isActive={iconDirection === "right"}
                         spreadBehaviour="free"
-                        data={TYPES_DATA}
                     />
-                    <HighlightButton
-                        onPress={() => {
-                            setSpreadIndex((prev) =>
-                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
-                                    ? 0
-                                    : prev + 1,
-                            );
-                        }}
-                        title={
-                            `${localize("highlightButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                        }
+                    <Switch
+                        title={localize(
+                            "highlightButton-toggleIcon",
+                        )}
+                        onPress={() => setShowIcon(!showIcon)}
                         spreadBehaviour="free"
+                        isActive={showIcon}
                     />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = SIZES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as unknown as IHighlightButtonProps["size"],
-                                );
-                                if (index !== -1) setSizeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            SIZES_DATA[sizeIndex] ? [SIZES_DATA[sizeIndex]] : []
-                        }
-                        title={localize("highlightButton-changeSize")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    <Switch
+                        title={localize(
+                            "highlightButton-toggleLoading",
+                        )}
+                        onPress={() => setIsLoading(!isLoading)}
+                        spreadBehaviour="free"
+                        isActive={isLoading}
+                    />
+                    <Switch
+                        title={localize(
+                            "highlightButton-toggleDisabled",
+                        )}
+                        onPress={() => setIsDisabled(!isDisabled)}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <Switch
+                        title={localize(
+                            "highlightButton-toggleCustomPadding",
+                        )}
+                        onPress={() => setIsCustomPadding(!isCustomPadding)}
+                        isActive={isCustomPadding}
                         spreadBehaviour="free"
-                        data={SIZES_DATA}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            onPress={() =>
-                                setIconDirection(
-                                    iconDirection === "left" ? "right" : "left",
-                                )
-                            }
-                            title={localize(
-                                "highlightButton-toggleIconDir",
-                            )}
-                            isActive={iconDirection === "right"}
-                        />
-                        <Switch
-                            title={localize(
-                                "highlightButton-toggleIcon",
-                            )}
-                            onPress={() => setShowIcon(!showIcon)}
-                            isActive={showIcon}
-                        />
-                        <Switch
-                            title={localize(
-                                "highlightButton-toggleLoading",
-                            )}
-                            onPress={() => setIsLoading(!isLoading)}
-                            isActive={isLoading}
-                        />
-                        <Switch
-                            title={localize(
-                                "highlightButton-toggleDisabled",
-                            )}
-                            onPress={() => setIsDisabled(!isDisabled)}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            title={localize(
-                                "highlightButton-toggleCustomPadding",
-                            )}
-                            onPress={() => setIsCustomPadding(!isCustomPadding)}
-                            isActive={isCustomPadding}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default HighlightButtonPage;

example/src/pages/components/highlightButton/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/loading/index.tsx

@@ -12,14 +12,13 @@ import {
     PageContainer,
     SelectBox,
     Loading,
-    Header
-    ,
+    Header,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -59,83 +58,92 @@ const LoadingPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("loading-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("loading-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("loading-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("loading-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Loading size={SIZES[sizeIndex]} />
-                </View>
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = SIZES.indexOf(
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Loading
+                    size={SIZES[sizeIndex]}
+                />
+            </View>
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = SIZES.indexOf(
                                     Number(
                                         selectedItems[0]!.__key,
                                     ) as ILoadingProps["size"],
-                                );
-                                if (index !== -1) setSizeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            SIZES_DATA[sizeIndex] ? [SIZES_DATA[sizeIndex]] : []
+                            );
+                            if (index !== -1) setSizeIndex(index);
                         }
-                        title={localize("loading-changeSize")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        spreadBehaviour="free"
-                        data={SIZES_DATA}
-                    />
-                </View>
+                    }}
+                    initialSelectedItems={
+
+                        SIZES_DATA[sizeIndex]
+
+                            ? [
+                                SIZES_DATA[sizeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("loading-changeSize")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={SIZES_DATA}
+                />
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default LoadingPage;

example/src/pages/components/loading/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/localeSwitcher/index.tsx

@@ -15,7 +15,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -29,52 +29,46 @@ const LocaleSwitcherPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-localeSwitcher")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-localeSwitcher")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("localeSwitcher-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-localeSwitcher")}
-                </Text>
-                <LocaleSwitcher />
-            </View>
-        </PageContainer>
-    );
+                {localize("localeSwitcher-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-localeSwitcher")}
+            </Text>
+            <LocaleSwitcher />
+        </View>
+    </PageContainer>;
 };
 export default LocaleSwitcherPage;

example/src/pages/components/localeSwitcher/stylesheet.ts

@@ -8,13 +8,36 @@ const stylesheet = StyleSheet.create({
         width: "100%"
     },
     scrollContent: {
-        flexGrow: 1
+        justifyContent: "center",
+        alignItems: "center"
     },
     container: {
         flex: 1
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/mainHeader/index.tsx

@@ -12,14 +12,13 @@ import {
     PageContainer,
     MainHeader,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -38,11 +37,6 @@ const MainHeaderPage = () => {
 
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
-    const [
-        isWorkWithBackButton,
-        setIsWorkWithBackButton
-    ] = useState<boolean>(true);
-
     const [
         isWorkWithSeperator,
         setIsWorkWithSeperator
@@ -55,82 +49,70 @@ const MainHeaderPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("mainHeader-title")}
-                    isGoBackEnable={isWorkWithBackButton}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                />
-            ),
+            header: () => <Header
+                title={localize("mainHeader-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
-    }, [isWorkWithBackButton]);
+    }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("mainHeader-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("mainHeader-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <MainHeader
-                        isWorkWithSafeAreaView={false}
-                        isWorkWithSeperator={isWorkWithSeperator}
-                        isWorkWithSticky={isWorkWithSticky}
-                        isWorkWithPortal={false}
-                    />
-                </View>
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <Switch
-                        title={localize("mainHeader-toggleGoBack")}
-                        onPress={() => setIsWorkWithBackButton(!isWorkWithBackButton)}
-                        isActive={isWorkWithBackButton}
-                    />
-                    <Switch
-                        title={localize("mainHeader-toggleSeperator")}
-                        onPress={() => setIsWorkWithSeperator(!isWorkWithSeperator)}
-                        isActive={isWorkWithSeperator}
-                    />
-                    <Switch
-                        title={localize("mainHeader-toggleSticky")}
-                        onPress={() => setIsWorkWithSticky(!isWorkWithSticky)}
-                        isActive={isWorkWithSticky}
-                    />
-                </View>
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <MainHeader
+                    isWorkWithSafeAreaView={false}
+                    isWorkWithSeperator={isWorkWithSeperator}
+                    isWorkWithSticky={isWorkWithSticky}
+                    isWorkWithPortal={false}
+                />
+            </View>
+            <View
+                style={stylesheet.rowSpaceBetween}
+            >
+                <Switch
+                    onPress={() => setIsWorkWithSeperator(!isWorkWithSeperator)}
+                    title={localize("mainHeader-toggleSeperator")}
+                    isActive={isWorkWithSeperator}
+                    spreadBehaviour="free"
+                />
+                <Switch
+                    onPress={() => setIsWorkWithSticky(!isWorkWithSticky)}
+                    title={localize("mainHeader-toggleSticky")}
+                    isActive={isWorkWithSticky}
+                    spreadBehaviour="free"
+                />
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default MainHeaderPage;

example/src/pages/components/mainHeader/stylesheet.ts

@@ -12,6 +12,42 @@ const stylesheet = StyleSheet.create({
     },
     scrollContent: {
         flexGrow: 1
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        minHeight: 120
+    },
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/markdownViewer/index.tsx

@@ -12,14 +12,13 @@ import {
     MarkdownViewer,
     PageContainer,
     TextAreaInput,
-    Header
-    ,
+    Header,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -47,61 +46,62 @@ const MarkdownViewerPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("markdownViewer-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("markdownViewer-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("markdownViewer-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("markdownViewer-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        minHeight: 120
-                    }}
-                >
-                    <MarkdownViewer content={content} />
-                </View>
-                <TextAreaInput
-                    placeholder={localize("markdownViewer-enterContent")}
-                    title={localize("markdownViewer-contentLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setContent}
-                    value={content}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <MarkdownViewer
+                    content={content}
                 />
             </View>
-        </PageContainer>
-    );
+            <TextAreaInput
+                placeholder={localize("markdownViewer-enterContent")}
+                title={localize("markdownViewer-contentLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setContent}
+                isUpdateOnRealtime={true}
+                value={content}
+            />
+        </View>
+    </PageContainer>;
 };
 export default MarkdownViewerPage;

example/src/pages/components/markdownViewer/stylesheet.ts

@@ -13,6 +13,34 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    paddedMarginContainer: {
+        minHeight: 120
     }
 });
 export default stylesheet;

example/src/pages/components/menu/index.tsx

@@ -11,14 +11,13 @@ import {
     PageContainer,
     Button,
     Header,
-    Menu
-    ,
+    Menu,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -41,69 +40,67 @@ const MenuPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    isWrapSafeareaContext={false}
-                    title={localize("menu-title")}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                isWrapSafeareaContext={false}
+                title={localize("menu-title")}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("menu-desc")}
-                </Text>
-                <Button
-                    title={localize("menu-openMenu")}
-                    onPress={() => menuRef.current?.open()}
-                    spreadBehaviour="stretch"
-                />
-            </View>
-            <Menu
-                buttons={[
-                    {
-                        title: localize("menu-settings"),
-                        icon: ({
-                            color
-                        }) => <SettingsIcon color={color} />
-                    },
-                    {
-                        title: localize("menu-home"),
-                        icon: ({
-                            color
-                        }) => <HomeIcon color={color} />
-                    }
-                ]}
-                navigation={navigation as unknown as NCoreUIKit.Navigation}
-                id="menu-page-example"
-                ref={menuRef}
+                {localize("menu-desc")}
+            </Text>
+            <Button
+                title={localize("menu-openMenu")}
+                onPress={() => menuRef.current?.open()}
+                spreadBehaviour="stretch"
             />
-        </PageContainer>
-    );
+        </View>
+        <Menu
+            buttons={[
+                {
+                    title: localize("menu-settings"),
+                    icon: ({
+                        color
+                    }) => <SettingsIcon
+                        color={color}
+                    />
+                },
+                {
+                    title: localize("menu-home"),
+                    icon: ({
+                        color
+                    }) => <HomeIcon
+                        color={color}
+                    />
+                }
+            ]}
+            navigation={navigation as unknown as NCoreUIKit.Navigation}
+            id="menu-page-example"
+            ref={menuRef}
+        />
+    </PageContainer>;
 };
 export default MenuPage;

example/src/pages/components/menu/stylesheet.ts

@@ -11,7 +11,30 @@ const stylesheet = StyleSheet.create({
         padding: 20
     },
     scrollContent: {
-        flexGrow: 1
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/modal/index.tsx

@@ -17,7 +17,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -36,75 +36,69 @@ const ModalPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-modal")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-modal")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("modal-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-modal")}
-                </Text>
-                <Button
-                    onPress={() => setIsActive(true)}
-                    spreadBehaviour="stretch"
-                    title="Open Modal"
-                />
-                <Modal
-                    onClosed={() => setIsActive(false)}
-                    isActive={isActive}
-                    id="example-modal"
+                {localize("modal-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-modal")}
+            </Text>
+            <Button
+                onPress={() => setIsActive(true)}
+                spreadBehaviour="stretch"
+                title="Open Modal"
+            />
+            <Modal
+                onOverlayPress={() => setIsActive(false)}
+                isActive={isActive}
+                id="example-modal"
+            >
+                <View
+                    style={stylesheet.modalContent}
                 >
-                    <View
-                        style={stylesheet.modalContent}
-                    >
-                        <Text>
-                            This is an example modal content.
-                        </Text>
-                        <Button
-                            onPress={() => setIsActive(false)}
-                            spreadBehaviour="stretch"
-                            title="Close Modal"
-                            type="primary"
-                        />
-                    </View>
-                </Modal>
-            </View>
-        </PageContainer>
-    );
+                    <Text>
+                        This is an example modal content.
+                    </Text>
+                    <Button
+                        onPress={() => setIsActive(false)}
+                        spreadBehaviour="stretch"
+                        title="Close Modal"
+                        type="primary"
+                    />
+                </View>
+            </Modal>
+        </View>
+    </PageContainer>;
 };
 export default ModalPage;

example/src/pages/components/modal/stylesheet.ts

@@ -21,6 +21,28 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/monthSelector/index.tsx

@@ -16,7 +16,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -35,57 +35,51 @@ const MonthSelectorPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-monthSelector")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-monthSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("monthSelector-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-monthSelector")}
-                </Text>
-                <MonthSelector
-                    setIsSheetContentReady={setIsSheetContentReady}
-                    selectMultipleObject={() => {}}
-                    selectObject={() => {}}
-                    variant="single"
-                />
-            </View>
-        </PageContainer>
-    );
+                {localize("monthSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-monthSelector")}
+            </Text>
+            <MonthSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                variant="single"
+            />
+        </View>
+    </PageContainer>;
 };
 export default MonthSelectorPage;

example/src/pages/components/monthSelector/stylesheet.ts

@@ -15,6 +15,28 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/notificationIndicator/index.tsx

@@ -14,14 +14,13 @@ import {
     SelectBox,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -75,115 +74,113 @@ const NotificationIndicatorPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("notificationIndicator-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("notificationIndicator-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("notificationIndicator-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("notificationIndicator-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <NotificationIndicator
+                    type={TYPES[typeIndex]}
+                    isVisible={isShowCount}
+                    title={count}
                 >
-                    <NotificationIndicator
-                        type={TYPES[typeIndex]}
-                        isVisible={isShowCount}
-                        title={count}
-                    >
-                        <View
-                            style={{
-                                backgroundColor: "transparent",
+                    <View
+                        style={[
+                            stylesheet.borderedCard,
+                            {
                                 borderRadius: radiuses.form,
                                 padding: spaces.spacingSm
-                            }}
-                        >
-                            <BellIcon
-                                color={colors.content.icon.mid}
-                                size={32}
-                            />
-                        </View>
-                    </NotificationIndicator>
-                </View>
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = TYPES.indexOf(
+                            }
+                        ]}
+                    >
+                        <BellIcon
+                            color={colors.content.icon.mid}
+                            size={32}
+                        />
+                    </View>
+                </NotificationIndicator>
+            </View>
+            <View
+                style={[
+                    stylesheet.rowSpaceBetween,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = TYPES.indexOf(
                                     selectedItems[0]!
                                         .__key as unknown as INotificationIndicatorProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        title={localize(
-                            "notificationIndicator-changeType",
-                        )}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        spreadBehaviour="free"
-                        data={TYPES_DATA}
-                    />
-                    <Button
-                        title={localize(
-                            "notificationIndicator-addCount",
-                        )}
-                        onPress={() => setCount((prev) => prev + 1)}
-                        spreadBehaviour="free"
-                    />
-                    <Switch
-                        title={localize(
-                            "notificationIndicator-toggleShowCount",
-                        )}
-                        onPress={() => setIsShowCount(!isShowCount)}
-                        isActive={isShowCount}
-                    />
-                </View>
+                    }}
+                    initialSelectedItems={
+                        TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]!] : []
+                    }
+                    title={localize(
+                        "notificationIndicator-changeType",
+                    )}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
+                />
+                <Button
+                    title={localize(
+                        "notificationIndicator-addCount",
+                    )}
+                    onPress={() => setCount((prev) => prev + 1)}
+                    spreadBehaviour="free"
+                />
+                <Switch
+                    title={localize(
+                        "notificationIndicator-toggleShowCount",
+                    )}
+                    onPress={() => setIsShowCount(!isShowCount)}
+                    isActive={isShowCount}
+                    spreadBehaviour="free"
+                />
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default NotificationIndicatorPage;

example/src/pages/components/notificationIndicator/stylesheet.ts

@@ -13,6 +13,46 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    borderedCard: {
+        backgroundColor: "transparent"
+    },
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/numericInput/index.tsx

@@ -15,14 +15,13 @@ import {
     TextInput,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -127,197 +126,208 @@ const NumericInputPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("numericInput-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("numericInput-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("numericInput-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("numericInput-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <NumericInput
-                        icon={
-                            showIcon
-                                ? ({
-                                    color,
-                                    size
-                                }) => (
-                                    <HomeIcon
-                                        color={colors.content.icon[color]}
-                                        size={size}
-                                    />
-                                )
-                                : undefined
-                        }
-                        title={
-                            title ||
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <NumericInput
+                    icon={
+                        showIcon
+                            ? ({
+                                color,
+                                size
+                            }) => <HomeIcon
+                                color={colors.content.icon[color]}
+                                size={size}
+                            />
+
+                            : undefined
+                    }
+                    title={
+                        title ||
                             localize("numericInput-exampleTitle")
-                        }
-                        placeholder={localize(
-                            "numericInput-placeholder",
-                        )}
-                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                        variant={VARIANTS[variantIndex]}
-                        isCleanEnabled={isCleanEnabled}
-                        type={TYPES[typeIndex]}
-                        isDisabled={isDisabled}
-                        isRequired={isRequired}
-                        isOptional={isOptional}
-                        onChangeText={setVal}
-                        value={val}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("numericInput-enterTitle")}
-                    title={localize("numericInput-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    }
+                    placeholder={localize(
+                        "numericInput-placeholder",
+                    )}
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    variant={VARIANTS[variantIndex]}
+                    isCleanEnabled={isCleanEnabled}
+                    type={TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                    isRequired={isRequired}
+                    isOptional={isOptional}
+                    onChangeText={setVal}
+                    value={val}
                 />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = TYPES.indexOf(
+            </View>
+            <TextInput
+                placeholder={localize("numericInput-enterTitle")}
+                title={localize("numericInput-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = TYPES.indexOf(
                                     selectedItems[0]!
                                         .__key as unknown as INumericInputProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        title={localize("numericInput-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
-                        spreadBehaviour="free"
-                        data={TYPES_DATA}
-                    />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = VARIANTS.indexOf(
+                    }}
+                    initialSelectedItems={
+
+                        TYPES_DATA[typeIndex]
+
+                            ? [
+                                TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("numericInput-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = VARIANTS.indexOf(
                                     selectedItems[0]!
                                         .__key as unknown as INumericInputProps["variant"],
-                                );
-                                if (index !== -1) setVariantIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            VARIANTS_DATA[variantIndex]
-                                ? [VARIANTS_DATA[variantIndex]]
-                                : []
+                            );
+                            if (index !== -1) setVariantIndex(index);
                         }
-                        title={localize("numericInput-changeVariant")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    }}
+                    initialSelectedItems={
+
+                        VARIANTS_DATA[variantIndex]
+
+                            ? [
+                                VARIANTS_DATA[variantIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("numericInput-changeVariant")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={VARIANTS_DATA}
+                />
+                <Button
+                    onPress={() => {
+                        setSpreadIndex((prev) =>
+                            prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                ? 0
+                                : prev + 1,
+                        );
+                    }}
+                    title={
+                        `${localize("numericInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        title={localize("numericInput-toggleIcon")}
+                        onPress={() => setShowIcon(!showIcon)}
                         spreadBehaviour="free"
-                        data={VARIANTS_DATA}
+                        isActive={showIcon}
                     />
-                    <Button
-                        onPress={() => {
-                            setSpreadIndex((prev) =>
-                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
-                                    ? 0
-                                    : prev + 1,
-                            );
-                        }}
-                        title={
-                            `${localize("numericInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                        }
+                    <Switch
+                        title={localize(
+                            "numericInput-toggleDisabled",
+                        )}
+                        onPress={() => setIsDisabled(!isDisabled)}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <Switch
+                        onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                        title={localize("numericInput-toggleClean")}
+                        isActive={isCleanEnabled}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize(
+                            "numericInput-toggleRequired",
+                        )}
+                        onPress={() => setIsRequired(!isRequired)}
+                        spreadBehaviour="free"
+                        isActive={isRequired}
+                    />
+                    <Switch
+                        title={localize(
+                            "numericInput-toggleOptional",
+                        )}
+                        onPress={() => setIsOptional(!isOptional)}
                         spreadBehaviour="free"
+                        isActive={isOptional}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize("numericInput-toggleIcon")}
-                            onPress={() => setShowIcon(!showIcon)}
-                            isActive={showIcon}
-                        />
-                        <Switch
-                            title={localize(
-                                "numericInput-toggleDisabled",
-                            )}
-                            onPress={() => setIsDisabled(!isDisabled)}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            title={localize("numericInput-toggleClean")}
-                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
-                            isActive={isCleanEnabled}
-                        />
-                        <Switch
-                            title={localize(
-                                "numericInput-toggleRequired",
-                            )}
-                            onPress={() => setIsRequired(!isRequired)}
-                            isActive={isRequired}
-                        />
-                        <Switch
-                            title={localize(
-                                "numericInput-toggleOptional",
-                            )}
-                            onPress={() => setIsOptional(!isOptional)}
-                            isActive={isOptional}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default NumericInputPage;

example/src/pages/components/numericInput/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/pageContainer/index.tsx

@@ -14,7 +14,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -28,54 +28,48 @@ const PageContainerPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-pageContainer")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-pageContainer")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("pageContainer-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-pageContainer")}
-                </Text>
-                <Text>
-                    This entire page is already wrapped in a PageContainer!
-                </Text>
-            </View>
-        </PageContainer>
-    );
+                {localize("pageContainer-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-pageContainer")}
+            </Text>
+            <Text>
+                This entire page is already wrapped in a PageContainer!
+            </Text>
+        </View>
+    </PageContainer>;
 };
 export default PageContainerPage;

example/src/pages/components/pageContainer/stylesheet.ts

@@ -15,6 +15,28 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/paletteSwitcher/index.tsx

@@ -15,7 +15,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -29,52 +29,46 @@ const PaletteSwitcherPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-paletteSwitcher")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-paletteSwitcher")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("paletteSwitcher-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-paletteSwitcher")}
-                </Text>
-                <PaletteSwitcher />
-            </View>
-        </PageContainer>
-    );
+                {localize("paletteSwitcher-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-paletteSwitcher")}
+            </Text>
+            <PaletteSwitcher />
+        </View>
+    </PageContainer>;
 };
 export default PaletteSwitcherPage;

example/src/pages/components/paletteSwitcher/stylesheet.ts

@@ -8,13 +8,36 @@ const stylesheet = StyleSheet.create({
         width: "100%"
     },
     scrollContent: {
-        flexGrow: 1
+        justifyContent: "center",
+        alignItems: "center"
     },
     container: {
         flex: 1
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/radioButton/index.tsx

@@ -15,14 +15,13 @@ import {
     TextInput,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -94,144 +93,148 @@ const RadioButtonPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("radioButton-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("radioButton-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("radioButton-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("radioButton-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <RadioButton
-                        title={
-                            title || localize("radioButton-exampleTitle")
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <RadioButton
+                    title={
+                        title || localize("radioButton-exampleTitle")
+                    }
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    onPress={() => setIsSelected(!isSelected)}
+                    type={TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                    isChecked={isSelected}
+                    isLoading={isLoading}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("radioButton-enterTitle")}
+                title={localize("radioButton-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as IRadioButtonProps["type"],
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                        onPress={() => setIsSelected(!isSelected)}
-                        type={TYPES[typeIndex]}
-                        isDisabled={isDisabled}
-                        isChecked={isSelected}
-                        isLoading={isLoading}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("radioButton-enterTitle")}
-                    title={localize("radioButton-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
                     }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    initialSelectedItems={
+
+                        TYPES_DATA[typeIndex]
+
+                            ? [
+                                TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("radioButton-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
                 />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
+                <Button
+                    onPress={() => {
+                        setSpreadIndex((prev) =>
+                            prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                ? 0
+                                : prev + 1,
+                        );
                     }}
+                    title={
+                        `${localize("radioButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
                 >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = TYPES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as unknown as IRadioButtonProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
-                        }
-                        title={localize("radioButton-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    <Switch
+                        title={localize(
+                            "radioButton-toggleDisabled",
+                        )}
+                        onPress={() => setIsDisabled(!isDisabled)}
                         spreadBehaviour="free"
-                        data={TYPES_DATA}
+                        isActive={isDisabled}
                     />
-                    <Button
-                        onPress={() => {
-                            setSpreadIndex((prev) =>
-                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
-                                    ? 0
-                                    : prev + 1,
-                            );
-                        }}
-                        title={
-                            `${localize("radioButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                        }
+                    <Switch
+                        title={localize("radioButton-toggleLoading")}
+                        onPress={() => setIsLoading(!isLoading)}
+                        spreadBehaviour="free"
+                        isActive={isLoading}
+                    />
+                    <Switch
+                        title={localize(
+                            "radioButton-toggleSelected",
+                        )}
+                        onPress={() => setIsSelected(!isSelected)}
                         spreadBehaviour="free"
+                        isActive={isSelected}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize(
-                                "radioButton-toggleDisabled",
-                            )}
-                            onPress={() => setIsDisabled(!isDisabled)}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            title={localize("radioButton-toggleLoading")}
-                            onPress={() => setIsLoading(!isLoading)}
-                            isActive={isLoading}
-                        />
-                        <Switch
-                            title={localize(
-                                "radioButton-toggleSelected",
-                            )}
-                            onPress={() => setIsSelected(!isSelected)}
-                            isActive={isSelected}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default RadioButtonPage;

example/src/pages/components/radioButton/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/rowCard/index.tsx

@@ -13,14 +13,13 @@ import {
     TextInput,
     RowCard,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -60,122 +59,106 @@ const RowCardPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("rowCard-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("rowCard-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("rowCard-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("rowCard-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <RowCard
-                        rightIcon={showRightIcon ? ({
-                            color,
-                            size
-                        }: {
-                                    color: string;
-                                    size: number;
-                                }) => (
-                            <ChevronRightIcon
-                                        color={
-                                    colors.content.icon[
-                                                color as keyof typeof colors.content.icon
-                                    ]
-                                }
-                                        size={size}
-                            />
-                        )
-                            : undefined
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <RowCard
+                    rightIcon={showRightIcon ? ({
+                        color,
+                        size
+                    }) => <ChevronRightIcon
+                        color={
+                            colors.content.icon[
+                                        color as keyof typeof colors.content.icon
+                            ]
                         }
-                        icon={showLeftIcon ? ({
-                            color,
-                            size
-                        }: {
-                                    color: string;
-                                    size: number;
-                                }) => (
-                            <HomeIcon
-                                        color={
-                                    colors.content.icon[
-                                                color as keyof typeof colors.content.icon
-                                    ]
-                                }
-                                        size={size}
-                            />
-                        )
-                            : undefined
+                        size={size}
+                    />
+                        : undefined}
+                    icon={showLeftIcon ? ({
+                        color,
+                        size
+                    }) => <HomeIcon
+                        color={
+                            colors.content.icon[
+                                        color as keyof typeof colors.content.icon
+                            ]
                         }
-                        title={title || localize("rowCard-exampleTitle")}
-                        onPress={() => {}}
+                        size={size}
                     />
-                </View>
-                <TextInput
-                    placeholder={localize("rowCard-enterTitle")}
-                    title={localize("rowCard-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                        : undefined}
+                    title={title || localize("rowCard-exampleTitle")}
+                    onPress={() => {}}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("rowCard-enterTitle")}
+                title={localize("rowCard-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={stylesheet.switchesContainer}
+            >
+                <Switch
+                    onPress={() => setShowLeftIcon(!showLeftIcon)}
+                    title={localize("rowCard-toggleLeftIcon")}
+                    isActive={showLeftIcon}
+                    spreadBehaviour="free"
+                />
+                <Switch
+                    onPress={() => setShowRightIcon(!showRightIcon)}
+                    title={localize("rowCard-toggleRightIcon")}
+                    isActive={showRightIcon}
+                    spreadBehaviour="free"
                 />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
-                >
-                    <Switch
-                        title={localize("rowCard-toggleLeftIcon")}
-                        onPress={() => setShowLeftIcon(!showLeftIcon)}
-                        isActive={showLeftIcon}
-                    />
-                    <Switch
-                        title={localize("rowCard-toggleRightIcon")}
-                        onPress={() => setShowRightIcon(!showRightIcon)}
-                        isActive={showRightIcon}
-                    />
-                </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default RowCardPage;

example/src/pages/components/rowCard/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/selectBox/index.tsx

@@ -14,14 +14,13 @@ import {
     TextInput,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -109,187 +108,193 @@ const SelectBoxPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("selectBox-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("selectBox-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("selectBox-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("selectBox-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <SelectBox
-                        data={[
-                            {
-                                __title: "Option 1",
-                                __key: "1"
-                            },
-                            {
-                                __title: "Option 2",
-                                __key: "2"
-                            },
-                            {
-                                __title: "Option 3",
-                                __key: "3"
-                            },
-                            {
-                                __title: "Option 4",
-                                __key: "4"
-                            }
-                        ]}
-                        title={
-                            title || localize("selectBox-exampleTitle")
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    data={[
+                        {
+                            __title: "Option 1",
+                            __key: "1"
+                        },
+                        {
+                            __title: "Option 2",
+                            __key: "2"
+                        },
+                        {
+                            __title: "Option 3",
+                            __key: "3"
+                        },
+                        {
+                            __title: "Option 4",
+                            __key: "4"
+                        }
+                    ]}
+                    title={
+                        title || localize("selectBox-exampleTitle")
+                    }
+                    placeholder={localize("selectBox-placeholder")}
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    titleExtractor={(item) => item.__title}
+                    maxChoice={isMultiSelect ? 3 : 1}
+                    keyExtractor={(item) => item.__key}
+                    isCleanEnabled={isCleanEnabled}
+                    isSearchable={isSearchable}
+                    type={TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                    isOptional={isOptional}
+                    subTitle={subTitle}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("selectBox-enterTitle")}
+                title={localize("selectBox-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <TextInput
+                placeholder={localize("selectBox-enterSubTitle")}
+                title={localize("selectBox-subTitleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                onChangeText={setSubTitle}
+                spreadBehaviour="stretch"
+                value={subTitle}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as ISelectBoxProps<unknown>["type"],
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        placeholder={localize("selectBox-placeholder")}
-                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                        titleExtractor={(item) => item.__title}
-                        maxChoice={isMultiSelect ? 3 : 1}
-                        keyExtractor={(item) => item.__key}
-                        isCleanEnabled={isCleanEnabled}
-                        isSearchable={isSearchable}
-                        type={TYPES[typeIndex]}
-                        isDisabled={isDisabled}
-                        isOptional={isOptional}
-                        subTitle={subTitle}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("selectBox-enterTitle")}
-                    title={localize("selectBox-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
                     }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    initialSelectedItems={
+
+                        TYPES_DATA[typeIndex]
+
+                            ? [
+                                TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("selectBox-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
                 />
-                <TextInput
-                    placeholder={localize("selectBox-enterSubTitle")}
-                    title={localize("selectBox-subTitleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
+                <Button
+                    onPress={() => {
+                        setSpreadIndex((prev) =>
+                            prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                ? 0
+                                : prev + 1,
+                        );
                     }}
-                    onChangeText={setSubTitle}
-                    spreadBehaviour="stretch"
-                    value={subTitle}
+                    title={
+                        `${localize("selectBox-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
                 />
                 <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
+                    style={stylesheet.switchesContainer}
                 >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = TYPES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as unknown as ISelectBoxProps<unknown>["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
-                        }
-                        title={localize("selectBox-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    <Switch
+                        title={localize("selectBox-toggleDisabled")}
+                        onPress={() => setIsDisabled(!isDisabled)}
                         spreadBehaviour="free"
-                        data={TYPES_DATA}
+                        isActive={isDisabled}
                     />
-                    <Button
-                        onPress={() => {
-                            setSpreadIndex((prev) =>
-                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
-                                    ? 0
-                                    : prev + 1,
-                            );
-                        }}
-                        title={
-                            `${localize("selectBox-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                        }
+                    <Switch
+                        title={localize(
+                            "selectBox-toggleSearchable",
+                        )}
+                        onPress={() => setIsSearchable(!isSearchable)}
+                        isActive={isSearchable}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                        title={localize("selectBox-toggleClean")}
+                        isActive={isCleanEnabled}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize(
+                            "selectBox-toggleMultiSelect",
+                        )}
+                        onPress={() => setIsMultiSelect(!isMultiSelect)}
+                        isActive={isMultiSelect}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize("selectBox-toggleOptional")}
+                        onPress={() => setIsOptional(!isOptional)}
                         spreadBehaviour="free"
+                        isActive={isOptional}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize("selectBox-toggleDisabled")}
-                            onPress={() => setIsDisabled(!isDisabled)}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            title={localize(
-                                "selectBox-toggleSearchable",
-                            )}
-                            onPress={() => setIsSearchable(!isSearchable)}
-                            isActive={isSearchable}
-                        />
-                        <Switch
-                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
-                            title={localize("selectBox-toggleClean")}
-                            isActive={isCleanEnabled}
-                        />
-                        <Switch
-                            title={localize(
-                                "selectBox-toggleMultiSelect",
-                            )}
-                            onPress={() => setIsMultiSelect(!isMultiSelect)}
-                            isActive={isMultiSelect}
-                        />
-                        <Switch
-                            title={localize("selectBox-toggleOptional")}
-                            onPress={() => setIsOptional(!isOptional)}
-                            isActive={isOptional}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default SelectBoxPage;

example/src/pages/components/selectBox/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/selectSheet/index.tsx

@@ -18,7 +18,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -42,78 +42,72 @@ const SelectSheetPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-selectSheet")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-selectSheet")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("selectSheet-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-selectSheet")}
-                </Text>
-                <Button
-                    onPress={() => setIsActive(true)}
-                    spreadBehaviour="stretch"
-                    title="Open Select Sheet"
-                />
-                <SelectSheet
-                    keyExtractor={(item: { __key: string }) => item.__key}
-                    selectObject={() => {}}
-                    setSearchText={() => {}}
-                    setIsLoading={() => {}}
-                    isWorkWithRealtime={true}
-                    selectBoxKey="example"
-                    bottomSheetRef={bottomSheetRef}
-                    setIsMoreLoading={() => {}}
-                    setIsActive={setIsActive}
-                    cancel={() => setIsActive(false)}
-                    ok={() => setIsActive(false)}
-                    mainSelectedItems={[]}
-                    cleanAll={() => {}}
-                    selectAll={() => {}}
-                    searchedData={[]}
-                    searchText=""
-                    isLoading={false}
-                    isMoreLoading={false}
-                    isActive={isActive}
-                    data={[]}
-                />
-            </View>
-        </PageContainer>
-    );
+                {localize("selectSheet-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-selectSheet")}
+            </Text>
+            <Button
+                onPress={() => setIsActive(true)}
+                spreadBehaviour="stretch"
+                title="Open Select Sheet"
+            />
+            <SelectSheet
+                keyExtractor={(item: { __key: string }) => item.__key}
+                selectObject={() => {}}
+                setSearchText={() => {}}
+                setIsLoading={() => {}}
+                isWorkWithRealtime={true}
+                selectBoxKey="example"
+                bottomSheetRef={bottomSheetRef}
+                setIsMoreLoading={() => {}}
+                setIsActive={setIsActive}
+                cancel={() => setIsActive(false)}
+                ok={() => setIsActive(false)}
+                mainSelectedItems={[]}
+                cleanAll={() => {}}
+                selectAll={() => {}}
+                searchedData={[]}
+                searchText=""
+                isLoading={false}
+                isMoreLoading={false}
+                isActive={isActive}
+                data={[]}
+            />
+        </View>
+    </PageContainer>;
 };
 export default SelectSheetPage;

example/src/pages/components/selectSheet/stylesheet.ts

@@ -15,6 +15,28 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/seperator/index.tsx

@@ -12,14 +12,13 @@ import {
     PageContainer,
     Seperator,
     TextInput,
-    Header
-    ,
+    Header,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -45,62 +44,61 @@ const SeperatorPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("seperator-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("seperator-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("seperator-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("seperator-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Seperator title={title} />
-                </View>
-                <TextInput
-                    placeholder={localize("seperator-enterTitle")}
-                    title={localize("seperator-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Seperator
+                    title={title}
                 />
             </View>
-        </PageContainer>
-    );
+            <TextInput
+                placeholder={localize("seperator-enterTitle")}
+                title={localize("seperator-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+        </View>
+    </PageContainer>;
 };
 export default SeperatorPage;

example/src/pages/components/seperator/stylesheet.ts

@@ -13,6 +13,35 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        minHeight: 120
     }
 });
 export default stylesheet;

example/src/pages/components/siteLogo/index.tsx

@@ -13,14 +13,13 @@ import {
     TextInput,
     SiteLogo,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -57,92 +56,93 @@ const SiteLogoPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("siteLogo-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("siteLogo-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("siteLogo-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("siteLogo-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <SiteLogo
-                        imageUrl={
-                            activeTheme.indexOf("dark") !== -1
-                                ? "http://ncore.nibgat.space/assets/images/darklogo.png"
-                                : "http://ncore.nibgat.space/assets/images/ncorelogo.png"
-                        }
-                        subTitle={
-                            subTitle ||
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SiteLogo
+                    imageUrl={
+                        activeTheme.indexOf("dark") !== -1
+                            ? "http://ncore.nibgat.space/assets/images/darklogo.png"
+                            : "http://ncore.nibgat.space/assets/images/ncorelogo.png"
+                    }
+                    subTitle={
+                        subTitle ||
                             localize("siteLogo-exampleSubTitle")
-                        }
-                        title={
-                            title || localize("siteLogo-exampleTitle")
-                        }
-                        isShowIcon={isShowIcon}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("siteLogo-enterTitle")}
-                    title={localize("siteLogo-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
-                />
-                <TextInput
-                    placeholder={localize("siteLogo-enterSubTitle")}
-                    title={localize("siteLogo-subTitleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    onChangeText={setSubTitle}
-                    spreadBehaviour="stretch"
-                    value={subTitle}
-                />
-                <Switch
-                    title={localize("siteLogo-toggleIcon")}
-                    onPress={() => setIsShowIcon(!isShowIcon)}
-                    isActive={isShowIcon}
+                    }
+                    title={
+                        title || localize("siteLogo-exampleTitle")
+                    }
+                    isShowIcon={isShowIcon}
                 />
             </View>
-        </PageContainer>
-    );
+            <TextInput
+                placeholder={localize("siteLogo-enterTitle")}
+                title={localize("siteLogo-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <TextInput
+                placeholder={localize("siteLogo-enterSubTitle")}
+                title={localize("siteLogo-subTitleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                onChangeText={setSubTitle}
+                spreadBehaviour="stretch"
+                value={subTitle}
+            />
+            <Switch
+                onPress={() => setIsShowIcon(!isShowIcon)}
+                title={localize("siteLogo-toggleIcon")}
+                spreadBehaviour="free"
+                isActive={isShowIcon}
+            />
+        </View>
+    </PageContainer>;
 };
 export default SiteLogoPage;

example/src/pages/components/siteLogo/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/snackBar/index.tsx

@@ -15,7 +15,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -29,63 +29,56 @@ const SnackBarPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-snackBar")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-snackBar")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("snackBar-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("snackBar-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-snackBar")}
-                </Text>
+                {localize("components-snackBar")}
+            </Text>
 
-                <View style={{
-                    position: "relative",
-                    height: 200
-                }}>
-                    <SnackBar
-                        title="This is an example SnackBar"
-                        subTitle="This is an example subtitle"
-                        type="primary"
-                        id="example-snackbar"
-                    />
-                </View>
+            <View
+                style={stylesheet.customContainer}
+            >
+                <SnackBar
+                    title="This is an example SnackBar"
+                    subTitle="This is an example subtitle"
+                    type="primary"
+                    id="example-snackbar"
+                />
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default SnackBarPage;

example/src/pages/components/snackBar/stylesheet.ts

@@ -15,6 +15,35 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    customContainer: {
+        position: "relative",
+        height: 200
     }
 });
 export default stylesheet;

example/src/pages/components/stateCard/index.tsx

@@ -12,14 +12,13 @@ import {
     PageContainer,
     StateCard,
     TextInput,
-    Header
-    ,
+    Header,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -58,107 +57,103 @@ const StateCardPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("stateCard-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("stateCard-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("stateCard-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("stateCard-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <StateCard
-                        icon={({
-                            color,
-                            size
-                        }: {
-                            color: string;
-                            size: number;
-                        }) => (
-                            <HomeIcon
-                                color={
-                                    colors.content.icon[
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <StateCard
+                    icon={({
+                        color,
+                        size
+                    }) => <HomeIcon
+                        color={
+                            colors.content.icon[
                                         color as keyof typeof colors.content.icon
-                                    ]
-                                }
-                                size={size}
-                            />
-                        )}
-                        subTitle={
-                            subTitle ||
-                            localize("stateCard-exampleSubTitle")
-                        }
-                        title={
-                            title || localize("stateCard-exampleTitle")
+                            ]
                         }
+                        size={size}
                     />
-                </View>
-                <TextInput
-                    placeholder={localize("stateCard-enterTitle")}
-                    title={localize("stateCard-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
-                />
-                <TextInput
-                    placeholder={localize("stateCard-enterSubTitle")}
-                    title={localize("stateCard-subTitleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    onChangeText={setSubTitle}
-                    spreadBehaviour="stretch"
-                    value={subTitle}
-                />
-                <TextInput
-                    placeholder={localize("stateCard-enterValue")}
-                    title={localize("stateCard-valueLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setValue}
-                    value={value}
+                    }
+                    subTitle={
+                        subTitle ||
+                            localize("stateCard-exampleSubTitle")
+                    }
+                    title={
+                        title || localize("stateCard-exampleTitle")
+                    }
                 />
             </View>
-        </PageContainer>
-    );
+            <TextInput
+                placeholder={localize("stateCard-enterTitle")}
+                title={localize("stateCard-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <TextInput
+                placeholder={localize("stateCard-enterSubTitle")}
+                title={localize("stateCard-subTitleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                onChangeText={setSubTitle}
+                spreadBehaviour="stretch"
+                value={subTitle}
+            />
+            <TextInput
+                placeholder={localize("stateCard-enterValue")}
+                title={localize("stateCard-valueLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setValue}
+                value={value}
+            />
+        </View>
+    </PageContainer>;
 };
 export default StateCardPage;

example/src/pages/components/stateCard/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/sticker/index.tsx

@@ -12,14 +12,13 @@ import {
     PageContainer,
     TextInput,
     Sticker,
-    Header
-    ,
+    Header,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -48,74 +47,73 @@ const StickerPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("sticker-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("sticker-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("sticker-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("sticker-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Sticker
-                        icon={({
-                            color,
-                            size
-                        }) => (
-                            <StarIcon
-                                color={colors.content.icon[color]}
-                                size={size}
-                            />
-                        )}
-                        title={title || localize("sticker-exampleTitle")}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Sticker
+                    icon={({
+                        color,
+                        size
+                    }) => <StarIcon
+                        color={colors.content.icon[color]}
+                        size={size}
                     />
-                </View>
-                <TextInput
-                    placeholder={localize("sticker-enterTitle")}
-                    title={localize("sticker-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    }
+                    title={title || localize("sticker-exampleTitle")}
                 />
             </View>
-        </PageContainer>
-    );
+            <TextInput
+                placeholder={localize("sticker-enterTitle")}
+                title={localize("sticker-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+        </View>
+    </PageContainer>;
 };
 export default StickerPage;

example/src/pages/components/sticker/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/switch/index.tsx

@@ -13,14 +13,13 @@ import {
     TextInput,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -80,129 +79,125 @@ const SwitchPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("switch-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("switch-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("switch-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("switch-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <Switch
-                        title={title || localize("switch-exampleTitle")}
-                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                        onPress={() => setIsActive(!isActive)}
-                        isDisabled={isDisabled}
-                        isLoading={isLoading}
-                        subTitle={subTitle}
-                        isActive={isActive}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("switch-enterTitle")}
-                    title={localize("switch-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
-                    }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Switch
+                    title={title || localize("switch-exampleTitle")}
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    onPress={() => setIsActive(!isActive)}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    subTitle={subTitle}
+                    isActive={isActive}
                 />
-                <TextInput
-                    placeholder={localize("switch-enterSubTitle")}
-                    title={localize("switch-subTitleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
+            </View>
+            <TextInput
+                placeholder={localize("switch-enterTitle")}
+                title={localize("switch-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <TextInput
+                placeholder={localize("switch-enterSubTitle")}
+                title={localize("switch-subTitleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                onChangeText={setSubTitle}
+                spreadBehaviour="stretch"
+                value={subTitle}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <Button
+                    onPress={() => {
+                        setSpreadIndex((prev) =>
+                            prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                ? 0
+                                : prev + 1,
+                        );
                     }}
-                    onChangeText={setSubTitle}
-                    spreadBehaviour="stretch"
-                    value={subTitle}
+                    title={
+                        `${localize("switch-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
                 />
                 <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
-                    }}
+                    style={stylesheet.switchesContainer}
                 >
-                    <Button
-                        onPress={() => {
-                            setSpreadIndex((prev) =>
-                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
-                                    ? 0
-                                    : prev + 1,
-                            );
-                        }}
-                        title={
-                            `${localize("switch-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                        }
+                    <Switch
+                        onPress={() => setIsDisabled(!isDisabled)}
+                        title={localize("switch-toggleDisabled")}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <Switch
+                        title={localize("switch-toggleLoading")}
+                        onPress={() => setIsLoading(!isLoading)}
                         spreadBehaviour="free"
+                        isActive={isLoading}
+                    />
+                    <Switch
+                        title={localize("switch-toggleActive")}
+                        onPress={() => setIsActive(!isActive)}
+                        spreadBehaviour="free"
+                        isActive={isActive}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize("switch-toggleDisabled")}
-                            onPress={() => setIsDisabled(!isDisabled)}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            title={localize("switch-toggleLoading")}
-                            onPress={() => setIsLoading(!isLoading)}
-                            isActive={isLoading}
-                        />
-                        <Switch
-                            title={localize("switch-toggleActive")}
-                            onPress={() => setIsActive(!isActive)}
-                            isActive={isActive}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default SwitchPage;

example/src/pages/components/switch/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/text/index.tsx

@@ -17,7 +17,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -69,21 +69,21 @@ const TextPage = () => {
             <Text
                 variant="bodyMediumSize"
                 color="mid"
-                style={{
-                    marginBottom: 20
-                }}
+                style={stylesheet.marginContainer}
             >
                 {localize("text-desc")}
             </Text>
             <View
-                style={{
-                    borderColor: colors.content.border.subtle,
-                    marginBottom: spaces.spacingMd,
-                    borderRadius: radiuses.form,
-                    borderWidth: borders.line,
-                    padding: spaces.spacingMd,
-                    minHeight: 120
-                }}
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd
+                    }
+                ]}
             >
                 <Text
                     variant={Object.keys(typography)[variant] as keyof NCoreUIKit.Typography}

example/src/pages/components/text/stylesheet.ts

@@ -10,6 +10,34 @@ const stylesheet = StyleSheet.create({
     contentContainer: {
         maxWidth: 850,
         width: "100%"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    paddedMarginContainer: {
+        minHeight: 120
     }
 });
 export default stylesheet;

example/src/pages/components/textAreaInput/index.tsx

@@ -22,7 +22,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -105,157 +105,151 @@ const TextAreaInputPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("textAreaInput-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("textAreaInput-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("textAreaInput-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("textAreaInput-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <TextAreaInput
-                        title={
-                            title ||
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <TextAreaInput
+                    title={
+                        title ||
                             localize("textAreaInput-exampleTitle")
+                    }
+                    placeholder={localize(
+                        "textAreaInput-placeholder",
+                    )}
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    isCleanEnabled={isCleanEnabled}
+                    type={TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                    isRequired={isRequired}
+                    isOptional={isOptional}
+                    onChangeText={setVal}
+                    value={val}
+                    isUpdateOnRealtime={true}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("textAreaInput-enterTitle")}
+                title={localize("textAreaInput-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = TYPES.indexOf(
+                                    selectedItems[0]!
+                                        .__key as unknown as ITextAreaInputProps["type"],
+                            );
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        placeholder={localize(
-                            "textAreaInput-placeholder",
-                        )}
-                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                        isCleanEnabled={isCleanEnabled}
-                        type={TYPES[typeIndex]}
-                        isDisabled={isDisabled}
-                        isRequired={isRequired}
-                        isOptional={isOptional}
-                        onChangeText={setVal}
-                        value={val}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("textAreaInput-enterTitle")}
-                    title={localize("textAreaInput-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
                     }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    initialSelectedItems={
+                        TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]!] : []
+                    }
+                    title={localize("textAreaInput-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
                 />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
+                <Button
+                    onPress={() => {
+                        setSpreadIndex((prev) =>
+                            prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                ? 0
+                                : prev + 1,
+                        );
                     }}
+                    title={
+                        `${localize("textAreaInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
                 >
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = TYPES.indexOf(
-                                    selectedItems[0]!
-                                        .__key as unknown as ITextAreaInputProps["type"],
-                                );
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={
-                            TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []
-                        }
-                        title={localize("textAreaInput-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    <Switch
+                        title={localize(
+                            "textAreaInput-toggleDisabled",
+                        )}
+                        onPress={() => setIsDisabled(!isDisabled)}
                         spreadBehaviour="free"
-                        data={TYPES_DATA}
+                        isActive={isDisabled}
                     />
-                    <Button
-                        onPress={() => {
-                            setSpreadIndex((prev) =>
-                                prev + 1 > SPREAD_BEHAVIOURS.length - 1
-                                    ? 0
-                                    : prev + 1,
-                            );
-                        }}
-                        title={
-                            `${localize("textAreaInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                        }
+                    <Switch
+                        onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                        title={localize("textAreaInput-toggleClean")}
+                        isActive={isCleanEnabled}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize(
+                            "textAreaInput-toggleRequired",
+                        )}
+                        onPress={() => setIsRequired(!isRequired)}
+                        spreadBehaviour="free"
+                        isActive={isRequired}
+                    />
+                    <Switch
+                        title={localize(
+                            "textAreaInput-toggleOptional",
+                        )}
+                        onPress={() => setIsOptional(!isOptional)}
                         spreadBehaviour="free"
+                        isActive={isOptional}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize(
-                                "textAreaInput-toggleDisabled",
-                            )}
-                            onPress={() => setIsDisabled(!isDisabled)}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            title={localize("textAreaInput-toggleClean")}
-                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
-                            isActive={isCleanEnabled}
-                        />
-                        <Switch
-                            title={localize(
-                                "textAreaInput-toggleRequired",
-                            )}
-                            onPress={() => setIsRequired(!isRequired)}
-                            isActive={isRequired}
-                        />
-                        <Switch
-                            title={localize(
-                                "textAreaInput-toggleOptional",
-                            )}
-                            onPress={() => setIsOptional(!isOptional)}
-                            isActive={isOptional}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default TextAreaInputPage;

example/src/pages/components/textAreaInput/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/textInput/index.tsx

@@ -14,14 +14,13 @@ import {
     TextInput,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -126,172 +125,187 @@ const TextInputPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("textInput-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("textInput-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[stylesheet.container]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
-            <View style={[stylesheet.contentContainer]}>
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("textInput-desc")}
-                </Text>
-                <View
-                    style={{
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("textInput-desc")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
                         borderColor: colors.content.border.subtle,
                         marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
                         borderWidth: borders.line,
-                        padding: spaces.spacingMd,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        minHeight: 120
-                    }}
-                >
-                    <TextInput
-                        icon={
-                            showIcon
-                                ? ({
-                                    color,
-                                    size
-                                }) => (
-                                    <HomeIcon
-                                        color={colors.content.icon[color]}
-                                        size={size}
-                                    />
-                                )
-                                : undefined
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <TextInput
+                    icon={
+                        showIcon
+                            ? ({
+                                color,
+                                size
+                            }) => <HomeIcon
+                                color={colors.content.icon[color]}
+                                size={size}
+                            />
+
+                            : undefined
+                    }
+                    title={title || localize("textInput-exampleTitle")}
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    placeholder={localize("textInput-placeholder")}
+                    variant={VARIANTS[variantIndex]}
+                    isCleanEnabled={isCleanEnabled}
+                    type={TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                    isRequired={isRequired}
+                    isOptional={isOptional}
+                    onChangeText={setVal}
+                    value={val}
+                />
+            </View>
+            <TextInput
+                placeholder={localize("textInput-enterTitle")}
+                title={localize("textInput-titleLabel")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    initialSelectedItems={
+
+                        TYPES_DATA[typeIndex]
+
+                            ? [
+                                TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = TYPES.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["type"]);
+
+                            if (index !== -1) setTypeIndex(index);
                         }
-                        title={
-                            title || localize("textInput-exampleTitle")
+                    }}
+                    title={localize("textInput-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
+                />
+                <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = VARIANTS.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["variant"]);
+
+                            if (index !== -1) setVariantIndex(index);
                         }
-                        placeholder={localize("textInput-placeholder")}
-                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                        variant={VARIANTS[variantIndex]}
-                        isCleanEnabled={isCleanEnabled}
-                        type={TYPES[typeIndex]}
-                        isDisabled={isDisabled}
-                        isRequired={isRequired}
-                        isOptional={isOptional}
-                        onChangeText={setVal}
-                        value={val}
-                    />
-                </View>
-                <TextInput
-                    placeholder={localize("textInput-enterTitle")}
-                    title={localize("textInput-titleLabel")}
-                    style={{
-                        marginBottom: spaces.spacingMd
                     }}
-                    spreadBehaviour="stretch"
-                    onChangeText={setTitle}
-                    value={title}
+                    initialSelectedItems={
+
+                        VARIANTS_DATA[variantIndex]
+
+                            ? [
+                                VARIANTS_DATA[variantIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("textInput-changeVariant")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={VARIANTS_DATA}
                 />
-                <View
-                    style={{
-                        justifyContent: "space-between",
-                        gap: spaces.spacingMd,
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        width: "100%"
+                <Button
+                    onPress={() => {
+                        setSpreadIndex((prev) => prev + 1 > SPREAD_BEHAVIOURS.length - 1 ? 0 : prev + 1);
                     }}
+                    title={`${localize("textInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`}
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
                 >
-                    <SelectBox
-                        initialSelectedItems={TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []}
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = TYPES.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["type"]);
-
-                                if (index !== -1) setTypeIndex(index);
-                            }
-                        }}
-                        title={localize("textInput-changeType")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    <Switch
+                        title={localize("textInput-toggleIcon")}
+                        onPress={() => setShowIcon(!showIcon)}
                         spreadBehaviour="free"
-                        data={TYPES_DATA}
+                        isActive={showIcon}
                     />
-                    <SelectBox
-                        onChange={(selectedItems) => {
-                            if (selectedItems.length > 0) {
-                                const index = VARIANTS.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["variant"]);
-
-                                if (index !== -1) setVariantIndex(index);
-                            }
-                        }}
-                        initialSelectedItems={VARIANTS_DATA[variantIndex] ? [VARIANTS_DATA[variantIndex]] : []}
-                        title={localize("textInput-changeVariant")}
-                        titleExtractor={(item) => item.__title}
-                        keyExtractor={(item) => item.__key}
+                    <Switch
+                        title={localize("textInput-toggleDisabled")}
+                        onPress={() => setIsDisabled(!isDisabled)}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <Switch
+                        onPress={() => setIsCleanEnabled(!isCleanEnabled)}
+                        title={localize("textInput-toggleClean")}
+                        isActive={isCleanEnabled}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize("textInput-toggleRequired")}
+                        onPress={() => setIsRequired(!isRequired)}
                         spreadBehaviour="free"
-                        data={VARIANTS_DATA}
+                        isActive={isRequired}
                     />
-                    <Button
-                        onPress={() => {
-                            setSpreadIndex((prev) => prev + 1 > SPREAD_BEHAVIOURS.length - 1 ? 0 : prev + 1);
-                        }}
-                        title={`${localize("textInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`}
+                    <Switch
+                        title={localize("textInput-toggleOptional")}
+                        onPress={() => setIsOptional(!isOptional)}
                         spreadBehaviour="free"
+                        isActive={isOptional}
                     />
-                    <View
-                        style={{
-                            justifyContent: "space-between",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            flexWrap: "wrap",
-                            width: "100%"
-                        }}
-                    >
-                        <Switch
-                            title={localize("textInput-toggleIcon")}
-                            onPress={() => setShowIcon(!showIcon)}
-                            isActive={showIcon}
-                        />
-                        <Switch
-                            title={localize("textInput-toggleDisabled")}
-                            onPress={() => setIsDisabled(!isDisabled)}
-                            isActive={isDisabled}
-                        />
-                        <Switch
-                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
-                            title={localize("textInput-toggleClean")}
-                            isActive={isCleanEnabled}
-                        />
-                        <Switch
-                            title={localize("textInput-toggleRequired")}
-                            onPress={() => setIsRequired(!isRequired)}
-                            isActive={isRequired}
-                        />
-                        <Switch
-                            title={localize("textInput-toggleOptional")}
-                            onPress={() => setIsOptional(!isOptional)}
-                            isActive={isOptional}
-                        />
-                    </View>
                 </View>
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default TextInputPage;

example/src/pages/components/textInput/stylesheet.ts

@@ -13,6 +13,28 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/themeSwitcher/index.tsx

@@ -15,7 +15,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -29,52 +29,46 @@ const ThemeSwitcherPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-themeSwitcher")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-themeSwitcher")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("themeSwitcher-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-themeSwitcher")}
-                </Text>
-                <ThemeSwitcher />
-            </View>
-        </PageContainer>
-    );
+                {localize("themeSwitcher-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-themeSwitcher")}
+            </Text>
+            <ThemeSwitcher />
+        </View>
+    </PageContainer>;
 };
 export default ThemeSwitcherPage;

example/src/pages/components/themeSwitcher/stylesheet.ts

@@ -8,13 +8,36 @@ const stylesheet = StyleSheet.create({
         width: "100%"
     },
     scrollContent: {
-        flexGrow: 1
+        justifyContent: "center",
+        alignItems: "center"
     },
     container: {
         flex: 1
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/timeSelector/index.tsx

@@ -16,7 +16,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -35,59 +35,53 @@ const TimeSelectorPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-timeSelector")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-timeSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("timeSelector-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-timeSelector")}
-                </Text>
+                {localize("timeSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-timeSelector")}
+            </Text>
 
-                <TimeSelector
-                    setIsSheetContentReady={setIsSheetContentReady}
-                    selectMultipleObject={() => {}}
-                    selectObject={() => {}}
-                    pickerType="time"
-                    variant="single"
-                />
-            </View>
-        </PageContainer>
-    );
+            <TimeSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                pickerType="time"
+                variant="single"
+            />
+        </View>
+    </PageContainer>;
 };
 export default TimeSelectorPage;

example/src/pages/components/timeSelector/stylesheet.ts

@@ -8,13 +8,36 @@ const stylesheet = StyleSheet.create({
         width: "100%"
     },
     scrollContent: {
-        flexGrow: 1
+        justifyContent: "center",
+        alignItems: "center"
     },
     container: {
         flex: 1
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/components/toast/index.tsx

@@ -15,7 +15,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -29,63 +29,56 @@ const ToastPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-toast")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-toast")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("toast-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("toast-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-toast")}
-                </Text>
+                {localize("components-toast")}
+            </Text>
 
-                <View style={{
-                    position: "relative",
-                    height: 200
-                }}>
-                    <Toast
-                        title="This is an example Toast"
-                        subTitle="This is an example subtitle"
-                        type="success"
-                        id="example-toast"
-                    />
-                </View>
+            <View
+                style={stylesheet.customContainer}
+            >
+                <Toast
+                    title="This is an example Toast"
+                    subTitle="This is an example subtitle"
+                    type="success"
+                    id="example-toast"
+                />
             </View>
-        </PageContainer>
-    );
+        </View>
+    </PageContainer>;
 };
 export default ToastPage;

example/src/pages/components/toast/stylesheet.ts

@@ -15,6 +15,35 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    customContainer: {
+        position: "relative",
+        height: 200
     }
 });
 export default stylesheet;

example/src/pages/components/webScrollbar/index.tsx

@@ -2,6 +2,7 @@ import {
     ScrollView,
     View
 } from "react-native";
+import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
@@ -26,46 +27,41 @@ const WebScrollbar = () => {
     >
         <Text
             variant="headlineSmallSize"
-            style={{
-                marginBottom: 20
-            }}
+            style={stylesheet.descText}
         >
             {localize("webScrollbar-title")}
         </Text>
         <Text
             variant="bodyMediumSize"
             color="mid"
-            style={{
-                marginBottom: 20
-            }}
+            style={stylesheet.descText}
         >
             {localize("webScrollbar-desc")}
         </Text>
         <ScrollView
-            style={{
-                backgroundColor: colors.content.container.default,
-                borderColor: colors.content.container.mid,
-                borderRadius: 10,
-                borderWidth: 1,
-                height: 300
-            }}
+            style={[
+                stylesheet.scrollView,
+                {
+                    backgroundColor: colors.content.container.default,
+                    borderColor: colors.content.container.mid
+                }
+            ]}
         >
             {Array.from({
                 length: 30
-            }).map((_, index) => (
-                <View
-                    key={index}
-                    style={{
-                        padding: 15,
-                        borderBottomWidth: 1,
+            }).map((_, index) => <View
+                key={index}
+                style={[
+                    stylesheet.item,
+                    {
                         borderBottomColor: colors.content.container.mid
-                    }}
-                >
-                    <Text>
-                        {localize("webScrollbar-item")} {index + 1}
-                    </Text>
-                </View>
-            ))}
+                    }
+                ]}
+            >
+                <Text>
+                    {localize("webScrollbar-item")} {index + 1}
+                </Text>
+            </View>)}
         </ScrollView>
     </PageContainer>;
 };

example/src/pages/components/webScrollbar/stylesheet.ts

@@ -0,0 +1,19 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    descText: {
+        marginBottom: 20
+    },
+    scrollView: {
+        borderRadius: 10,
+        borderWidth: 1,
+        height: 300
+    },
+    item: {
+        borderBottomWidth: 1,
+        padding: 15
+    }
+});
+export default stylesheet;

example/src/pages/components/yearSelector/index.tsx

@@ -16,7 +16,7 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
-import type RootStackParamList from "../../navigation/type";
+import type RootStackParamList from "../../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
@@ -35,57 +35,51 @@ const YearSelectorPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("components-yearSelector")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("components-yearSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, []);
 
-    return (
-        <PageContainer
-            scrollViewProps={{
-                contentContainerStyle: stylesheet.scrollContent
-            }}
-            scrollViewStyle={[
-                stylesheet.container
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
             ]}
-            isWorkWithHeaderSpace={false}
-            isScrollable={true}
         >
-            <View
-                style={[
-                    stylesheet.contentContainer
-                ]}
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
             >
-                <Text
-                    variant="bodyMediumSize"
-                    color="mid"
-                    style={{
-                        marginBottom: 20
-                    }}
-                >
-                    {localize("yearSelector-desc")}
-                </Text>
-                <Text
-                    style={stylesheet.title}
-                    variant="titleMediumSize"
-                >
-                    {localize("components-yearSelector")}
-                </Text>
-                <YearSelector
-                    setIsSheetContentReady={setIsSheetContentReady}
-                    selectMultipleObject={() => {}}
-                    selectObject={() => {}}
-                    variant="single"
-                />
-            </View>
-        </PageContainer>
-    );
+                {localize("yearSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-yearSelector")}
+            </Text>
+            <YearSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                variant="single"
+            />
+        </View>
+    </PageContainer>;
 };
 export default YearSelectorPage;

example/src/pages/components/yearSelector/stylesheet.ts

@@ -4,8 +4,8 @@ import {
 
 const stylesheet = StyleSheet.create({
     contentContainer: {
-        padding: 20,
-        width: "100%"
+        width: "100%",
+        padding: 20
     },
     scrollContent: {
         flexGrow: 1
@@ -15,6 +15,28 @@ const stylesheet = StyleSheet.create({
     },
     title: {
         marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/pages/coreFeatures/localeExamples/index.tsx

@@ -4,6 +4,7 @@ import {
 import {
     View
 } from "react-native";
+import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
@@ -40,14 +41,12 @@ const LocaleExamples = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    navigation={navigation as unknown as NCoreUIKit.Navigation}
-                    title={localize("localeExamples-title")}
-                    isWrapSafeareaContext={false}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                title={localize("localeExamples-title")}
+                isWrapSafeareaContext={false}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, [
@@ -81,21 +80,25 @@ const LocaleExamples = () => {
             {localize("localeExamples-languageSwitcher")}
         </Text>
         <View
-            style={{
-                flexDirection: "row",
-                gap: spaces.spacingMd
-            }}
+            style={[
+                stylesheet.rowContainer,
+                {
+                    gap: spaces.spacingMd
+                }
+            ]}
         >
             <LocaleSwitcher/>
         </View>
 
         <View
-            style={{
-                backgroundColor: colors.content.container.subtle,
-                marginTop: spaces.spacingLg,
-                padding: spaces.spacingLg,
-                borderRadius: 12
-            }}
+            style={[
+                stylesheet.borderedCard,
+                {
+                    backgroundColor: colors.content.container.subtle,
+                    marginTop: spaces.spacingLg,
+                    padding: spaces.spacingLg
+                }
+            ]}
         >
             <Text
                 variant="titleMediumSize"
@@ -122,12 +125,14 @@ const LocaleExamples = () => {
             </Text>
 
             <View
-                style={{
-                    backgroundColor: colors.content.container.default,
-                    padding: spaces.spacingMd,
-                    gap: spaces.spacingMd,
-                    borderRadius: 8
-                }}
+                style={[
+                    stylesheet.borderedCard2,
+                    {
+                        backgroundColor: colors.content.container.default,
+                        padding: spaces.spacingMd,
+                        gap: spaces.spacingMd
+                    }
+                ]}
             >
                 <View>
                     <Text
@@ -175,11 +180,12 @@ const LocaleExamples = () => {
         </View>
 
         <View
-            style={{
-                justifyContent: "space-between",
-                marginTop: spaces.spacingXl,
-                flexDirection: "row"
-            }}
+            style={[
+                stylesheet.rowSpaceBetween,
+                {
+                    marginTop: spaces.spacingXl
+                }
+            ]}
         >
             <Button
                 icon={({

example/src/pages/coreFeatures/localeExamples/stylesheet.ts

@@ -0,0 +1,20 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    rowContainer: {
+        flexDirection: "row"
+    },
+    borderedCard: {
+        borderRadius: 12
+    },
+    borderedCard2: {
+        borderRadius: 8
+    },
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row"
+    }
+});
+export default stylesheet;

example/src/pages/coreFeatures/themeExamples/index.tsx

@@ -4,6 +4,7 @@ import {
 import {
     View
 } from "react-native";
+import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
@@ -40,14 +41,12 @@ const ThemeExamples = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("themeExamples-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation as unknown as NCoreUIKit.Navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("themeExamples-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, [
@@ -81,21 +80,25 @@ const ThemeExamples = () => {
             {localize("themeExamples-switchers")}
         </Text>
         <View
-            style={{
-                flexDirection: "row",
-                gap: spaces.spacingMd
-            }}
+            style={[
+                stylesheet.rowContainer,
+                {
+                    gap: spaces.spacingMd
+                }
+            ]}
         >
             <ThemeSwitcher/>
             <PaletteSwitcher/>
         </View>
         <View
-            style={{
-                backgroundColor: colors.content.container.subtle,
-                marginTop: spaces.spacingLg,
-                padding: spaces.spacingLg,
-                borderRadius: 12
-            }}
+            style={[
+                stylesheet.borderedCard,
+                {
+                    backgroundColor: colors.content.container.subtle,
+                    marginTop: spaces.spacingLg,
+                    padding: spaces.spacingLg
+                }
+            ]}
         >
             <Text
                 variant="titleMediumSize"
@@ -147,17 +150,22 @@ const ThemeExamples = () => {
                 {localize("themeExamples-colorExamples")}
             </Text>
             <View
-                style={{
-                    gap: spaces.spacingSm,
-                    flexDirection: "row",
-                    flexWrap: "wrap"
-                }}
+                style={[
+                    stylesheet.rowContainer2,
+                    {
+                        gap: spaces.spacingSm
+                    }
+                ]}
             >
-                <View style={{
-                    backgroundColor: colors.content.container.primary,
-                    padding: spaces.spacingMd,
-                    borderRadius: 8
-                }}>
+                <View
+                    style={[
+                        stylesheet.borderedCard2,
+                        {
+                            backgroundColor: colors.content.container.primary,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
+                >
                     <Text
                         style={{
                             color: colors.content.text.onPrimary
@@ -167,11 +175,13 @@ const ThemeExamples = () => {
                     </Text>
                 </View>
                 <View
-                    style={{
-                        backgroundColor: colors.content.container.danger,
-                        padding: spaces.spacingMd,
-                        borderRadius: 8
-                    }}
+                    style={[
+                        stylesheet.borderedCard3,
+                        {
+                            backgroundColor: colors.content.container.danger,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
                 >
                     <Text
                         style={{
@@ -182,11 +192,13 @@ const ThemeExamples = () => {
                     </Text>
                 </View>
                 <View
-                    style={{
-                        backgroundColor: colors.content.container.warning,
-                        padding: spaces.spacingMd,
-                        borderRadius: 8
-                    }}
+                    style={[
+                        stylesheet.borderedCard4,
+                        {
+                            backgroundColor: colors.content.container.warning,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
                 >
                     <Text
                         style={{
@@ -197,11 +209,13 @@ const ThemeExamples = () => {
                     </Text>
                 </View>
                 <View
-                    style={{
-                        backgroundColor: colors.content.container.success,
-                        padding: spaces.spacingMd,
-                        borderRadius: 8
-                    }}
+                    style={[
+                        stylesheet.borderedCard5,
+                        {
+                            backgroundColor: colors.content.container.success,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
                 >
                     <Text
                         style={{
@@ -212,11 +226,13 @@ const ThemeExamples = () => {
                     </Text>
                 </View>
                 <View
-                    style={{
-                        backgroundColor: colors.content.container.info,
-                        padding: spaces.spacingMd,
-                        borderRadius: 8
-                    }}
+                    style={[
+                        stylesheet.borderedCard6,
+                        {
+                            backgroundColor: colors.content.container.info,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
                 >
                     <Text
                         style={{
@@ -229,11 +245,12 @@ const ThemeExamples = () => {
             </View>
         </View>
         <View
-            style={{
-                justifyContent: "space-between",
-                marginTop: spaces.spacingXl,
-                flexDirection: "row"
-            }}
+            style={[
+                stylesheet.rowSpaceBetween,
+                {
+                    marginTop: spaces.spacingXl
+                }
+            ]}
         >
             <Button
                 icon={({

example/src/pages/coreFeatures/themeExamples/stylesheet.ts

@@ -0,0 +1,36 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    rowContainer: {
+        flexDirection: "row"
+    },
+    borderedCard: {
+        borderRadius: 12
+    },
+    rowContainer2: {
+        flexDirection: "row",
+        flexWrap: "wrap"
+    },
+    borderedCard2: {
+        borderRadius: 8
+    },
+    borderedCard3: {
+        borderRadius: 8
+    },
+    borderedCard4: {
+        borderRadius: 8
+    },
+    borderedCard5: {
+        borderRadius: 8
+    },
+    borderedCard6: {
+        borderRadius: 8
+    },
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row"
+    }
+});
+export default stylesheet;

example/src/pages/coreFeatures/toolsUsage/index.tsx

@@ -4,6 +4,7 @@ import {
 import {
     View
 } from "react-native";
+import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
@@ -39,14 +40,12 @@ const ToolsUsage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("toolsUsage-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation as unknown as NCoreUIKit.Navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("toolsUsage-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, [
@@ -60,13 +59,17 @@ const MyComponent = () => {
     // Access current theme colors, spaces, and active preferences
     const {
         colors,
-        spaces,
+    spaces,
         activeTheme,
-        activePalette
+    activePalette
     } = NCoreUIKitTheme.useContext();
 
     return (
-        <View style={{ backgroundColor: colors.content.container.default, padding: spaces.spacingMd, borderRadius: 10 }}>
+        <View style={[
+                stylesheet.borderedCard,
+                { backgroundColor: colors.content.container.default, padding: spaces.spacingMd
+                }
+            ]}>
             <Text style={{ color: colors.content.text.high }}>Current Theme: {activeTheme}</Text>
         </View>
     );
@@ -78,7 +81,7 @@ const MyComponent = () => {
     // Access current localization translations and active language
     const {
         localize,
-        activeLocale
+    activeLocale
     } = NCoreUIKitLocalize.useContext();
 
     return (
@@ -206,11 +209,12 @@ const MyComponent = () => {
         </View>
 
         <View
-            style={{
-                marginTop: spaces.spacingXl,
-                flexDirection: "row",
-                justifyContent: "space-between"
-            }}
+            style={[
+                stylesheet.rowSpaceBetween,
+                {
+                    marginTop: spaces.spacingXl
+                }
+            ]}
         >
             <Button
                 icon={({

example/src/pages/coreFeatures/toolsUsage/stylesheet.ts

@@ -0,0 +1,14 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    borderedCard: {
+        borderRadius: 10
+    },
+    rowSpaceBetween: {
+        flexDirection: "row",
+        justifyContent: "space-between"
+    }
+});
+export default stylesheet;

example/src/pages/coreFeatures/typesOverride/index.tsx

@@ -4,6 +4,7 @@ import {
 import {
     View
 } from "react-native";
+import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
@@ -73,14 +74,12 @@ const TypesOverride = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            header: () => (
-                <Header
-                    title={localize("typesOverride-title")}
-                    isWrapSafeareaContext={false}
-                    navigation={navigation as unknown as NCoreUIKit.Navigation}
-                    isGoBackEnable={true}
-                />
-            ),
+            header: () => <Header
+                title={localize("typesOverride-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                isGoBackEnable={true}
+            />,
             headerShown: true
         });
     }, [
@@ -161,11 +160,12 @@ const TypesOverride = () => {
         </View>
 
         <View
-            style={{
-                marginTop: spaces.spacingXl,
-                flexDirection: "row",
-                justifyContent: "space-between"
-            }}
+            style={[
+                stylesheet.rowSpaceBetween,
+                {
+                    marginTop: spaces.spacingXl
+                }
+            ]}
         >
             <Button
                 icon={({

example/src/pages/coreFeatures/typesOverride/stylesheet.ts

@@ -0,0 +1,11 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    rowSpaceBetween: {
+        flexDirection: "row",
+        justifyContent: "space-between"
+    }
+});
+export default stylesheet;

example/src/pages/home/index.tsx

@@ -57,45 +57,43 @@ const Home = () => {
         }}
     >
         <View
-            style={{
-                justifyContent: "center",
-                alignItems: "center",
-                maxWidth: 850,
-                width: "100%"
-            }}
+            style={stylesheet.maxContentContainer}
         >
             <Image
                 source={{
                     uri: isDarkTheme ? "http://ncore.nibgat.space/assets/images/darklogo.png" : "https://ncore.nibgat.space/assets/images/ncorelogo.png"
                 }}
-                style={{
-                    height: 300,
-                    width: 300
-                }}
+                style={stylesheet.logoImage}
             />
             <Text
                 variant="displayMediumSize"
-                style={{
-                    marginBottom: spaces.spacingMd,
-                    textAlign: "center"
-                }}
+                style={[
+                    stylesheet.centeredText,
+                    {
+                        marginBottom: spaces.spacingMd
+                    }
+                ]}
             >
                 {localize("ncore-design-system")}
             </Text>
             <Text
                 variant="headlineSmallSize"
-                style={{
-                    marginBottom: spaces.spacingLg,
-                    textAlign: "center"
-                }}
+                style={[
+                    stylesheet.centeredText2,
+                    {
+                        marginBottom: spaces.spacingLg
+                    }
+                ]}
             >
                 {localize("ui-kit-library")}
             </Text>
             <Text
-                style={{
-                    marginBottom: spaces.spacingMd,
-                    textAlign: "center"
-                }}
+                style={[
+                    stylesheet.centeredText3,
+                    {
+                        marginBottom: spaces.spacingMd
+                    }
+                ]}
             >
                 {localize("ncore-about")}
             </Text>

example/src/pages/home/stylesheet.ts

@@ -9,6 +9,46 @@ const stylesheet = StyleSheet.create({
     contentContainer: {
         justifyContent: "center",
         alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    maxContentContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        maxWidth: 850,
+        width: "100%"
+    },
+    logoImage: {
+        height: 300,
+        width: 300
+    },
+    centeredText: {
+        textAlign: "center"
+    },
+    centeredText2: {
+        textAlign: "center"
+    },
+    centeredText3: {
+        textAlign: "center"
     }
 });
 export default stylesheet;