Merge branch 'release/1.1.0-alpha.0'

.agents/AGENTS.md

@@ -0,0 +1,40 @@
+# Coding & Formatting Rules
+
+The user expects strict adherence to the following coding, formatting, and behavioral rules in this repository:
+
+## General Formatting
+1. **Double Quotes:** Use double quotes (`"`) instead of single quotes for all strings and imports.
+2. **Sort by Length:** Sort arrays, object properties, and import statements from **longest to shortest string length** (uzundan kısaya). For JSON objects or key-value pairs (like translations), sort by the **combined length of the key and the value (key + value)** from longest to shortest. This is a strict visual aesthetic preference. This applies deeply to destructured imports, props, array data, and types as well.
+3. **Line Breaks (Newlines):** Pay attention to line breaks. Add new lines between imports and JSON object keys where appropriate. ESLint rules regarding newlines must be strictly followed.
+4. **Hook Spacing:** Always leave a blank line between each distinct hook call (e.g. `useContext`, `useState`, `useNavigation`, `useLayoutEffect`). Do not group them tightly together without empty lines.
+5. **Array Destructuring:** When destructuring arrays (such as from `useState`), place the opening bracket on one line, each destructured item on its own separate line, and the closing bracket on its own line.
+   Example:
+   ```typescript
+   const [
+       title,
+       setTitle
+   ] = useState<string>("");
+   ```
+6. **Main Component / Object Export:** Always define the main component or object as a variable/arrow function (e.g., `const PageName = () => { ... }` or `const stylesheet = StyleSheet.create({ ... })`) and place the `export default PageName;` or `export default stylesheet;` at the very bottom of the file. Do not use `export default function PageName()` or inline `export default StyleSheet.create(...)`.
+7. **Top-level Blank Lines:** Top-level variables, arrays, types, and functions located *outside* of the main component must be separated by an empty line. Do not group them without new lines.
+8. **No `any` with `localize`:** Never use `as any` when calling the `localize` function (e.g., use `localize("key")` instead of `localize("key" as any)`). The `any` type is strictly forbidden.
+9. **String Interpolation:** Use template literals (`` `${...}` ``) for string concatenation instead of the `+` operator.
+
+## Tooling & Checks
+1. **ESLint Validation:** Habitually run `yarn run eslint --fix <file>` or `yarn run eslint <file>` after making code edits to ensure strict ESLint compliance.
+2. **TypeScript Validation:** Habitually check and respect TypeScript compiler errors (e.g., using `tsc` or IDE feedback). Do not ignore `any` or strict typing constraints.
+3. **No External Formatters:** Do not introduce Prettier or automatic scripts that might break these explicit manual formatting rules. Format code block by block meticulously.
+
+## Behavior
+Always follow these rules by default. Pay "extreme attention" (aşırı dikkat) to the sorting rules, ESLint, and TS constraints during modifications.
+
+## Strict Batch Operations Ban and Multi-Angle Verification
+- NEVER use `multi_replace_file_content` or attempt to edit multiple files in a single pass. The user explicitly bans batch operations ("Toplu işlemi yasaklıyorum").
+- Any fix or change MUST be done one-by-one, meticulously.
+- Before applying any change to a file, verify the exact location, context, and potential side effects from at least 3 different angles (e.g., check exact lines using view_file, consider how the component uses the prop, and anticipate how the linter will react).
+
+## Semantic Naming for Styles
+- When defining styles in `stylesheet.ts`, you MUST use semantic naming based on the object or component being styled, NOT based on the style values.
+- **Incorrect:** `flex1`, `fullWidth`, `transparentBackground`
+- **Correct:** `container`, `content`, `titleContainer`, `title`, `emptyCheckIcon`
+- For example: The outermost `<View>` in a component is usually `container`. A wrapper for content is `contentContainer`. A view wrapping a title is `titleContainer`. Always look at the semantic purpose of the element in the UI hierarchy.

.github/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

TODO.md

@@ -0,0 +1,10 @@
+# İNCELENMESİ GEREKENLER (TODO)
+
+## 1. Modal Bileşeni - TouchableWithoutFeedback Stil Değişikliği
+**Dosya:** `src/components/modal/index.tsx`
+
+**Yapılan Değişiklik:** 
+Daha önce `TouchableWithoutFeedback` bileşenine verilen `style={[stylesheet.overlay]}` prop'u, Typescript hatasına yol açtığı ve React Native'in standartlarına uymadığı (Touchable bileşenleri doğrudan stil almaz) için kaldırılarak, içerisindeki asıl render edilen `<View>` bileşenine aktarıldı.
+
+**Neden Kontrol Edilmeli:**
+Her ne kadar `overlay` ve `overlayContent` stilleri pozisyonlama (`position: "absolute", bottom: 0, right: 0...`) anlamında birebir aynı işlevi yapsa da, `TouchableWithoutFeedback` üzerindeki `style` dizisinin doğrudan içerideki `<View>`'a aktarılmasının, Web, iOS ve Android tarafında (özellikle zIndex veya overlay sınırları/hitbox bağlamında) umulmadık bir yan etki veya görsel/etkileşimsel kayma yaratıp yaratmadığı gerçek bir developer tarafından test edilmeli ve onaylanmalıdır.

babel.config.js

@@ -1,12 +1,16 @@
 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/global.d.ts

@@ -1 +1,41 @@
+import defaultLocaleJSON from "./variants/locales/default.json";
+import defaultThemeJSON from "./variants/themes/default.json";
 import "../../src/types/index";
+
+declare global {
+    namespace NCoreUIKit {
+        type PaletteNames = "gmcore";
+
+        interface PaletteKey extends Record<PaletteType, unknown>, Record<PaletteNames, unknown> {
+        }
+
+        type ProjectLocalizationL = typeof defaultLocaleJSON[0];
+
+        type GeneratedProjectTranslations = {
+            [K in keyof ProjectLocalizationL["translations"]]: ProjectLocalizationL["translations"][K];
+        };
+
+        interface Translation extends GeneratedTranslations, GeneratedProjectTranslations {
+        }
+
+        type DefaultPaletteL = typeof defaultThemeJSON.palettes[0];
+
+        type ProjectDataL = DefaultPaletteL["themes"]["dark"]["project"];
+        type DefaultProjectColorsL = ProjectDataL;
+
+        interface ProjectColorPalette extends DefaultProjectColors, DefaultProjectColorsL {
+        }
+
+        type SystemDataL = DefaultPaletteL["themes"]["dark"]["system"];
+        type DefaultSystemColorsL = SystemDataL;
+
+        interface SystemColorPalette extends DefaultSystemColors, DefaultSystemColorsL {
+        }
+
+        type ContentDataL = DefaultPaletteL["themes"]["dark"]["content"];
+        type DefaultContentColorsL = ContentDataL;
+
+        interface ContentColorPalette extends DefaultContentColors, DefaultContentColorsL {
+        }
+    }
+}

example/src/index.tsx

@@ -1,22 +1,66 @@
+import {
+    Platform
+} from "react-native";
 import Navigation from "./navigation";
 import defaultLocaleJSON from "./variants/locales/default.json";
 import defaultThemeJSON from "./variants/themes/default.json";
+import {
+    type NCoreUIKitConfig,
+    setupNCoreUIKit,
+    Host
+} from "ncore-ui-kit";
 import {
     useFonts
 } from "expo-font";
 import moment from "moment";
 import "moment/locale/tr";
-import {
-    Host,
-    setupNCoreUIKit
-} from "ncore-ui-kit";
 
-const NCoreUIKitBase = setupNCoreUIKit({
+let NCoreConfig: NCoreUIKitConfig = {
+    projectThemes: defaultThemeJSON as NCoreUIKit.Palette,
     initialSelectedGapPropagation: "spacious",
     projectLocales: defaultLocaleJSON,
-    projectThemes: defaultThemeJSON,
+    initialSelectedPalette: "nibgat",
     initialSelectedTheme: "light"
-});
+};
+
+const themeStorage = Platform.OS === "web" ? window.localStorage.getItem("theme") : null;
+
+if(themeStorage) {
+    const parsedThemeStorage = JSON.parse(themeStorage);
+
+    NCoreConfig = {
+        ...NCoreConfig,
+        initialSelectedGapPropagation: parsedThemeStorage.activeGapPropagation,
+        initialSelectedActiveSharpness: parsedThemeStorage.activeSharpness,
+        initialSelectedTheme: parsedThemeStorage.activeTheme
+    };
+}
+
+const localeStorage = Platform.OS === "web" ? window.localStorage.getItem("locale") : null;
+
+if(localeStorage) {
+    const parsedLocaleStorage = JSON.parse(localeStorage);
+
+    NCoreConfig = {
+        ...NCoreConfig,
+        initialSelectedLocale: parsedLocaleStorage.activeLocale
+    };
+}
+
+if (Platform.OS === "web") {
+    const urlParams = new URLSearchParams(window.location.search);
+    const langParam = urlParams.get("lang");
+
+    if (langParam) {
+        const isValidLocale = defaultLocaleJSON.some(item => item.locale === langParam);
+
+        if (isValidLocale) {
+            NCoreConfig.initialSelectedLocale = langParam as keyof NCoreUIKit.LocaleKey;
+        }
+    }
+}
+
+const NCoreUIKitBase = setupNCoreUIKit(NCoreConfig);
 
 moment.locale("tr");
 

example/src/navigation/index.tsx

@@ -2,52 +2,375 @@ import {
     useEffect
 } from "react";
 import {
-    Platform
+    Platform,
+    View
 } from "react-native";
 import type RootStackParamList from "./type";
+import stylesheet from "./stylesheet";
 import {
     NCoreUIKitEmbeddedMenu,
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
+    PaletteSwitcher,
+    LocaleSwitcher,
+    ThemeSwitcher,
     MainHeader
 } from "ncore-ui-kit";
 import {
+    type LinkingOptions,
     NavigationContainer,
+    getStateFromPath,
     useNavigation
 } from "@react-navigation/native";
+import TypesOverridePage from "../pages/coreFeatures/typesOverride";
 import {
     type NativeStackNavigationProp,
     createNativeStackNavigator
 } from "@react-navigation/native-stack";
 import {
     ComponentIcon,
+    SettingsIcon,
+    GoalIcon,
     HomeIcon
 } from "lucide-react-native";
+import NotificationIndicatorPage from "../pages/components/notificationIndicator";
+import HighlightButtonPage from "../pages/components/highlightButton";
+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 MarkdownViewerPage from "../pages/components/markdownViewer";
+import ThemeExamplesPage from "../pages/coreFeatures/themeExamples";
+import DateTimeSheetPage from "../pages/components/dateTimeSheet";
+import MonthSelectorPage from "../pages/components/monthSelector";
+import PageContainerPage from "../pages/components/pageContainer";
+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 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 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 ModalPage from "../pages/components/modal";
+import ToastPage from "../pages/components/toast";
+import ChipPage from "../pages/components/chip";
+import MenuPage from "../pages/components/menu";
+import TextPage from "../pages/components/text";
 import Home from "../pages/home";
-import TextPage from "../pages/text";
 
 const RootStack = createNativeStackNavigator();
 const ComponentsStack = createNativeStackNavigator();
