Feature: CodeViewer bitti.

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitTheme,
     PageContainer,
     AvatarGroup,
+    CodeViewer,
     SelectBox,
     Header,
     Switch,
@@ -138,6 +139,24 @@ const AvatarGroupPage = () => {
                     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,

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitTheme,
     PageContainer,
     BottomSheet,
+    CodeViewer,
     Button,
     Header,
     Switch,
@@ -105,6 +106,24 @@ const BottomSheetPage = () => {
                     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,

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     CheckBox,
@@ -181,6 +182,24 @@ const CheckBoxPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     Header,
@@ -165,6 +166,24 @@ const ChipPage = () => {
                     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={{

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

@@ -8,8 +8,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
     DateSelector,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -26,6 +28,10 @@ const DateSelectorPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const [
@@ -73,6 +79,24 @@ const DateSelectorPage = () => {
             >
                 {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={() => {}}

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitTheme,
     DateTimePicker,
     PageContainer,
+    CodeViewer,
     SelectBox,
     Header,
     Switch,
@@ -175,6 +176,24 @@ const DateTimePickerPage = () => {
                     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,

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

@@ -9,8 +9,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     DateTimeSheet,
     PageContainer,
+    CodeViewer,
     Header,
     Button,
     Text
@@ -31,6 +33,10 @@ const DateTimeSheetPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const bottomSheetRef = useRef<IBottomSheetRef>(null);
@@ -85,6 +91,24 @@ const DateTimeSheetPage = () => {
                 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={() => {}}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     Button,
@@ -124,6 +125,24 @@ const DialogPage = () => {
                     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")}

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

@@ -8,8 +8,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
     EmbeddedMenu,
+    CodeViewer,
     Button,
     Header,
     Text
@@ -34,6 +36,10 @@ const EmbeddedMenuPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const menuRef = useRef<IEmbeddedMenuRef>(null);
@@ -103,6 +109,24 @@ const EmbeddedMenuPage = () => {
                     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>;

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     TextInput,
     Header,
     Switch,
@@ -96,6 +97,24 @@ const HeaderPage = () => {
                     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")}

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitTheme,
     HighlightButton,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     Header,
@@ -192,6 +193,24 @@ const HighlightButtonPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     Loading,
     Header,
@@ -106,6 +107,24 @@ const LoadingPage = () => {
                     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,

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

@@ -7,8 +7,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     LocaleSwitcher,
     PageContainer,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -25,6 +27,10 @@ const LocaleSwitcherPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useLayoutEffect(() => {
@@ -68,6 +74,24 @@ const LocaleSwitcherPage = () => {
                 {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>;
 };

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitTheme,
     PageContainer,
     MainHeader,
+    CodeViewer,
     Header,
     Switch,
     Text
@@ -96,6 +97,24 @@ const MainHeaderPage = () => {
                     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}
             >

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

@@ -12,6 +12,7 @@ import {
     MarkdownViewer,
     PageContainer,
     TextAreaInput,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -98,6 +99,24 @@ const MarkdownViewerPage = () => {
                     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>;
 };

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

@@ -8,7 +8,9 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     Button,
     Header,
     Menu,
@@ -34,6 +36,10 @@ const MenuPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const menuRef = useRef<IMenuRef>(null);
@@ -77,6 +83,24 @@ const MenuPage = () => {
                 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={[

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

@@ -8,7 +8,9 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     Header,
     Button,
     Modal,
@@ -27,6 +29,10 @@ const ModalPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const [
@@ -79,6 +85,24 @@ const ModalPage = () => {
                 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}

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

@@ -8,8 +8,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     MonthSelector,
     PageContainer,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -26,6 +28,10 @@ const MonthSelectorPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const [
@@ -79,6 +85,24 @@ const MonthSelectorPage = () => {
                 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>;
 };

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     Button,
     Header,
@@ -135,6 +136,24 @@ const NotificationIndicatorPage = () => {
                     </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,

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitTheme,
     PageContainer,
     NumericInput,
+    CodeViewer,
     SelectBox,
     TextInput,
     Button,
@@ -201,6 +202,24 @@ const NumericInputPage = () => {
                     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")}

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

@@ -7,7 +7,9 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -24,6 +26,10 @@ const PageContainerPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useLayoutEffect(() => {
@@ -69,6 +75,24 @@ const PageContainerPage = () => {
             <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>;
 };

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

@@ -7,8 +7,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PaletteSwitcher,
     PageContainer,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -25,6 +27,10 @@ const PaletteSwitcherPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useLayoutEffect(() => {
@@ -68,6 +74,24 @@ const PaletteSwitcherPage = () => {
                 {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>;
 };

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

@@ -11,6 +11,7 @@ import {
     NCoreUIKitTheme,
     PageContainer,
     RadioButton,
+    CodeViewer,
     SelectBox,
     TextInput,
     Button,
@@ -149,6 +150,24 @@ const RadioButtonPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     TextInput,
     RowCard,
     Header,
@@ -132,6 +133,24 @@ const RowCardPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     Button,
@@ -187,6 +188,24 @@ const SelectBoxPage = () => {
                     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")}

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

@@ -9,8 +9,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
     SelectSheet,
+    CodeViewer,
     Header,
     Button,
     Text
@@ -31,6 +33,10 @@ const SelectSheetPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const bottomSheetRef = useRef<IBottomSheetRef>(null);
@@ -85,6 +91,24 @@ const SelectSheetPage = () => {
                 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={() => {}}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     Seperator,
     TextInput,
     Header,
@@ -88,6 +89,24 @@ const SeperatorPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     TextInput,
     SiteLogo,
     Header,
@@ -116,6 +117,24 @@ const SiteLogoPage = () => {
                     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")}

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

@@ -7,8 +7,12 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitSnackBar,
+    NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SnackBar,
+    Button,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -25,6 +29,10 @@ const SnackBarPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useLayoutEffect(() => {
@@ -67,7 +75,6 @@ const SnackBarPage = () => {
             >
                 {localize("components-snackBar")}
             </Text>
-
             <View
                 style={stylesheet.customContainer}
             >
@@ -77,6 +84,34 @@ const SnackBarPage = () => {
                     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>;

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     StateCard,
     TextInput,
     Header,
@@ -123,6 +124,24 @@ const StateCardPage = () => {
                     }
                 />
             </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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     TextInput,
     Sticker,
     Header,
@@ -103,6 +104,24 @@ const StickerPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     TextInput,
     Button,
     Header,
@@ -133,6 +134,24 @@ const SwitchPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     Button,
     Header,
     Text
@@ -94,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/textAreaInput/index.tsx

@@ -10,13 +10,13 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     TextAreaInput,
     SelectBox,
     TextInput,
     Button,
     Header,
-    Switch
-    ,
+    Switch,
     Text
 } from "ncore-ui-kit";
 import {
@@ -164,6 +164,24 @@ const TextAreaInputPage = () => {
                     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")}

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

@@ -10,6 +10,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     SelectBox,
     TextInput,
     Button,
@@ -195,6 +196,24 @@ const TextInputPage = () => {
                     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")}

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

@@ -7,8 +7,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     ThemeSwitcher,
     PageContainer,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -25,6 +27,10 @@ const ThemeSwitcherPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useLayoutEffect(() => {
@@ -68,6 +74,24 @@ const ThemeSwitcherPage = () => {
                 {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>;
 };

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

@@ -8,8 +8,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
     TimeSelector,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -26,6 +28,10 @@ const TimeSelectorPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const [
@@ -81,6 +87,24 @@ const TimeSelectorPage = () => {
                 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>;
 };

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

@@ -7,7 +7,11 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitToast,
+    NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
+    Button,
     Header,
     Toast,
     Text
@@ -25,6 +29,10 @@ const ToastPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useLayoutEffect(() => {
@@ -67,7 +75,6 @@ const ToastPage = () => {
             >
                 {localize("components-toast")}
             </Text>
-
             <View
                 style={stylesheet.customContainer}
             >
@@ -77,6 +84,34 @@ const ToastPage = () => {
                     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>;

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

@@ -7,12 +7,14 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    CodeViewer,
     Text
 } from "ncore-ui-kit";
 
 const WebScrollbar = () => {
     const {
-        colors
+        colors,
+        spaces
     } = NCoreUIKitTheme.useContext();
 
     const {
@@ -38,6 +40,25 @@ const WebScrollbar = () => {
         >
             {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,

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

@@ -8,8 +8,10 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
     YearSelector,
+    CodeViewer,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -26,6 +28,10 @@ const YearSelectorPage = () => {
         localize
     } = NCoreUIKitLocalize.useContext();
 
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     const [
@@ -79,6 +85,24 @@ const YearSelectorPage = () => {
                 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>;
 };

src/helpers/portalize/Host.tsx

@@ -6,6 +6,7 @@ import {
 } from "react";
 import {
     type ViewStyle,
+    StyleSheet,
     View
 } from "react-native";
 import {
@@ -104,12 +105,10 @@ export const Host = ({
         }}
     >
         <View
+            pointerEvents="box-none"
             collapsable={false}
             style={[
-                {
-                    pointerEvents: "box-none",
-                    flex: 1
-                },
+                stylesheet.container,
                 style
             ]}
         >
@@ -122,3 +121,9 @@ export const Host = ({
         />
     </Context.Provider>;
 };
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});

src/helpers/portalize/Manager.tsx

@@ -62,18 +62,14 @@ export const Manager = forwardRef(({
                 key
             },
             index: number
-        ) => (
-            <View
-                key={`NCoreUIKit-Portal-${key}-${index}`}
-                style={[
-                    StyleSheet.absoluteFill,
-                    {
-                        pointerEvents: "box-none"
-                    }
-                ]}
-                collapsable={false}
-            >
-                {children}
-            </View>
-        ));
+        ) => <View
+            pointerEvents="box-none"
+            key={`NCoreUIKit-Portal-${key}-${index}`}
+            style={[
+                StyleSheet.absoluteFill
+            ]}
+            collapsable={false}
+        >
+            {children}
+        </View>);
 });

src/helpers/portalize/Portal.tsx

@@ -16,15 +16,13 @@ interface IPortalProps {
 export const Portal = ({
     children,
     name
-}: IPortalProps): ReactNode => (
-    <Context.Consumer>
-        {(manager): ReactNode => {
-            return <Consumer
-                manager={manager}
-                name={name}
-            >
-                {children}
-            </Consumer>;
-        }}
-    </Context.Consumer>
-);
+}: IPortalProps): ReactNode => <Context.Consumer>
+    {(manager): ReactNode => {
+        return <Consumer
+            manager={manager}
+            name={name}
+        >
+            {children}
+        </Consumer>;
+    }}
+</Context.Consumer>;