+const GettingStartedStack = createNativeStackNavigator();
+const CoreFeaturesStack = createNativeStackNavigator();
+
+const CoreFeaturesNav = () => {
+    return <CoreFeaturesStack.Navigator
+        initialRouteName="ToolsUsage"
+        screenOptions={{
+            headerShown: true
+        }}
+    >
+        <CoreFeaturesStack.Screen
+            component={ToolsUsagePage}
+            name="ToolsUsage"
+        />
+        <CoreFeaturesStack.Screen
+            component={ThemeExamplesPage}
+            name="ThemeExamples"
+        />
+        <CoreFeaturesStack.Screen
+            component={LocaleExamplesPage}
+            name="LocaleExamples"
+        />
+        <CoreFeaturesStack.Screen
+            component={TypesOverridePage}
+            name="TypesOverride"
+        />
+    </CoreFeaturesStack.Navigator>;
+};
+
+const GettingStartedNav = () => {
+    return <GettingStartedStack.Navigator
+        initialRouteName="Installation"
+        screenOptions={{
+            headerShown: true
+        }}
+    >
+        <GettingStartedStack.Screen
+            component={InstallationPage}
+            name="Installation"
+        />
+        <GettingStartedStack.Screen
+            component={ImplementationPage}
+            name="Implementation"
+        />
+    </GettingStartedStack.Navigator>;
+};
 
 const ComponentsNav = () => {
     return <ComponentsStack.Navigator
-        initialRouteName="TextPage"
+        initialRouteName="Text"
         screenOptions={{
             headerShown: true
         }}
     >
         <ComponentsStack.Screen
-            name="TextPage"
+            component={AvatarPage}
+            name="Avatar"
+        />
+        <ComponentsStack.Screen
+            component={AvatarGroupPage}
+            name="AvatarGroup"
+        />
+        <ComponentsStack.Screen
+            component={BottomSheetPage}
+            name="BottomSheet"
+        />
+        <ComponentsStack.Screen
+            component={ButtonPage}
+            name="Button"
+        />
+        <ComponentsStack.Screen
+            component={CheckBoxPage}
+            name="CheckBox"
+        />
+        <ComponentsStack.Screen
+            component={ChipPage}
+            name="Chip"
+        />
+        <ComponentsStack.Screen
+            component={DateSelectorPage}
+            name="DateSelector"
+        />
+        <ComponentsStack.Screen
+            component={DateTimePickerPage}
+            name="DateTimePicker"
+        />
+        <ComponentsStack.Screen
+            component={DateTimeSheetPage}
+            name="DateTimeSheet"
+        />
+        <ComponentsStack.Screen
+            component={DialogPage}
+            name="Dialog"
+        />
+        <ComponentsStack.Screen
+            component={EmbeddedMenuPage}
+            name="EmbeddedMenu"
+        />
+        <ComponentsStack.Screen
+            component={HeaderPage}
+            name="Header"
+        />
+        <ComponentsStack.Screen
+            component={HighlightButtonPage}
+            name="HighlightButton"
+        />
+        <ComponentsStack.Screen
+            component={LoadingPage}
+            name="Loading"
+        />
+        <ComponentsStack.Screen
+            component={LocaleSwitcherPage}
+            name="LocaleSwitcher"
+        />
+        <ComponentsStack.Screen
+            component={MainHeaderPage}
+            name="MainHeader"
+        />
+        <ComponentsStack.Screen
+            component={MarkdownViewerPage}
+            name="MarkdownViewer"
+        />
+        <ComponentsStack.Screen
+            component={MenuPage}
+            name="Menu"
+        />
+        <ComponentsStack.Screen
+            component={ModalPage}
+            name="Modal"
+        />
+        <ComponentsStack.Screen
+            component={MonthSelectorPage}
+            name="MonthSelector"
+        />
+        <ComponentsStack.Screen
+            component={NotificationIndicatorPage}
+            name="NotificationIndicator"
+        />
+        <ComponentsStack.Screen
+            component={NumericInputPage}
+            name="NumericInput"
+        />
+        <ComponentsStack.Screen
+            component={PageContainerPage}
+            name="PageContainer"
+        />
+        <ComponentsStack.Screen
+            component={PaletteSwitcherPage}
+            name="PaletteSwitcher"
+        />
+        <ComponentsStack.Screen
+            component={RadioButtonPage}
+            name="RadioButton"
+        />
+        <ComponentsStack.Screen
+            component={RowCardPage}
+            name="RowCard"
+        />
+        <ComponentsStack.Screen
+            component={SelectBoxPage}
+            name="SelectBox"
+        />
+        <ComponentsStack.Screen
+            component={SelectSheetPage}
+            name="SelectSheet"
+        />
+        <ComponentsStack.Screen
+            component={SeperatorPage}
+            name="Seperator"
+        />
+        <ComponentsStack.Screen
+            component={SiteLogoPage}
+            name="SiteLogo"
+        />
+        <ComponentsStack.Screen
+            component={SnackBarPage}
+            name="SnackBar"
+        />
+        <ComponentsStack.Screen
+            component={StateCardPage}
+            name="StateCard"
+        />
+        <ComponentsStack.Screen
+            component={StickerPage}
+            name="Sticker"
+        />
+        <ComponentsStack.Screen
+            component={SwitchPage}
+            name="Switch"
+        />
+        <ComponentsStack.Screen
             component={TextPage}
+            name="Text"
+        />
+        <ComponentsStack.Screen
+            component={TextAreaInputPage}
+            name="TextAreaInput"
+        />
+        <ComponentsStack.Screen
+            component={TextInputPage}
+            name="TextInput"
+        />
+        <ComponentsStack.Screen
+            component={ThemeSwitcherPage}
+            name="ThemeSwitcher"
+        />
+        <ComponentsStack.Screen
+            component={TimeSelectorPage}
+            name="TimeSelector"
+        />
+        <ComponentsStack.Screen
+            component={ToastPage}
+            name="Toast"
+        />
+        <ComponentsStack.Screen
+            component={WebScrollbarPage}
+            name="WebScrollbar"
+        />
+        <ComponentsStack.Screen
+            component={YearSelectorPage}
+            name="YearSelector"
         />
     </ComponentsStack.Navigator>;
 };
 
-const RootNav = () => {
+const RenderHomeIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    return <HomeIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
+const RenderComponentIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    return <ComponentIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
+const RenderGettingStartedIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    return <GoalIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
+const RenderCoreFeaturesIcon = ({
+    color
+}: {
+    color: keyof NCoreUIKit.IconContentColors;
+}) => {
     const {
         colors
     } = NCoreUIKitTheme.useContext();
 
+    return <SettingsIcon
+        color={colors.content.icon[color]}
+    />;
+};
+
+const RootNav = () => {
+    const {
+        activeTheme,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const {
         localize
     } = NCoreUIKitLocalize.useContext();
@@ -71,10 +394,72 @@ const RootNav = () => {
                     title: "home",
                     icon: ({
                         color
-                    }) => <HomeIcon
-                        color={colors.content.icon[color]}
+                    }) => <RenderHomeIcon
+                        color={color}
                     />
                 },
+                {
+                    redirectMain: "GettingStarted",
+                    isCollapsible: true,
+                    title: "gettingStarted",
+                    isUseLocalize: true,
+                    icon: ({
+                        color
+                    }) => <RenderGettingStartedIcon
+                        color={color}
+                    />,
+                    subButtons: [
+                        {
+                            redirectMain: "GettingStarted",
+                            redirectSub: "Installation",
+                            title: "installation",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "GettingStarted",
+                            redirectSub: "Implementation",
+                            title: "implementation",
+                            isUseLocalize: true
+                        }
+                    ]
+                },
+                {
+                    redirectMain: "CoreFeatures",
+                    isCollapsible: true,
+                    title: "coreFeatures",
+                    isUseLocalize: true,
+                    icon: ({
+                        color
+                    }) => <RenderCoreFeaturesIcon
+                        color={color}
+                    />,
+                    subButtons: [
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "ToolsUsage",
+                            title: "toolsUsage",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "ThemeExamples",
+                            title: "themeExamples",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "LocaleExamples",
+                            title: "localeExamples",
+                            isUseLocalize: true
+                        },
+                        {
+                            redirectMain: "CoreFeatures",
+                            redirectSub: "TypesOverride",
+                            title: "typesOverride",
+                            isUseLocalize: true
+                        }
+                    ]
+                },
                 {
                     redirectMain: "Components",
                     isUseLocalize: true,
@@ -82,14 +467,219 @@ const RootNav = () => {
                     title: "components",
                     icon: ({
                         color
-                    }) => <ComponentIcon
-                        color={colors.content.icon[color]}
+                    }) => <RenderComponentIcon
+                        color={color}
                     />,
                     subButtons: [
                         {
                             redirectMain: "Components",
-                            redirectSub: "TextPage",
+                            redirectSub: "Text",
                             title: "Text"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Button",
+                            title: "Button"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "HighlightButton",
+                            title: "HighlightButton"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "TextInput",
+                            title: "TextInput"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "TextAreaInput",
+                            title: "TextAreaInput"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "NumericInput",
+                            title: "NumericInput"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SelectBox",
+                            title: "SelectBox"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SelectSheet",
+                            title: "SelectSheet"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "CheckBox",
+                            title: "CheckBox"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "RadioButton",
+                            title: "RadioButton"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Switch",
+                            title: "Switch"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "DateTimePicker",
+                            title: "DateTimePicker"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "DateTimeSheet",
+                            title: "DateTimeSheet"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "DateSelector",
+                            title: "DateSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "TimeSelector",
+                            title: "TimeSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "MonthSelector",
+                            title: "MonthSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "YearSelector",
+                            title: "YearSelector"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Avatar",
+                            title: "Avatar"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "AvatarGroup",
+                            title: "AvatarGroup"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Chip",
+                            title: "Chip"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Sticker",
+                            title: "Sticker"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "RowCard",
+                            title: "RowCard"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "StateCard",
+                            title: "StateCard"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Dialog",
+                            title: "Dialog"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Modal",
+                            title: "Modal"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "BottomSheet",
+                            title: "BottomSheet"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SnackBar",
+                            title: "SnackBar"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Toast",
+                            title: "Toast"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Loading",
+                            title: "Loading"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "NotificationIndicator",
+                            title: "NotificationIndicator"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "MarkdownViewer",
+                            title: "MarkdownViewer"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Seperator",
+                            title: "Seperator"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "SiteLogo",
+                            title: "SiteLogo"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "WebScrollbar",
+                            title: "WebScrollbar"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "PageContainer",
+                            title: "PageContainer"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Header",
+                            title: "Header"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "MainHeader",
+                            title: "MainHeader"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "Menu",
+                            title: "Menu"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "EmbeddedMenu",
+                            title: "EmbeddedMenu"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "ThemeSwitcher",
+                            title: "ThemeSwitcher"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "PaletteSwitcher",
+                            title: "PaletteSwitcher"
+                        },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "LocaleSwitcher",
+                            title: "LocaleSwitcher"
                         }
                     ]
                 }
@@ -98,17 +688,41 @@ const RootNav = () => {
             id: "main-menu"
         });
 
+        NCoreUIKitLocalize.addEventListener("state", updateLocaleStorage);
         NCoreUIKitEmbeddedMenu.addEventListener("state", updateStorage);
+        NCoreUIKitTheme.addEventListener("state", updateThemeStorage);
     }, []);
 
     const updateStorage = () => {
-        const data = NCoreUIKitEmbeddedMenu.state.data;
+        if(Platform.OS === "web") {
+            const data = NCoreUIKitEmbeddedMenu.state.data;
+
+            if(data && data.length) {
+                const currentMenu = data.find(dI => dI.id === "main-menu");
+
+                if(currentMenu) {
+                    window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
+                }
+            }
+        }
+    };
 
-        if(Platform.OS === "web" && data && data.length) {
-            const currentMenu = data.find(dI => dI.id === "main-menu");
+    const updateLocaleStorage = () => {
+        if(Platform.OS === "web") {
+            const localeData = NCoreUIKitLocalize.state;
 
-            if(currentMenu) {
-                window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
+            if(localeData) {
+                window.localStorage.setItem("locale", JSON.stringify(localeData));
+            }
+        }
+    };
+
+    const updateThemeStorage = () => {
+        if(Platform.OS === "web") {
+            const themeData = NCoreUIKitTheme.state;
+
+            if(themeData) {
+                window.localStorage.setItem("theme", JSON.stringify(themeData));
             }
         }
     };
@@ -116,7 +730,7 @@ const RootNav = () => {
     return <MainHeader
         isWorkWithSeperator={true}
         siteLogoProps={{
-            imageUrl: "http://ncore.nibgat.space/assets/images/ncorelogo.png",
+            imageUrl: activeTheme.indexOf("dark") !== -1 ? "http://ncore.nibgat.space/assets/images/darklogo.png" : "http://ncore.nibgat.space/assets/images/ncorelogo.png",
             onPress: () => {
                 navigation.navigate("Home");
             },
@@ -129,6 +743,20 @@ const RootNav = () => {
             isWorkWithFlex1: true
         }}
         isWorkWithSticky={true}
+        renderRight={() => {
+            return <View
+                style={[
+                    stylesheet.rightContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <LocaleSwitcher/>
+                <PaletteSwitcher/>
+                <ThemeSwitcher/>
+            </View>;
+        }}
         glassEffect={5}
     >
         <NCoreUIKitEmbeddedMenu.Render
@@ -141,6 +769,14 @@ const RootNav = () => {
                     headerShown: false
                 }}
             >
+                <RootStack.Screen
+                    component={GettingStartedNav}
+                    name="GettingStarted"
+                />
+                <RootStack.Screen
+                    component={CoreFeaturesNav}
+                    name="CoreFeatures"
+                />
                 <RootStack.Screen
                     component={Home}
                     name="Home"
@@ -163,11 +799,76 @@ const Navigation = () => {
             ],
             config: {
                 screens: {
-                    Home: "",
-                    TestSubPage: "text"
+                    Home: "home",
+                    GettingStarted: {
+                        path: "gettingstarted",
+                        screens: {
+                            Installation: "installation",
+                            Implementation: "implementation"
+                        }
+                    },
+                    CoreFeatures: {
+                        path: "corefeatures",
+                        screens: {
+                            ToolsUsage: "toolsusage",
+                            ThemeExamples: "themeexamples",
+                            LocaleExamples: "localeexamples",
+                            TypesOverride: "typesoverride"
+                        }
+                    },
+                    Components: {
+                        path: "components",
+                        screens: {
+                            Avatar: "avatar",
+                            AvatarGroup: "avatargroup",
+                            BottomSheet: "bottomsheet",
+                            Button: "button",
+                            CheckBox: "checkbox",
+                            Chip: "chip",
+                            DateSelector: "dateselector",
+                            DateTimePicker: "datetimepicker",
+                            DateTimeSheet: "datetimesheet",
+                            Dialog: "dialog",
+                            EmbeddedMenu: "embeddedmenu",
+                            Header: "header",
+                            HighlightButton: "highlightbutton",
+                            Loading: "loading",
+                            LocaleSwitcher: "localeswitcher",
+                            MainHeader: "mainheader",
+                            MarkdownViewer: "markdownviewer",
+                            Menu: "menu",
+                            Modal: "modal",
+                            MonthSelector: "monthselector",
+                            NotificationIndicator: "notificationindicator",
+                            NumericInput: "numericinput",
+                            PageContainer: "pagecontainer",
+                            PaletteSwitcher: "paletteswitcher",
+                            RadioButton: "radiobutton",
+                            RowCard: "rowcard",
+                            SelectBox: "selectbox",
+                            SelectSheet: "selectsheet",
+                            Seperator: "seperator",
+                            SiteLogo: "sitelogo",
+                            SnackBar: "snackbar",
+                            StateCard: "statecard",
+                            Sticker: "sticker",
+                            Switch: "switch",
+                            Text: "text",
+                            TextAreaInput: "textareainput",
+                            TextInput: "textinput",
+                            ThemeSwitcher: "themeswitcher",
+                            TimeSelector: "timeselector",
+                            Toast: "toast",
+                            WebScrollbar: "webscrollbar",
+                            YearSelector: "yearselector"
+                        }
+                    }
                 }
+            },
+            getStateFromPath: (path, options) => {
+                return getStateFromPath(path.toLowerCase(), options);
             }
-        }}
+        } as LinkingOptions<RootStackParamList>}
     >
         <RootNav/>
     </NavigationContainer>;

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

@@ -1,7 +1,67 @@
+import type {
+    NavigatorScreenParams
+} from "@react-navigation/native";
+
+export type GettingStartedStackParamList = {
+    Implementation: undefined;
+    Installation: undefined;
+};
+
+export type CoreFeaturesStackParamList = {
+    LocaleExamples: undefined;
+    ThemeExamples: undefined;
+    TypesOverride: undefined;
+    ToolsUsage: undefined;
+};
+
+export type ComponentsStackParamList = {
+    NotificationIndicator: undefined;
+    HighlightButton: undefined;
+    PaletteSwitcher: undefined;
+    DateTimePicker: undefined;
+    MarkdownViewer: undefined;
+    LocaleSwitcher: undefined;
+    DateTimeSheet: undefined;
+    TextAreaInput: undefined;
+    PageContainer: undefined;
+    MonthSelector: undefined;
+    ThemeSwitcher: undefined;
+    DateSelector: undefined;
+    NumericInput: undefined;
+    TimeSelector: undefined;
+    YearSelector: undefined;
+    WebScrollbar: undefined;
+    AvatarGroup: undefined;
+    BottomSheet: undefined;
+    RadioButton: undefined;
+    SelectSheet: undefined;
+    SelectBox: undefined;
+    Seperator: undefined;
+    StateCard: undefined;
+    TextInput: undefined;
+    CheckBox: undefined;
+    SiteLogo: undefined;
+    SnackBar: undefined;
+    Loading: undefined;
+    RowCard: undefined;
+    Sticker: undefined;
+    Avatar: undefined;
+    Button: undefined;
+    Dialog: undefined;
+    Switch: undefined;
+    Modal: undefined;
+    Toast: undefined;
+    Chip: undefined;
+    Text: undefined;
+};
+
 type RootStackParamList = {
-    TextPage: undefined;
+    GettingStarted: NavigatorScreenParams<GettingStartedStackParamList> | undefined;
+    CoreFeatures: NavigatorScreenParams<CoreFeaturesStackParamList> | undefined;
+    Components: NavigatorScreenParams<ComponentsStackParamList> | undefined;
     Home: undefined;
 };
+
 export type {
     RootStackParamList as default
 };

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

@@ -0,0 +1,289 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Avatar,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IAvatarProps
+} from "ncore-ui-kit";
+
+const AVATAR_SIZES: Array<IAvatarProps["size"]> = [
+    "small",
+    "medium",
+    "large",
+    "xLarge",
+    "xSmall"
+];
+const AVATAR_STATUS_INDICATOR_TYPES: Array<IAvatarProps["statusIndicatorType"]> = [
+    "online",
+    "offline",
+    "busy",
+    "away",
+    "idle"
+];
+
+const AVATAR_SIZES_DATA = AVATAR_SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const AVATAR_STATUS_INDICATOR_TYPES_DATA = AVATAR_STATUS_INDICATOR_TYPES.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+const AvatarPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        statusIndicatorIndex,
+        setStatusIndicatorIndex
+    ] = useState<number>(1);
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(3);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        imageUrl,
+        setImageUrl
+    ] = useState<string>(
+        "https://ncore.nibgat.space/assets/images/ncorelogo.png",
+    );
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("John Doe");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Avatar
+                    statusIndicatorType={
+                        AVATAR_STATUS_INDICATOR_TYPES[statusIndicatorIndex]
+                    }
+                    size={AVATAR_SIZES[sizeIndex]}
+                    isStatusIndicator={true}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    imageUrl={imageUrl}
+                    title={title}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {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]!
+                            ]
+
+                            : []
+
+                    }
+                    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
+                        ]
+                            ? [
+                                    AVATAR_STATUS_INDICATOR_TYPES_DATA[
+                                        statusIndicatorIndex
+                                    ]!
+                            ]
+                            : []
+                    }
+                    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}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
+                        }}
+                        title={localize("avatar-toggleDisabled")}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default AvatarPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,221 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    AvatarGroup,
+    CodeViewer,
+    SelectBox,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IAvatarGroupProps
+} from "ncore-ui-kit";
+
+const AVATAR_GROUP_SIZES: Array<IAvatarGroupProps["size"]> = [
+    "small",
+    "medium",
+    "large",
+    "xLarge",
+    "xSmall"
+];
+
+const AVATAR_GROUP_SIZES_DATA = AVATAR_GROUP_SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const MOCK_AVATARS = [
+    {
+        imageUrl: "https://ncore.nibgat.space/assets/images/ncorelogo.png",
+        title: "Ncore System"
+    },
+    {
+        title: "Jane Smith"
+    },
+    {
+        title: "Mike Ross"
+    },
+    {
+        title: "John Doe"
+    }
+];
+
+const AvatarGroupPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(3);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <AvatarGroup
+                    size={AVATAR_GROUP_SIZES[sizeIndex]}
+                    isDisabled={isDisabled}
+                    avatars={MOCK_AVATARS}
+                    isLoading={isLoading}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    AvatarGroup\n} from \"ncore-ui-kit\";\n\n<AvatarGroup\n    avatars={[\n        { title: \"John Doe\" },\n        { title: \"Jane Smith\" }\n    ]}\n    size=\"large\"\n/>"}
+                    language="tsx"
+                />
+            </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);
+                        }
+                    }}
+                    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={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        onPress={() => {
+                            setIsLoading(!isLoading);
+                        }}
+                        title={localize("avatarGroup-toggleLoading")}
+                        spreadBehaviour="free"
+                        isActive={isLoading}
+                    />
+                    <Switch
+                        title={localize(
+                            "avatarGroup-toggleDisabled",
+                        )}
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
+                        }}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default AvatarGroupPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,201 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    BottomSheet,
+    CodeViewer,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const BottomSheetPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        isWorkWithPortal,
+        setIsWorkWithPortal
+    ] = useState<boolean>(true);
+
+    const [
+        isSwipeClose,
+        setIsSwipeClose
+    ] = useState<boolean>(true);
+
+    const [
+        isShowHandle,
+        setIsShowHandle
+    ] = useState<boolean>(true);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Button
+                    title={localize("bottomSheet-openSheet")}
+                    onPress={() => setIsActive(true)}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    BottomSheet\n} from \"ncore-ui-kit\";\n\n<BottomSheet\n    isActive={isActive}\n    onClose={() => setIsActive(false)}\n>\n    <Text>BottomSheet Content</Text>\n</BottomSheet>"}
+                    language="tsx"
+                />
+            </View>
+            <View
+                style={[
+                    stylesheet.rowSpaceBetween,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <View
+                    style={stylesheet.rowSpaceBetween2}
+                >
+                    <Switch
+                        title={localize(
+                            "bottomSheet-toggleSwipeClose",
+                        )}
+                        onPress={() => {
+                            setIsSwipeClose(!isSwipeClose);
+                        }}
+                        isActive={isSwipeClose}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize(
+                            "bottomSheet-toggleShowHandle",
+                        )}
+                        onPress={() => {
+                            setIsShowHandle(!isShowHandle);
+                        }}
+                        isActive={isShowHandle}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsWorkWithPortal(!isWorkWithPortal);
+                        }}
+                        title={localize("bottomSheet-togglePortal")}
+                        isActive={isWorkWithPortal}
+                        spreadBehaviour="free"
+                    />
+                </View>
+            </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

@@ -0,0 +1,65 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,374 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IButtonProps
+} from "ncore-ui-kit";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const BUTTON_TYPES: Array<IButtonProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+const BUTTON_VARIANTS: Array<IButtonProps["variant"]> = [
+    "filled",
+    "outline",
+    "ghost"
+];
+const BUTTON_SIZES: Array<IButtonProps["size"]> = [
+    "small",
+    "medium",
+    "large"
+];
+
+const BUTTON_TYPES_DATA = BUTTON_TYPES.map(item => ({
+    __key: item as string,
+    __title: item as string
+}));
+
+const BUTTON_SPREAD_BEHAVIOURS: Array<IButtonProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const BUTTON_VARIANTS_DATA = BUTTON_VARIANTS.map(item => ({
+    __key: item as string,
+    __title: item as string
+}));
+
+const BUTTON_SIZES_DATA = BUTTON_SIZES.map(item => ({
+    __key: item as string,
+    __title: item as string
+}));
+
+const ButtonPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(1);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isCustomPadding,
+        setIsCustomPadding
+    ] = useState<boolean>(false);
+
+    const [
+        showIcon,
+        setShowIcon
+    ] = useState<boolean>(false);
+
+    const [
+        iconDirection,
+        setIconDirection
+    ] = useState<"left" | "right">("left");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            headerShown: true,
+            header: () => <Header
+                isWrapSafeareaContext={false}
+                title={localize("button")}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />
+        });
+    }, []);
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("button-desc")}
+            </Text>
+            <View
+                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]}
+                    title={title || localize("example-button")}
+                    variant={BUTTON_VARIANTS[variantIndex]}
+                    isCustomPadding={isCustomPadding}
+                    type={BUTTON_TYPES[typeIndex]}
+                    size={BUTTON_SIZES[sizeIndex]}
+                    iconDirection={iconDirection}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    icon={showIcon ? ({
+                        color,
+                        size
+                    }) => <HomeIcon
+                        color={colors.content.icon[color]}
+                        size={size}
+                    /> : undefined}
+                    style={{
+                        marginBottom: spaces.spacingLg
+                    }}
+                    onPress={() => {
+                    }}
+                />
+            </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")}
+                spreadBehaviour="stretch"
+                onChangeText={setTitle}
+                value={title}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            />
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    initialSelectedItems={
+
+                        BUTTON_TYPES_DATA[typeIndex]
+
+                            ? [
+                                BUTTON_TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    title={localize("change-type")}
+                    spreadBehaviour="free"
+                    data={BUTTON_TYPES_DATA}
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = BUTTON_TYPES.indexOf(selectedItems[0]!.__key as IButtonProps["type"]);
+                            if (index !== -1) setTypeIndex(index);
+                        }
+                    }}
+                />
+                <SelectBox
+                    initialSelectedItems={
+
+                        BUTTON_VARIANTS_DATA[variantIndex]
+
+                            ? [
+                                BUTTON_VARIANTS_DATA[variantIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    title={localize("change-variant")}
+                    data={BUTTON_VARIANTS_DATA}
+                    spreadBehaviour="free"
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = BUTTON_VARIANTS.indexOf(selectedItems[0]!.__key as IButtonProps["variant"]);
+                            if (index !== -1) setVariantIndex(index);
+                        }
+                    }}
+                />
+                <Button
+                    title={`${localize("change-spread")}: ${BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}`}
+                    verticalLocationForStretchFix="center"
+                    isFixVerticalStretch={true}
+                    spreadBehaviour="free"
+                    onPress={() => {
+                        setSpreadIndex(prev => prev + 1 > BUTTON_SPREAD_BEHAVIOURS.length - 1 ? 0 : prev + 1);
+                    }}
+                />
+                <SelectBox
+                    initialSelectedItems={
+
+                        BUTTON_SIZES_DATA[sizeIndex]
+
+                            ? [
+                                BUTTON_SIZES_DATA[sizeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    title={localize("change-size")}
+                    spreadBehaviour="free"
+                    data={BUTTON_SIZES_DATA}
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = BUTTON_SIZES.indexOf(selectedItems[0]!.__key as IButtonProps["size"]);
+                            if (index !== -1) setSizeIndex(index);
+                        }
+                    }}
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        onPress={() => {
+                            setIconDirection(iconDirection === "left" ? "right" : "left");
+                        }}
+                        title={localize("toggle-icon-direction")}
+                        isActive={iconDirection === "right"}
+                        subTitle={localize(iconDirection)}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        onPress={() => {
+                            setShowIcon(!showIcon);
+                        }}
+                        title={localize("toggle-icon")}
+                        spreadBehaviour="free"
+                        isActive={showIcon}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsLoading(!isLoading);
+                        }}
+                        title={localize("toggle-loading")}
+                        spreadBehaviour="free"
+                        isActive={isLoading}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
+                        }}
+                        title={localize("toggle-disabled")}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsCustomPadding(!isCustomPadding);
+                        }}
+                        title={localize("toggle-custom-padding")}
+                        isActive={isCustomPadding}
+                        spreadBehaviour="free"
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default ButtonPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,343 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    type ICheckBoxProps,
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    CheckBox,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const CHECK_BOX_TYPES: Array<ICheckBoxProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+
+const CHECK_BOX_SPREAD_BEHAVIOURS: Array<ICheckBoxProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const CHECK_BOX_TYPES_DATA = CHECK_BOX_TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const CHECK_BOX_SPREAD_BEHAVIOURS_DATA = CHECK_BOX_SPREAD_BEHAVIOURS.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+type IsCheckedType = "checked" | "partially" | null;
+
+const IS_CHECKED_TYPES: Array<IsCheckedType> = [
+    "partially",
+    "checked",
+    null
+];
+
+const IS_CHECKED_TYPES_DATA = IS_CHECKED_TYPES.map((item) => ({
+    __title: String(item),
+    __key: String(item)
+}));
+
+const CheckBoxPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        isCheckedIndex,
+        setIsCheckedIndex
+    ] = useState<number>(0);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("Subtitle");
+
+    const [
+        isFlip,
+        setIsFlip
+    ] = useState<boolean>(false);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("CheckBox Title");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    CheckBox\n} from \"ncore-ui-kit\";\n\n<CheckBox\n    title=\"CheckBox Title\"\n    subTitle=\"Subtitle\"\n    type=\"primary\"\n/>"}
+                    language="tsx"
+                />
+            </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]!
+                            ]
+
+                            : []
+
+                    }
+                    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]
+                            ? [
+                                    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);
+                        }
+                    }}
+                    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}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
+                        }}
+                        title={localize("checkBox-toggleDisabled")}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsFlip(!isFlip);
+                        }}
+                        title={localize("checkBox-toggleFlip")}
+                        spreadBehaviour="free"
+                        isActive={isFlip}
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default CheckBoxPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,318 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Header,
+    Switch,
+    Chip,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IChipProps
+} from "ncore-ui-kit";
+
+const CHIP_TYPES: Array<IChipProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+const CHIP_SPREAD_BEHAVIOURS: Array<IChipProps["spreadBehaviour"]> = [
+    "baseline",
+    "free"
+];
+const CHIP_SIZES: Array<IChipProps["size"]> = [
+    "small",
+    "medium",
+    "large"
+];
+
+const CHIP_TYPES_DATA = CHIP_TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const CHIP_SPREAD_BEHAVIOURS_DATA = CHIP_SPREAD_BEHAVIOURS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const CHIP_SIZES_DATA = CHIP_SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const ChipPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(1);
+
+    const [
+        isClosable,
+        setIsClosable
+    ] = useState<boolean>(true);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Chip Title");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Chip
+                    spreadBehaviour={CHIP_SPREAD_BEHAVIOURS[spreadIndex]}
+                    type={CHIP_TYPES[typeIndex]}
+                    size={CHIP_SIZES[sizeIndex]}
+                    isClosable={isClosable}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    title={title}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Chip\n} from \"ncore-ui-kit\";\n\n<Chip\n    title=\"Chip Title\"\n    type=\"primary\"\n    size=\"medium\"\n/>"}
+                    language="tsx"
+                />
+            </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);
+                        }
+                    }}
+                    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);
+                        }
+                    }}
+                    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={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        onPress={() => {
+                            setIsClosable(!isClosable);
+                        }}
+                        title={localize("chip-toggleClosable")}
+                        spreadBehaviour="free"
+                        isActive={isClosable}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsLoading(!isLoading);
+                        }}
+                        title={localize("chip-toggleLoading")}
+                        spreadBehaviour="free"
+                        isActive={isLoading}
+                    />
+                    <Switch
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
+                        }}
+                        title={localize("chip-toggleDisabled")}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default ChipPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,109 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    DateSelector,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const DateSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-dateSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("dateSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-dateSelector")}
+            </Text>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    DateSelector\n} from \"ncore-ui-kit\";\n\n<DateSelector\n    setIsSheetContentReady={() => {}}\n    selectMultipleObject={() => {}}\n    selectObject={() => {}}\n    variant=\"single\"\n/>"}
+                    language="tsx"
+                />
+            </View>
+            <DateSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                variant="single"
+            />
+        </View>
+    </PageContainer>;
+};
+export default DateSelectorPage;

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

@@ -0,0 +1,42 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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/dateTimePicker/index.tsx

@@ -0,0 +1,331 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    DateTimePicker,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    DateTimePickerPickerType,
+    IDateTimePickerProps
+} from "ncore-ui-kit";
+
+const DATE_TIME_PICKER_TYPES: Array<IDateTimePickerProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "success",
+    "info",
+    "question"
+];
+const DATE_TIME_PICKER_SPREAD_BEHAVIOURS: Array<IDateTimePickerProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+const DATE_TIME_PICKER_PICKER_TYPES: Array<IDateTimePickerProps["pickerType"]> = [
+    "date",
+    "time",
+    "date-time"
+];
+const DATE_TIME_PICKER_VARIANTS: Array<IDateTimePickerProps["variant"]> = [
+    "single",
+    "range",
+    "rrule"
+];
+
+const DATE_TIME_PICKER_TYPES_DATA = DATE_TIME_PICKER_TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const DATE_TIME_PICKER_SPREAD_BEHAVIOURS_DATA =
+    DATE_TIME_PICKER_SPREAD_BEHAVIOURS.map((item) => ({
+        __title: item as string,
+        __key: item as string
+    }));
+
+const DATE_TIME_PICKER_PICKER_TYPES_DATA = DATE_TIME_PICKER_PICKER_TYPES.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+const DATE_TIME_PICKER_VARIANTS_DATA = DATE_TIME_PICKER_VARIANTS.map(
+    (item) => ({
+        __title: item as string,
+        __key: item as string
+    }),
+);
+
+const DateTimePickerPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(1);
+
+    const [
+        pickerTypeIndex,
+        setPickerTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    DateTimePicker\n} from \"ncore-ui-kit\";\n\n<DateTimePicker\n    title=\"Title\"\n    pickerType=\"date\"\n    variant=\"single\"\n    type=\"default\"\n/>"}
+                    language="tsx"
+                />
+            </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]!
+                            ]
+
+                            : []
+
+                    }
+                    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]
+                            ? [
+                                    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 =
+                                    DATE_TIME_PICKER_PICKER_TYPES.indexOf(
+                                        selectedItems[0]!
+                                            .__key as DateTimePickerPickerType,
+                                    );
+                            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-toggleDisabled",
+                        )}
+                        onPress={() => {
+                            setIsDisabled(!isDisabled);
+                        }}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default DateTimePickerPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,131 @@
+import {
+    useLayoutEffect,
+    useState,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    DateTimeSheet,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Button,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IBottomSheetRef
+} from "ncore-ui-kit";
+
+const DateTimeSheetPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const bottomSheetRef = useRef<IBottomSheetRef>(null);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-dateTimeSheet")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("dateTimeSheet-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-dateTimeSheet")}
+            </Text>
+            <Button
+                onPress={() => setIsActive(true)}
+                title="Open DateTime Sheet"
+                spreadBehaviour="stretch"
+            />
+            <View
+                style={{
+                    marginVertical: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    DateTimeSheet\n} from \"ncore-ui-kit\";\n\n<DateTimeSheet\n    isActive={isActive}\n    setIsActive={setIsActive}\n    pickerType=\"date\"\n    variant=\"single\"\n/>"}
+                    language="tsx"
+                />
+            </View>
+            <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

@@ -0,0 +1,42 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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/dialog/index.tsx

@@ -0,0 +1,233 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Button,
+    Dialog,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IDialogProps
+} from "ncore-ui-kit";
+
+const DIALOG_VARIANTS: Array<IDialogProps["variant"]> = [
+    "yes-no",
+    "ok",
+    "info"
+];
+
+const DIALOG_VARIANTS_DATA = DIALOG_VARIANTS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const DialogPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        isVisible,
+        setIsVisible
+    ] = useState<boolean>(false);
+
+    const [
+        content,
+        setContent
+    ] = useState<string>("This is a dialog content.");
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Dialog Title");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Button
+                    title={localize("dialog-openDialog")}
+                    onPress={() => setIsVisible(true)}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Dialog\n} from \"ncore-ui-kit\";\n\n<Dialog\n    title=\"Dialog Title\"\n    content=\"This is a dialog content.\"\n    isVisible={isVisible}\n    variant=\"yes-no\"\n/>"}
+                    language="tsx"
+                />
+            </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]!
+                            ]
+
+                            : []
+
+                    }
+                    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();
+                }
+            }}
+            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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,134 @@
+import {
+    useLayoutEffect,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    EmbeddedMenu,
+    CodeViewer,
+    Button,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IEmbeddedMenuRef
+} from "ncore-ui-kit";
+import {
+    SettingsIcon,
+    HomeIcon
+} from "lucide-react-native";
+
+const EmbeddedMenuPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const menuRef = useRef<IEmbeddedMenuRef>(null);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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
+            ]}
+            isWorkWithHeaderSpace={false}
+            isScrollable={true}
+        >
+            <View
+                style={[
+                    stylesheet.contentContainer
+                ]}
+            >
+                <Text
+                    variant="bodyMediumSize"
+                    color="mid"
+                    style={stylesheet.descText}
+                >
+                    {localize("embeddedMenu-desc")}
+                </Text>
+                <Button
+                    title={localize("embeddedMenu-openMenu")}
+                    onPress={() => menuRef.current?.open()}
+                    spreadBehaviour="stretch"
+                />
+                <View
+                    style={{
+                        marginVertical: spaces.spacingMd
+                    }}
+                >
+                    <Text
+                        variant="headlineSmallSize"
+                        style={{
+                            marginBottom: spaces.spacingSm
+                        }}
+                    >
+                        {localize("usage")}
+                    </Text>
+                    <CodeViewer
+                        code={"import {\n    EmbeddedMenu\n} from \"ncore-ui-kit\";\n\n<EmbeddedMenu\n    buttons={[\n        { title: \"Settings\" },\n        { title: \"Home\" }\n    ]}\n/>"}
+                        language="tsx"
+                    />
+                </View>
+            </View>
+        </PageContainer>
+    </View>;
+};
+export default EmbeddedMenuPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    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/header/index.tsx

@@ -0,0 +1,141 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    TextInput,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const HeaderPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Header Example");
+
+    const [
+        isGoBackEnable,
+        setIsGoBackEnable
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Header
+                    isWrapSafeareaContext={false}
+                    isGoBackEnable={isGoBackEnable}
+                    navigation={navigation}
+                    title={title}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Header\n} from \"ncore-ui-kit\";\n\n<Header\n    title=\"Header Example\"\n    isGoBackEnable={true}\n/>"}
+                    language="tsx"
+                />
+            </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>
+        </View>
+    </PageContainer>;
+};
+export default HeaderPage;

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

@@ -0,0 +1,57 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    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

@@ -0,0 +1,351 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    HighlightButton,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IHighlightButtonProps
+} from "ncore-ui-kit";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const TYPES: Array<IHighlightButtonProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "neutral",
+    "success",
+    "info",
+    "glass"
+];
+const SIZES: Array<IHighlightButtonProps["size"]> = [
+    "small",
+    "medium",
+    "large"
+];
+const SPREAD_BEHAVIOURS: Array<IHighlightButtonProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const SIZES_DATA = SIZES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const HighlightButtonPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(1);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isCustomPadding,
+        setIsCustomPadding
+    ] = useState<boolean>(false);
+
+    const [
+        showIcon,
+        setShowIcon
+    ] = useState<boolean>(false);
+
+    const [
+        iconDirection,
+        setIconDirection
+    ] = useState<"left" | "right">("left");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    HighlightButton\n} from \"ncore-ui-kit\";\n\n<HighlightButton\n    title=\"Highlight Button\"\n    onPress={() => {}}\n    type=\"primary\"\n/>"}
+                    language="tsx"
+                />
+            </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);
+                        }
+                    }}
+                    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);
+                        }
+                    }}
+                    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={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        onPress={() =>
+                            setIconDirection(
+                                iconDirection === "left" ? "right" : "left",
+                            )
+                        }
+                        title={localize(
+                            "highlightButton-toggleIconDir",
+                        )}
+                        isActive={iconDirection === "right"}
+                        spreadBehaviour="free"
+                    />
+                    <Switch
+                        title={localize(
+                            "highlightButton-toggleIcon",
+                        )}
+                        onPress={() => setShowIcon(!showIcon)}
+                        spreadBehaviour="free"
+                        isActive={showIcon}
+                    />
+                    <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"
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default HighlightButtonPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,168 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    Loading,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    ILoadingProps
+} from "ncore-ui-kit";
+
+const SIZES: Array<ILoadingProps["size"]> = [
+    16,
+    24,
+    32
+];
+
+const SIZES_DATA = SIZES.map((item) => ({
+    __title: String(item),
+    __key: String(item)
+}));
+
+const LoadingPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        sizeIndex,
+        setSizeIndex
+    ] = useState<number>(1);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Loading
+                    size={SIZES[sizeIndex]}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Loading\n} from \"ncore-ui-kit\";\n\n<Loading size={24} />"}
+                    language="tsx"
+                />
+            </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]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("loading-changeSize")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={SIZES_DATA}
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default LoadingPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,98 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    LocaleSwitcher,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const LocaleSwitcherPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-localeSwitcher")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("localeSwitcher-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-localeSwitcher")}
+            </Text>
+            <LocaleSwitcher />
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    LocaleSwitcher\n} from \"ncore-ui-kit\";\n\n<LocaleSwitcher />"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default LocaleSwitcherPage;

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

@@ -0,0 +1,43 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        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

@@ -0,0 +1,137 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    MainHeader,
+    CodeViewer,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const MainHeaderPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        isWorkWithSeperator,
+        setIsWorkWithSeperator
+    ] = useState<boolean>(true);
+
+    const [
+        isWorkWithSticky,
+        setIsWorkWithSticky
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("mainHeader-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[stylesheet.container]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <MainHeader
+                    isWorkWithSafeAreaView={false}
+                    isWorkWithSeperator={isWorkWithSeperator}
+                    isWorkWithSticky={isWorkWithSticky}
+                    isWorkWithPortal={false}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    MainHeader\n} from \"ncore-ui-kit\";\n\n<MainHeader />"}
+                    language="tsx"
+                />
+            </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>
+        </View>
+    </PageContainer>;
+};
+export default MainHeaderPage;

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

@@ -0,0 +1,53 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    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

@@ -0,0 +1,123 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    MarkdownViewer,
+    PageContainer,
+    TextAreaInput,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const MarkdownViewerPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        content,
+        setContent
+    ] = useState<string>(
+        "# Markdown Viewer\n\nThis is a **MarkdownViewer** component from *NCore UI Kit*.\n\n- It supports lists\n- And bold text",
+    );
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.marginContainer}
+            >
+                {localize("markdownViewer-desc")}
+            </Text>
+            <TextAreaInput
+                placeholder={localize("markdownViewer-enterContent")}
+                title={localize("markdownViewer-contentLabel")}
+                spreadBehaviour="stretch"
+                onChangeText={setContent}
+                isUpdateOnRealtime={true}
+                value={content}
+            />
+            <View
+                style={[
+                    stylesheet.paddedMarginContainer,
+                    {
+                        borderColor: colors.content.border.subtle,
+                        borderRadius: radiuses.form,
+                        marginTop: spaces.spacingMd,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <MarkdownViewer
+                    content={content}
+                />
+            </View>
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    MarkdownViewer\n} from \"ncore-ui-kit\";\n\n<MarkdownViewer\n    content=\"# Hello World\"\n/>"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default MarkdownViewerPage;

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

@@ -0,0 +1,49 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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
+    },
+    markdownEditor: {
+        minHeight: 350
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,130 @@
+import {
+    useLayoutEffect,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Button,
+    Header,
+    Menu,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IMenuRef
+} from "ncore-ui-kit";
+import {
+    SettingsIcon,
+    HomeIcon
+} from "lucide-react-native";
+
+const MenuPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const menuRef = useRef<IMenuRef>(null);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                isWrapSafeareaContext={false}
+                title={localize("menu-title")}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("menu-desc")}
+            </Text>
+            <Button
+                title={localize("menu-openMenu")}
+                onPress={() => menuRef.current?.open()}
+                spreadBehaviour="stretch"
+            />
+            <View
+                style={{
+                    marginVertical: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Menu\n} from \"ncore-ui-kit\";\n\n<Menu\n    buttons={[\n        { title: \"Settings\" },\n        { title: \"Home\" }\n    ]}\n/>"}
+                    language="tsx"
+                />
+            </View>
+        </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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    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/modal/index.tsx

@@ -0,0 +1,128 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Button,
+    Modal,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const ModalPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-modal")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("modal-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-modal")}
+            </Text>
+            <Button
+                onPress={() => setIsActive(true)}
+                spreadBehaviour="stretch"
+                title="Open Modal"
+            />
+            <View
+                style={{
+                    marginVertical: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Modal\n} from \"ncore-ui-kit\";\n\n<Modal\n    isActive={isActive}\n    onOverlayPress={() => setIsActive(false)}\n>\n    <View>\n        <Text>Modal Content</Text>\n    </View>\n</Modal>"}
+                    language="tsx"
+                />
+            </View>
+            <Modal
+                onOverlayPress={() => setIsActive(false)}
+                isActive={isActive}
+                id="example-modal"
+            >
+                <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>;
+};
+export default ModalPage;

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

@@ -0,0 +1,48 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    modalContent: {
+        backgroundColor: "white",
+        borderRadius: 10,
+        padding: 20,
+        gap: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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/monthSelector/index.tsx

@@ -0,0 +1,109 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    MonthSelector,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const MonthSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-monthSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("monthSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-monthSelector")}
+            </Text>
+            <MonthSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                variant="single"
+            />
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    MonthSelector\n} from \"ncore-ui-kit\";\n\n<MonthSelector\n    variant=\"single\"\n/>"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default MonthSelectorPage;

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

@@ -0,0 +1,42 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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/notificationIndicator/index.tsx

@@ -0,0 +1,205 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NotificationIndicator,
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    INotificationIndicatorProps
+} from "ncore-ui-kit";
+import {
+    Bell as BellIcon
+} from "lucide-react-native";
+
+const TYPES: Array<INotificationIndicatorProps["type"]> = [
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const NotificationIndicatorPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        count,
+        setCount
+    ] = useState<number>(5);
+
+    const [
+        isShowCount,
+        setIsShowCount
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <NotificationIndicator
+                    type={TYPES[typeIndex]}
+                    isVisible={isShowCount}
+                    title={count}
+                >
+                    <View
+                        style={[
+                            stylesheet.borderedCard,
+                            {
+                                borderRadius: radiuses.form,
+                                padding: spaces.spacingSm
+                            }
+                        ]}
+                    >
+                        <BellIcon
+                            color={colors.content.icon.mid}
+                            size={32}
+                        />
+                    </View>
+                </NotificationIndicator>
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    NotificationIndicator\n} from \"ncore-ui-kit\";\n\n<NotificationIndicator\n    type=\"danger\"\n    isVisible={true}\n    title={5}\n>\n    <View>\n        <Text>Content</Text>\n    </View>\n</NotificationIndicator>"}
+                    language="tsx"
+                />
+            </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]!] : []
+                    }
+                    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>
+        </View>
+    </PageContainer>;
+};
+export default NotificationIndicatorPage;

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

@@ -0,0 +1,58 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,352 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    NumericInput,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    INumericInputProps
+} from "ncore-ui-kit";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const TYPES: Array<INumericInputProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const VARIANTS: Array<INumericInputProps["variant"]> = [
+    "text",
+    "hidden"
+];
+const SPREAD_BEHAVIOURS: Array<INumericInputProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const VARIANTS_DATA = VARIANTS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const NumericInputPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        showIcon,
+        setShowIcon
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isRequired,
+        setIsRequired
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    const [
+        val,
+        setVal
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    NumericInput\n} from \"ncore-ui-kit\";\n\n<NumericInput\n    title=\"Title\"\n    placeholder=\"Placeholder\"\n    value={val}\n    onChangeText={setVal}\n/>"}
+                    language="tsx"
+                />
+            </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]!
+                            ]
+
+                            : []
+
+                    }
+                    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]!
+                            ]
+
+                            : []
+
+                    }
+                    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"
+                        isActive={showIcon}
+                    />
+                    <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>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default NumericInputPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,99 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const PageContainerPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-pageContainer")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {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
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    PageContainer\n} from \"ncore-ui-kit\";\n\n<PageContainer>\n    <View>\n        <Text>Content</Text>\n    </View>\n</PageContainer>"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default PageContainerPage;

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

@@ -0,0 +1,42 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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/paletteSwitcher/index.tsx

@@ -0,0 +1,98 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PaletteSwitcher,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const PaletteSwitcherPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-paletteSwitcher")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("paletteSwitcher-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-paletteSwitcher")}
+            </Text>
+            <PaletteSwitcher />
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    PaletteSwitcher\n} from \"ncore-ui-kit\";\n\n<PaletteSwitcher />"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default PaletteSwitcherPage;

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

@@ -0,0 +1,43 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        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

@@ -0,0 +1,259 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    RadioButton,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IRadioButtonProps
+} from "ncore-ui-kit";
+
+const TYPES: Array<IRadioButtonProps["type"]> = [
+    "primary",
+    "danger",
+    "warning",
+    "success",
+    "info"
+];
+const SPREAD_BEHAVIOURS: Array<IRadioButtonProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const RadioButtonPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    const [
+        isSelected,
+        setIsSelected
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <RadioButton
+                    title={
+                        title || localize("radioButton-exampleTitle")
+                    }
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    onPress={() => setIsSelected(!isSelected)}
+                    type={TYPES[typeIndex]}
+                    isDisabled={isDisabled}
+                    isChecked={isSelected}
+                    isLoading={isLoading}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    RadioButton\n} from \"ncore-ui-kit\";\n\n<RadioButton\n    title=\"Example Title\"\n    isChecked={false}\n    onPress={() => {}}\n/>"}
+                    language="tsx"
+                />
+            </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);
+                        }
+                    }}
+                    initialSelectedItems={
+
+                        TYPES_DATA[typeIndex]
+
+                            ? [
+                                TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("radioButton-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
+                />
+                <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}
+                >
+                    <Switch
+                        title={localize(
+                            "radioButton-toggleDisabled",
+                        )}
+                        onPress={() => setIsDisabled(!isDisabled)}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <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>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default RadioButtonPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,183 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    TextInput,
+    RowCard,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import {
+    ChevronRight as ChevronRightIcon,
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const RowCardPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        showLeftIcon,
+        setShowLeftIcon
+    ] = useState<boolean>(true);
+
+    const [
+        showRightIcon,
+        setShowRightIcon
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <RowCard
+                    rightIcon={showRightIcon ? ({
+                        color,
+                        size
+                    }) => <ChevronRightIcon
+                        color={
+                            colors.content.icon[
+                                        color as keyof typeof colors.content.icon
+                            ]
+                        }
+                        size={size}
+                    />
+                        : undefined}
+                    icon={showLeftIcon ? ({
+                        color,
+                        size
+                    }) => <HomeIcon
+                        color={
+                            colors.content.icon[
+                                        color as keyof typeof colors.content.icon
+                            ]
+                        }
+                        size={size}
+                    />
+                        : undefined}
+                    title={title || localize("rowCard-exampleTitle")}
+                    onPress={() => {}}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    RowCard\n} from \"ncore-ui-kit\";\n\n<RowCard\n    title=\"Row Card\"\n    onPress={() => {}}\n/>"}
+                    language="tsx"
+                />
+            </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>
+        </View>
+    </PageContainer>;
+};
+export default RowCardPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,319 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    ISelectBoxProps
+} from "ncore-ui-kit";
+
+const TYPES: Array<ISelectBoxProps<unknown>["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const SPREAD_BEHAVIOURS: Array<ISelectBoxProps<unknown>["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const SelectBoxPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isSearchable,
+        setIsSearchable
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isMultiSelect,
+        setIsMultiSelect
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    SelectBox\n} from \"ncore-ui-kit\";\n\n<SelectBox\n    title=\"SelectBox\"\n    data={[{__title: \"A\", __key: \"1\"}]}\n    titleExtractor={(item) => item.__title}\n    keyExtractor={(item) => item.__key}\n/>"}
+                    language="tsx"
+                />
+            </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);
+                        }
+                    }}
+                    initialSelectedItems={
+
+                        TYPES_DATA[typeIndex]
+
+                            ? [
+                                TYPES_DATA[typeIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("selectBox-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
+                />
+                <Button
+                    onPress={() => {
+                        setSpreadIndex((prev) =>
+                            prev + 1 > SPREAD_BEHAVIOURS.length - 1
+                                ? 0
+                                : prev + 1,
+                        );
+                    }}
+                    title={
+                        `${localize("selectBox-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        title={localize("selectBox-toggleDisabled")}
+                        onPress={() => setIsDisabled(!isDisabled)}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <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>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default SelectBoxPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,137 @@
+import {
+    useLayoutEffect,
+    useState,
+    useRef
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    SelectSheet,
+    CodeViewer,
+    Header,
+    Button,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    IBottomSheetRef
+} from "ncore-ui-kit";
+
+const SelectSheetPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const bottomSheetRef = useRef<IBottomSheetRef>(null);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-selectSheet")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("selectSheet-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-selectSheet")}
+            </Text>
+            <Button
+                onPress={() => setIsActive(true)}
+                spreadBehaviour="stretch"
+                title="Open Select Sheet"
+            />
+            <View
+                style={{
+                    marginVertical: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    SelectSheet\n} from \"ncore-ui-kit\";\n\n<SelectSheet\n    isActive={isActive}\n    setIsActive={setIsActive}\n    data={[]}\n/>"}
+                    language="tsx"
+                />
+            </View>
+            <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

@@ -0,0 +1,42 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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/seperator/index.tsx

@@ -0,0 +1,123 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Seperator,
+    TextInput,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const SeperatorPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("Or");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Seperator
+                    title={title}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Seperator\n} from \"ncore-ui-kit\";\n\n<Seperator\n    title=\"Or\"\n/>"}
+                    language="tsx"
+                />
+            </View>
+            <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

@@ -0,0 +1,47 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,167 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    TextInput,
+    SiteLogo,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const SiteLogoPage = () => {
+    const {
+        activeTheme,
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        isShowIcon,
+        setIsShowIcon
+    ] = useState<boolean>(true);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    SiteLogo\n} from \"ncore-ui-kit\";\n\n<SiteLogo\n    imageUrl=\"https://.../logo.png\"\n    title=\"Site Title\"\n/>"}
+                    language="tsx"
+                />
+            </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
+                onPress={() => setIsShowIcon(!isShowIcon)}
+                title={localize("siteLogo-toggleIcon")}
+                spreadBehaviour="free"
+                isActive={isShowIcon}
+            />
+        </View>
+    </PageContainer>;
+};
+export default SiteLogoPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,119 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitSnackBar,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SnackBar,
+    Button,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const SnackBarPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-snackBar")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        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"
+            >
+                {localize("components-snackBar")}
+            </Text>
+            <View
+                style={stylesheet.customContainer}
+            >
+                <SnackBar
+                    title="This is an example SnackBar"
+                    subTitle="This is an example subtitle"
+                    type="primary"
+                    id="example-snackbar"
+                />
+                <Button
+                    onPress={() => {
+                        NCoreUIKitSnackBar.open({
+                            subTitle: "This is an example subtitle",
+                            title: "This is an example SnackBar",
+                            type: "primary"
+                        });
+                    }}
+                    title="Open SnackBar"
+                />
+            </View>
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    NCoreUIKitSnackBar\n} from \"ncore-ui-kit\";\n\nNCoreUIKitSnackBar.open({\n    title: \"Title\",\n    subTitle: \"Subtitle\",\n    type: \"primary\"\n});"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default SnackBarPage;

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

@@ -0,0 +1,49 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    customContainer: {
+        position: "relative",
+        height: 200
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,178 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    StateCard,
+    TextInput,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const StateCardPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        value,
+        setValue
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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")
+                    }
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    StateCard\n} from \"ncore-ui-kit\";\n\n<StateCard\n    title=\"Title\"\n    subTitle=\"Subtitle\"\n/>"}
+                    language="tsx"
+                />
+            </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}
+            />
+        </View>
+    </PageContainer>;
+};
+export default StateCardPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,138 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    TextInput,
+    Sticker,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import {
+    Star as StarIcon
+} from "lucide-react-native";
+
+const StickerPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Sticker
+                    icon={({
+                        color,
+                        size
+                    }) => <StarIcon
+                        color={colors.content.icon[color]}
+                        size={size}
+                    />
+                    }
+                    title={title || localize("sticker-exampleTitle")}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Sticker\n} from \"ncore-ui-kit\";\n\n<Sticker\n    icon={({ color, size }) => <StarIcon color={colors.content.icon[color]} size={size} />}\n    title=\"Title\"\n/>"}
+                    language="tsx"
+                />
+            </View>
+            <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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,222 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    TextInput,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    ISwitchProps
+} from "ncore-ui-kit";
+
+const SPREAD_BEHAVIOURS: Array<ISwitchProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const SwitchPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        subTitle,
+        setSubTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState<boolean>(false);
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <Switch
+                    title={title || localize("switch-exampleTitle")}
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    onPress={() => setIsActive(!isActive)}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    subTitle={subTitle}
+                    isActive={isActive}
+                />
+            </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Switch\n} from \"ncore-ui-kit\";\n\n<Switch\n    title=\"Title\"\n    isActive={isActive}\n    onPress={() => setIsActive(!isActive)}\n/>"}
+                    language="tsx"
+                />
+            </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,
+                        );
+                    }}
+                    title={
+                        `${localize("switch-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <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>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default SwitchPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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/text/index.tsx → example/src/pages/components/text/index.tsx

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     Button,
     Header,
     Text
@@ -17,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";
@@ -66,15 +67,24 @@ const TextPage = () => {
                 stylesheet.contentContainer
             ]}
         >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                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}
@@ -85,6 +95,24 @@ const TextPage = () => {
                     {localize("this-is-test-sub-page")}
                 </Text>
             </View>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    Text\n} from \"ncore-ui-kit\";\n\n<Text variant=\"bodyMediumSize\">\n    Hello World\n</Text>"}
+                    language="tsx"
+                />
+            </View>
             <Button
                 title={`variant = ${Object.keys(typography)[variant]}`}
                 spreadBehaviour="stretch"

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

@@ -0,0 +1,43 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        flex: 1
+    },
+    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

@@ -0,0 +1,273 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    TextAreaInput,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    ITextAreaInputProps
+} from "ncore-ui-kit";
+
+const TYPES: Array<ITextAreaInputProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const SPREAD_BEHAVIOURS: Array<ITextAreaInputProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const TextAreaInputPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isRequired,
+        setIsRequired
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    const [
+        val,
+        setVal
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[stylesheet.contentContainer]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    TextAreaInput\n} from \"ncore-ui-kit\";\n\n<TextAreaInput\n    title=\"Title\"\n    placeholder=\"Placeholder\"\n    value={value}\n    onChangeText={setValue}\n/>"}
+                    language="tsx"
+                />
+            </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);
+                        }
+                    }}
+                    initialSelectedItems={
+                        TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]!] : []
+                    }
+                    title={localize("textAreaInput-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    spreadBehaviour="free"
+                    data={TYPES_DATA}
+                />
+                <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}
+                >
+                    <Switch
+                        title={localize(
+                            "textAreaInput-toggleDisabled",
+                        )}
+                        onPress={() => setIsDisabled(!isDisabled)}
+                        spreadBehaviour="free"
+                        isActive={isDisabled}
+                    />
+                    <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>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default TextAreaInputPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,330 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    TextInput,
+    Button,
+    Header,
+    Switch,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type {
+    ITextInputProps
+} from "ncore-ui-kit";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+
+const TYPES: Array<ITextInputProps["type"]> = [
+    "default",
+    "danger",
+    "warning",
+    "question",
+    "success",
+    "info"
+];
+const VARIANTS: Array<ITextInputProps["variant"]> = [
+    "text",
+    "hidden"
+];
+const SPREAD_BEHAVIOURS: Array<ITextInputProps["spreadBehaviour"]> = [
+    "baseline",
+    "stretch",
+    "free"
+];
+
+const TYPES_DATA = TYPES.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const VARIANTS_DATA = VARIANTS.map((item) => ({
+    __title: item as string,
+    __key: item as string
+}));
+
+const TextInputPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        typeIndex,
+        setTypeIndex
+    ] = useState<number>(0);
+
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState<number>(0);
+
+    const [
+        spreadIndex,
+        setSpreadIndex
+    ] = useState<number>(0);
+
+    const [
+        title,
+        setTitle
+    ] = useState<string>("");
+
+    const [
+        isDisabled,
+        setIsDisabled
+    ] = useState<boolean>(false);
+
+    const [
+        showIcon,
+        setShowIcon
+    ] = useState<boolean>(false);
+
+    const [
+        isCleanEnabled,
+        setIsCleanEnabled
+    ] = useState<boolean>(true);
+
+    const [
+        isRequired,
+        setIsRequired
+    ] = useState<boolean>(false);
+
+    const [
+        isOptional,
+        setIsOptional
+    ] = useState<boolean>(false);
+
+    const [
+        val,
+        setVal
+    ] = useState<string>("");
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            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}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <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
+                    }
+                ]}
+            >
+                <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>
+            <View
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    TextInput\n} from \"ncore-ui-kit\";\n\n<TextInput\n    title=\"Title\"\n    placeholder=\"Placeholder\"\n    value={value}\n    onChangeText={setValue}\n/>"}
+                    language="tsx"
+                />
+            </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={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);
+                        }
+                    }}
+                    initialSelectedItems={
+
+                        VARIANTS_DATA[variantIndex]
+
+                            ? [
+                                VARIANTS_DATA[variantIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    title={localize("textInput-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("textInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`}
+                    spreadBehaviour="free"
+                />
+                <View
+                    style={stylesheet.switchesContainer}
+                >
+                    <Switch
+                        title={localize("textInput-toggleIcon")}
+                        onPress={() => setShowIcon(!showIcon)}
+                        spreadBehaviour="free"
+                        isActive={showIcon}
+                    />
+                    <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"
+                        isActive={isRequired}
+                    />
+                    <Switch
+                        title={localize("textInput-toggleOptional")}
+                        onPress={() => setIsOptional(!isOptional)}
+                        spreadBehaviour="free"
+                        isActive={isOptional}
+                    />
+                </View>
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default TextInputPage;

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

@@ -0,0 +1,40 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    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

@@ -0,0 +1,98 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    ThemeSwitcher,
+    PageContainer,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const ThemeSwitcherPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-themeSwitcher")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("themeSwitcher-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-themeSwitcher")}
+            </Text>
+            <ThemeSwitcher />
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    ThemeSwitcher\n} from \"ncore-ui-kit\";\n\n<ThemeSwitcher />"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default ThemeSwitcherPage;

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

@@ -0,0 +1,43 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        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

@@ -0,0 +1,111 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    TimeSelector,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const TimeSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-timeSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("timeSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-timeSelector")}
+            </Text>
+
+            <TimeSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                pickerType="time"
+                variant="single"
+            />
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    TimeSelector\n} from \"ncore-ui-kit\";\n\n<TimeSelector\n    variant=\"single\"\n    pickerType=\"time\"\n    selectObject={(item) => console.log(item)}\n/>"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default TimeSelectorPage;

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

@@ -0,0 +1,43 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        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

@@ -0,0 +1,119 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitToast,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Button,
+    Header,
+    Toast,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const ToastPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-toast")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        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"
+            >
+                {localize("components-toast")}
+            </Text>
+            <View
+                style={stylesheet.customContainer}
+            >
+                <Toast
+                    title="This is an example Toast"
+                    subTitle="This is an example subtitle"
+                    type="success"
+                    id="example-toast"
+                />
+                <Button
+                    onPress={() => {
+                        NCoreUIKitToast.open({
+                            subTitle: "This is an example subtitle",
+                            title: "This is an example Toast",
+                            type: "success"
+                        });
+                    }}
+                    title="Open Toast"
+                />
+            </View>
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    NCoreUIKitToast\n} from \"ncore-ui-kit\";\n\nNCoreUIKitToast.open({\n    title: \"Title\",\n    subTitle: \"Subtitle\",\n    type: \"success\"\n});"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default ToastPage;

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

@@ -0,0 +1,49 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        padding: 20,
+        width: "100%"
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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%"
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    customContainer: {
+        position: "relative",
+        height: 200
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,89 @@
+import {
+    ScrollView,
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Text
+} from "ncore-ui-kit";
+
+const WebScrollbar = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    return <PageContainer
+        isScrollable={true}
+        scrollViewProps={{
+            showsVerticalScrollIndicator: true
+        }}
+    >
+        <Text
+            variant="headlineSmallSize"
+            style={stylesheet.descText}
+        >
+            {localize("webScrollbar-title")}
+        </Text>
+        <Text
+            variant="bodyMediumSize"
+            color="mid"
+            style={stylesheet.descText}
+        >
+            {localize("webScrollbar-desc")}
+        </Text>
+        <View
+            style={{
+                marginBottom: spaces.spacingMd,
+                marginHorizontal: spaces.spacingMd
+            }}
+        >
+            <Text
+                variant="headlineSmallSize"
+                style={{
+                    marginBottom: spaces.spacingSm
+                }}
+            >
+                {localize("usage")}
+            </Text>
+            <CodeViewer
+                code={"// This component automatically wraps the scrollbars for Web.\n// It is active by default and does not require explicit use."}
+                language="tsx"
+            />
+        </View>
+        <ScrollView
+            style={[
+                stylesheet.scrollView,
+                {
+                    backgroundColor: colors.content.container.default,
+                    borderColor: colors.content.container.mid
+                }
+            ]}
+        >
+            {Array.from({
+                length: 30
+            }).map((_, index) => <View
+                key={index}
+                style={[
+                    stylesheet.item,
+                    {
+                        borderBottomColor: colors.content.container.mid
+                    }
+                ]}
+            >
+                <Text>
+                    {localize("webScrollbar-item")} {index + 1}
+                </Text>
+            </View>)}
+        </ScrollView>
+    </PageContainer>;
+};
+export default WebScrollbar;

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

@@ -0,0 +1,109 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    YearSelector,
+    CodeViewer,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+
+const YearSelectorPage = () => {
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        ,
+        setIsSheetContentReady
+    ] = useState<boolean>(false);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("components-yearSelector")}
+                isWrapSafeareaContext={false}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, []);
+
+    return <PageContainer
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("yearSelector-desc")}
+            </Text>
+            <Text
+                style={stylesheet.title}
+                variant="titleMediumSize"
+            >
+                {localize("components-yearSelector")}
+            </Text>
+            <YearSelector
+                setIsSheetContentReady={setIsSheetContentReady}
+                selectMultipleObject={() => {}}
+                selectObject={() => {}}
+                variant="single"
+            />
+            <View
+                style={{
+                    marginTop: spaces.spacingMd
+                }}
+            >
+                <Text
+                    variant="headlineSmallSize"
+                    style={{
+                        marginBottom: spaces.spacingSm
+                    }}
+                >
+                    {localize("usage")}
+                </Text>
+                <CodeViewer
+                    code={"import {\n    YearSelector\n} from \"ncore-ui-kit\";\n\n<YearSelector\n    variant=\"single\"\n    selectObject={(item) => console.log(item)}\n/>"}
+                    language="tsx"
+                />
+            </View>
+        </View>
+    </PageContainer>;
+};
+export default YearSelectorPage;

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

@@ -0,0 +1,42 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    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/coreFeatures/localeExamples/index.tsx

@@ -0,0 +1,229 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    LocaleSwitcher,
+    PageContainer,
+    Button,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon
+} from "lucide-react-native";
+
+const LocaleExamples = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize,
+        activeLocale
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                title={localize("localeExamples-title")}
+                isWrapSafeareaContext={false}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <Text
+            variant="headlineSmallSize"
+            color="high"
+        >
+            {localize("localeExamples-title")}
+        </Text>
+        <Text
+            color="mid"
+        >
+            {localize("localeExamples-desc")}
+        </Text>
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginBottom: spaces.spacingLg,
+                marginTop: spaces.spacingXl
+            }}
+        >
+            {localize("localeExamples-languageSwitcher")}
+        </Text>
+        <View
+            style={[
+                stylesheet.rowContainer,
+                {
+                    gap: spaces.spacingMd
+                }
+            ]}
+        >
+            <LocaleSwitcher/>
+        </View>
+
+        <View
+            style={[
+                stylesheet.borderedCard,
+                {
+                    backgroundColor: colors.content.container.subtle,
+                    marginTop: spaces.spacingLg,
+                    padding: spaces.spacingLg
+                }
+            ]}
+        >
+            <Text
+                variant="titleMediumSize"
+                color="high"
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                {localize("localeExamples-localizedTexts")}
+            </Text>
+
+            <Text
+                color="mid"
+                style={{
+                    marginBottom: spaces.spacingSm
+                }}
+            >
+                {localize("localeExamples-currentLanguage")}<Text
+                    color="high"
+                    variant="labelLargeSize"
+                >
+                    {activeLocale}
+                </Text>
+            </Text>
+
+            <View
+                style={[
+                    stylesheet.borderedCard2,
+                    {
+                        backgroundColor: colors.content.container.default,
+                        padding: spaces.spacingMd,
+                        gap: spaces.spacingMd
+                    }
+                ]}
+            >
+                <View>
+                    <Text
+                        variant="labelMediumSize"
+                        color="mid"
+                    >
+                        "hello-world" key
+                    </Text>
+                    <Text
+                        variant="bodyLargeSize"
+                        color="high"
+                    >
+                        {localize("hello-world")}
+                    </Text>
+                </View>
+                <View>
+                    <Text
+                        variant="labelMediumSize"
+                        color="mid"
+                    >
+                        "menu" key
+                    </Text>
+                    <Text
+                        variant="bodyLargeSize"
+                        color="high"
+                    >
+                        {localize("menu")}
+                    </Text>
+                </View>
+                <View>
+                    <Text
+                        variant="labelMediumSize"
+                        color="mid"
+                    >
+                        "installation" key
+                    </Text>
+                    <Text
+                        variant="bodyLargeSize"
+                        color="high"
+                    >
+                        {localize("installation")}
+                    </Text>
+                </View>
+            </View>
+        </View>
+
+        <View
+            style={[
+                stylesheet.rowSpaceBetween,
+                {
+                    marginTop: spaces.spacingXl
+                }
+            ]}
+        >
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronLeftIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "ThemeExamples"
+                    });
+                }}
+                title={localize("themeExamples-title")}
+            />
+
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronRightIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "TypesOverride"
+                    });
+                }}
+                title={localize("typesOverride-title")}
+                iconDirection="right"
+            />
+        </View>
+    </PageContainer>;
+};
+export default LocaleExamples;

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

@@ -0,0 +1,294 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PaletteSwitcher,
+    ThemeSwitcher,
+    PageContainer,
+    Button,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import {
+    ChevronRightIcon,
+    ChevronLeftIcon
+} from "lucide-react-native";
+
+const ThemeExamples = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("themeExamples-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <Text
+            variant="headlineSmallSize"
+            color="high"
+        >
+            {localize("themeExamples-title")}
+        </Text>
+        <Text
+            color="mid"
+        >
+            {localize("themeExamples-desc")}
+        </Text>
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginBottom: spaces.spacingLg,
+                marginTop: spaces.spacingXl
+            }}
+        >
+            {localize("themeExamples-switchers")}
+        </Text>
+        <View
+            style={[
+                stylesheet.rowContainer,
+                {
+                    gap: spaces.spacingMd
+                }
+            ]}
+        >
+            <ThemeSwitcher/>
+            <PaletteSwitcher/>
+        </View>
+        <View
+            style={[
+                stylesheet.borderedCard,
+                {
+                    backgroundColor: colors.content.container.subtle,
+                    marginTop: spaces.spacingLg,
+                    padding: spaces.spacingLg
+                }
+            ]}
+        >
+            <Text
+                variant="titleMediumSize"
+                color="high"
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                {localize("themeExamples-typographyExamples")}
+            </Text>
+            <Text
+                variant="displayLargeSize"
+                color="high"
+            >
+                {localize("themeExamples-displayLarge")}
+            </Text>
+            <Text
+                variant="headlineLargeSize"
+                color="high"
+            >
+                {localize("themeExamples-headlineLarge")}
+            </Text>
+            <Text
+                variant="titleLargeSize"
+                color="high"
+            >
+                {localize("themeExamples-titleLarge")}
+            </Text>
+            <Text
+                variant="bodyLargeSize"
+                color="mid"
+            >
+                {localize("themeExamples-bodyLarge")}
+            </Text>
+            <Text
+                variant="labelLargeSize"
+                color="mid"
+            >
+                {localize("themeExamples-labelLarge")}
+            </Text>
+            <Text
+                variant="titleMediumSize"
+                color="high"
+                style={{
+                    marginBottom: spaces.spacingMd,
+                    marginTop: spaces.spacingXl
+                }}
+            >
+                {localize("themeExamples-colorExamples")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.rowContainer2,
+                    {
+                        gap: spaces.spacingSm
+                    }
+                ]}
+            >
+                <View
+                    style={[
+                        stylesheet.borderedCard2,
+                        {
+                            backgroundColor: colors.content.container.primary,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.onPrimary
+                        }}
+                    >
+                        {localize("themeExamples-primary")}
+                    </Text>
+                </View>
+                <View
+                    style={[
+                        stylesheet.borderedCard3,
+                        {
+                            backgroundColor: colors.content.container.danger,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.danger
+                        }}
+                    >
+                        {localize("themeExamples-danger")}
+                    </Text>
+                </View>
+                <View
+                    style={[
+                        stylesheet.borderedCard4,
+                        {
+                            backgroundColor: colors.content.container.warning,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.warning
+                        }}
+                    >
+                        {localize("themeExamples-warning")}
+                    </Text>
+                </View>
+                <View
+                    style={[
+                        stylesheet.borderedCard5,
+                        {
+                            backgroundColor: colors.content.container.success,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.success
+                        }}
+                    >
+                        {localize("themeExamples-success")}
+                    </Text>
+                </View>
+                <View
+                    style={[
+                        stylesheet.borderedCard6,
+                        {
+                            backgroundColor: colors.content.container.info,
+                            padding: spaces.spacingMd
+                        }
+                    ]}
+                >
+                    <Text
+                        style={{
+                            color: colors.content.text.info
+                        }}
+                    >
+                        {localize("themeExamples-info")}
+                    </Text>
+                </View>
+            </View>
+        </View>
+        <View
+            style={[
+                stylesheet.rowSpaceBetween,
+                {
+                    marginTop: spaces.spacingXl
+                }
+            ]}
+        >
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronLeftIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("toolsUsage-title")}
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "ToolsUsage"
+                    });
+                }}
+            />
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronRightIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("localeExamples-title")}
+                iconDirection="right"
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "LocaleExamples"
+                    });
+                }}
+            />
+        </View>
+    </PageContainer>;
+};
+
+export default ThemeExamples;

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

@@ -0,0 +1,259 @@
+import {
+    useLayoutEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    PageContainer,
+    CodeViewer,
+    Button,
+    Header,
+    Text
+} from "ncore-ui-kit";
+import {
+    useNavigation
+} from "@react-navigation/native";
+import type RootStackParamList from "../../../navigation/type";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon
+} from "lucide-react-native";
+
+const ToolsUsage = () => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            header: () => <Header
+                title={localize("toolsUsage-title")}
+                isWrapSafeareaContext={false}
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
+                isGoBackEnable={true}
+            />,
+            headerShown: true
+        });
+    }, [
+        navigation,
+        localize
+    ]);
+
+    const codeTheme = `import { NCoreUIKitTheme } from "ncore-ui-kit";
+
+const MyComponent = () => {
+    // Access current theme colors, spaces, and active preferences
+    const {
+        colors,
+    spaces,
+        activeTheme,
+    activePalette
+    } = NCoreUIKitTheme.useContext();
+
+    return (
+        <View style={[
+                stylesheet.borderedCard,
+                { backgroundColor: colors.content.container.default, padding: spaces.spacingMd
+                }
+            ]}>
+            <Text style={{ color: colors.content.text.high }}>Current Theme: {activeTheme}</Text>
+        </View>
+    );
+};`;
+
+    const codeLocale = `import { NCoreUIKitLocalize } from "ncore-ui-kit";
+
+const MyComponent = () => {
+    // Access current localization translations and active language
+    const {
+        localize,
+    activeLocale
+    } = NCoreUIKitLocalize.useContext();
+
+    return (
+        <Text>
+            {localize("hello-world")} - Current: {activeLocale}
+        </Text>
+    );
+};`;
+
+    const codeToast = `import { NCoreUIKitToast } from "ncore-ui-kit";
+
+const MyComponent = () => {
+    const { showToast } = NCoreUIKitToast.useContext();
+
+    const handlePress = () => {
+        showToast({
+            title: "Success",
+            content: "Action completed successfully!",
+            variant: "success",
+            duration: 3000
+        });
+    };
+
+    return <Button title="Show Toast" onPress={handlePress} />;
+};`;
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+    >
+        <Text
+            variant="headlineSmallSize"
+            color="high"
+        >
+            {localize("toolsUsage-title")}
+        </Text>
+        <Text
+            color="mid"
+        >
+            {localize("toolsUsage-desc")}
+        </Text>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            NCoreUIKitTheme.useContext
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("toolsUsage-ncoreThemeDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeTheme}
+                language="tsx"
+            />
+        </View>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            NCoreUIKitLocalize.useContext
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("toolsUsage-ncoreLocalizeDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeLocale}
+                language="tsx"
+            />
+        </View>
+
+        <Text
+            variant="titleMediumSize"
+            color="high"
+            style={{
+                marginTop: spaces.spacingXl
+            }}
+        >
+            NCoreUIKitToast.useContext
+        </Text>
+        <Text
+            color="mid"
+            style={{
+                marginTop: spaces.spacingXs
+            }}
+        >
+            {localize("toolsUsage-ncoreToastDesc")}
+        </Text>
+        <View
+            style={{
+                marginTop: spaces.spacingLg
+            }}
+        >
+            <CodeViewer
+                code={codeToast}
+                language="tsx"
+            />
+        </View>
+
+        <View
+            style={[
+                stylesheet.rowSpaceBetween,
+                {
+                    marginTop: spaces.spacingXl
+                }
+            ]}
+        >
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronLeftIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("implementation")}
+                onPress={() => {
+                    navigation.navigate("GettingStarted", {
+                        screen: "Implementation"
+                    });
+                }}
+            />
+
+            <Button
+                icon={({
+                    color,
+                    size
+                }) => {
+                    return <ChevronRightIcon
+                        color={colors.content.icon[color]}
+                        size={size + 3}
+                    />;
+                }}
+                title={localize("themeExamples-title")}
+                iconDirection="right"
+                onPress={() => {
+                    navigation.navigate("CoreFeatures", {
+                        screen: "ThemeExamples"
+                    });
+                }}
+            />
+        </View>
+    </PageContainer>;
+};
+
+export default ToolsUsage;