Merge branch 'release/1.1.0-alpha.8' into develop

eslint-local-rules/index.js

@@ -918,9 +918,38 @@ module.exports = {
             function checkProperty(propertyNode) {
                 if (!propertyNode || propertyNode.type !== "Property") return;
 
+                const keyName = propertyNode.key && propertyNode.key.name;
+                const allowedStaticProps = new Set([
+                    "alignSelf",
+                    "textAlign",
+                    "display",
+                    "position",
+                    "flexDirection",
+                    "justifyContent",
+                    "alignItems",
+                    "flexWrap",
+                    "overflow",
+                    "textDecorationLine",
+                    "textTransform",
+                    "fontStyle",
+                    "fontWeight",
+                    "resizeMode",
+                    "lineHeight",
+                    "flex",
+                    "flexGrow",
+                    "flexShrink"
+                ]);
+                if (keyName && allowedStaticProps.has(keyName)) {
+                    return;
+                }
+
                 const value = propertyNode.value;
                 if (!value) return;
 
+                if (value.type === "Literal" && value.value === "transparent") {
+                    return;
+                }
+
                 let isStatic = false;
 
                 if (value.type === "Literal") {
@@ -1315,7 +1344,7 @@ module.exports = {
                         if (checkAndRemoveParens(cond.alternate)) hasParens = true;
                     }
 
-                    if (hasParens) return; // Wait for the next fix pass to format the whitespace properly
+                    if (hasParens) return;
 
                     const questionToken = sourceCode.getTokenAfter(cond.test, {
                         filter: t => t.value === "?"
@@ -1578,7 +1607,7 @@ module.exports = {
 
                     const firstElement = node.elements[0];
 
-                    if (openBracket.loc.end.line !== firstElement.loc.start.line - 1) {
+                    if (firstElement && openBracket.loc.end.line !== firstElement.loc.start.line - 1) {
                         context.report({
                             fix(fixer) {
                                 const openBracketLine = sourceCode.lines[openBracket.loc.start.line - 1];
@@ -1741,7 +1770,6 @@ module.exports = {
 
                     const closingBracket = allTokens[allTokens.length - 1];
 
-                    // Check if self-closing slash is present
                     let hasSelfClosingSlash = false;
                     let slashToken = null;
 
@@ -1874,7 +1902,6 @@ module.exports = {
                             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];

example/mobile/babel.config.js

@@ -4,27 +4,27 @@ module.exports = function (api) {
     api.cache(true);
 
     return {
-        presets: [
-            "babel-preset-expo"
-        ],
         plugins: [
             [
                 "module-resolver",
                 {
+                    alias: {
+                        "react-native": "../../node_modules/react-native",
+                        "react": "../../node_modules/react",
+                        "ncore-ui-kit": "../../src"
+                    },
                     extensions: [
                         ".js",
                         ".jsx",
                         ".ts",
                         ".tsx",
                         ".json"
-                    ],
-                    alias: {
-                        "ncore-ui-kit": "../../src",
-                        "react": "../../node_modules/react",
-                        "react-native": "../../node_modules/react-native"
-                    }
+                    ]
                 }
             ]
+        ],
+        presets: [
+            "babel-preset-expo"
         ]
     };
 };

example/src/index.tsx

@@ -12,8 +12,8 @@ import {
 import {
     useFonts
 } from "expo-font";
-import moment from "moment";
 import "moment/locale/tr";
+import moment from "moment";
 
 let NCoreConfig: NCoreUIKitConfig = {
     projectThemes: defaultThemeJSON as NCoreUIKit.Palette,

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

@@ -118,10 +118,10 @@ const AvatarPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -130,9 +130,9 @@ const AvatarPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("avatar-desc")}
             </Text>
@@ -166,10 +166,10 @@ const AvatarPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -180,10 +180,10 @@ const AvatarPage = () => {
             </View>
             <TextInput
                 placeholder={localize("avatar-enterImageUrl")}
+                title={localize("avatar-imageUrl")}
                 style={{
                     marginBottom: spaces.spacingMd
                 }}
-                title={localize("avatar-imageUrl")}
                 onChangeText={setImageUrl}
                 spreadBehaviour="stretch"
                 value={imageUrl}
@@ -227,9 +227,9 @@ const AvatarPage = () => {
                             : []
 
                     }
-                    title={localize("change-size")}
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
+                    title={localize("change-size")}
                     data={AVATAR_SIZES_DATA}
                     spreadBehaviour="free"
                 />
@@ -256,8 +256,8 @@ const AvatarPage = () => {
                             ]
                             : []
                     }
-                    title={localize("avatar-changeStatus")}
                     data={AVATAR_STATUS_INDICATOR_TYPES_DATA}
+                    title={localize("avatar-changeStatus")}
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
@@ -266,18 +266,18 @@ const AvatarPage = () => {
                     style={stylesheet.switchesContainer}
                 >
                     <Switch
+                        title={localize("avatar-toggleLoading")}
                         onPress={() => {
                             setIsLoading(!isLoading);
                         }}
-                        title={localize("avatar-toggleLoading")}
                         spreadBehaviour="free"
                         isActive={isLoading}
                     />
                     <Switch
+                        title={localize("avatar-toggleDisabled")}
                         onPress={() => {
                             setIsDisabled(!isDisabled);
                         }}
-                        title={localize("avatar-toggleDisabled")}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -102,10 +102,10 @@ const AvatarGroupPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -114,9 +114,9 @@ const AvatarGroupPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("avatarGroup-desc")}
             </Text>
@@ -145,10 +145,10 @@ const AvatarGroupPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -196,10 +196,10 @@ const AvatarGroupPage = () => {
                     style={stylesheet.switchesContainer}
                 >
                     <Switch
+                        title={localize("avatarGroup-toggleLoading")}
                         onPress={() => {
                             setIsLoading(!isLoading);
                         }}
-                        title={localize("avatarGroup-toggleLoading")}
                         spreadBehaviour="free"
                         isActive={isLoading}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -75,17 +75,21 @@ const BottomSheetPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("bottomSheet-desc")}
             </Text>
@@ -112,10 +116,10 @@ const BottomSheetPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -156,10 +160,10 @@ const BottomSheetPage = () => {
                         spreadBehaviour="free"
                     />
                     <Switch
+                        title={localize("bottomSheet-togglePortal")}
                         onPress={() => {
                             setIsWorkWithPortal(!isWorkWithPortal);
                         }}
-                        title={localize("bottomSheet-togglePortal")}
                         isActive={isWorkWithPortal}
                         spreadBehaviour="free"
                     />

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

@@ -3,28 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -36,30 +17,49 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
-    },
-    paddedMarginContainer: {
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: 120
-    },
     rowSpaceBetween: {
         justifyContent: "space-between",
         flexDirection: "row",
+        alignItems: "center",
         flexWrap: "wrap",
-        width: "100%",
-        alignItems: "center"
+        width: "100%"
     },
     rowSpaceBetween2: {
         justifyContent: "space-between",
         flexDirection: "row",
+        alignItems: "center",
         flexWrap: "wrap",
-        width: "100%",
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
         alignItems: "center"
     },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
     centeredText: {
         textAlign: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -51,8 +51,8 @@ const BUTTON_SIZES: Array<IButtonProps["size"]> = [
 ];
 
 const BUTTON_TYPES_DATA = BUTTON_TYPES.map(item => ({
-    __key: item as string,
-    __title: item as string
+    __title: item as string,
+    __key: item as string
 }));
 
 const BUTTON_SPREAD_BEHAVIOURS: Array<IButtonProps["spreadBehaviour"]> = [
@@ -62,13 +62,13 @@ const BUTTON_SPREAD_BEHAVIOURS: Array<IButtonProps["spreadBehaviour"]> = [
 ];
 
 const BUTTON_VARIANTS_DATA = BUTTON_VARIANTS.map(item => ({
-    __key: item as string,
-    __title: item as string
+    __title: item as string,
+    __key: item as string
 }));
 
 const BUTTON_SIZES_DATA = BUTTON_SIZES.map(item => ({
-    __key: item as string,
-    __title: item as string
+    __title: item as string,
+    __key: item as string
 }));
 
 const ButtonPage = () => {
@@ -137,25 +137,25 @@ const ButtonPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            headerShown: true,
             header: () => <Header
                 isWrapSafeareaContext={false}
                 title={localize("button")}
                 navigation={navigation}
                 isGoBackEnable={true}
-            />
+            />,
+            headerShown: true
         });
     }, []);
 
     return <PageContainer
-        isWorkWithHeaderSpace={false}
-        isScrollable={true}
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
+        isScrollable={true}
     >
         <View
             style={[
@@ -163,9 +163,9 @@ const ButtonPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("button-desc")}
             </Text>
@@ -185,12 +185,6 @@ const ButtonPage = () => {
                     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
@@ -201,6 +195,12 @@ const ButtonPage = () => {
                     style={{
                         marginBottom: spaces.spacingLg
                     }}
+                    isCustomPadding={isCustomPadding}
+                    type={BUTTON_TYPES[typeIndex]}
+                    size={BUTTON_SIZES[sizeIndex]}
+                    iconDirection={iconDirection}
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
                     onPress={() => {
                     }}
                 />
@@ -211,10 +211,10 @@ const ButtonPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -225,13 +225,13 @@ const ButtonPage = () => {
             </View>
             <TextInput
                 placeholder={localize("enter-text")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
                 title={localize("button-title")}
                 spreadBehaviour="stretch"
                 onChangeText={setTitle}
                 value={title}
-                style={{
-                    marginBottom: spaces.spacingMd
-                }}
             />
             <View
                 style={[
@@ -242,6 +242,12 @@ const ButtonPage = () => {
                 ]}
             >
                 <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = BUTTON_TYPES.indexOf(selectedItems[0]!.__key as IButtonProps["type"]);
+                            if (index !== -1) setTypeIndex(index);
+                        }
+                    }}
                     initialSelectedItems={
 
                         BUTTON_TYPES_DATA[typeIndex]
@@ -256,16 +262,16 @@ const ButtonPage = () => {
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     title={localize("change-type")}
-                    spreadBehaviour="free"
                     data={BUTTON_TYPES_DATA}
+                    spreadBehaviour="free"
+                />
+                <SelectBox
                     onChange={(selectedItems) => {
                         if (selectedItems.length > 0) {
-                            const index = BUTTON_TYPES.indexOf(selectedItems[0]!.__key as IButtonProps["type"]);
-                            if (index !== -1) setTypeIndex(index);
+                            const index = BUTTON_VARIANTS.indexOf(selectedItems[0]!.__key as IButtonProps["variant"]);
+                            if (index !== -1) setVariantIndex(index);
                         }
                     }}
-                />
-                <SelectBox
                     initialSelectedItems={
 
                         BUTTON_VARIANTS_DATA[variantIndex]
@@ -282,23 +288,23 @@ const ButtonPage = () => {
                     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
+                    onPress={() => {
+                        setSpreadIndex(prev => prev + 1 > BUTTON_SPREAD_BEHAVIOURS.length - 1 ? 0 : prev + 1);
+                    }}
                     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
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = BUTTON_SIZES.indexOf(selectedItems[0]!.__key as IButtonProps["size"]);
+                            if (index !== -1) setSizeIndex(index);
+                        }
+                    }}
                     initialSelectedItems={
 
                         BUTTON_SIZES_DATA[sizeIndex]
@@ -313,14 +319,8 @@ const ButtonPage = () => {
                     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);
-                        }
-                    }}
+                    spreadBehaviour="free"
                 />
                 <View
                     style={stylesheet.switchesContainer}
@@ -335,26 +335,26 @@ const ButtonPage = () => {
                         spreadBehaviour="free"
                     />
                     <Switch
+                        title={localize("toggle-icon")}
                         onPress={() => {
                             setShowIcon(!showIcon);
                         }}
-                        title={localize("toggle-icon")}
                         spreadBehaviour="free"
                         isActive={showIcon}
                     />
                     <Switch
+                        title={localize("toggle-loading")}
                         onPress={() => {
                             setIsLoading(!isLoading);
                         }}
-                        title={localize("toggle-loading")}
                         spreadBehaviour="free"
                         isActive={isLoading}
                     />
                     <Switch
+                        title={localize("toggle-disabled")}
                         onPress={() => {
                             setIsDisabled(!isDisabled);
                         }}
-                        title={localize("toggle-disabled")}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -136,10 +136,10 @@ const CheckBoxPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -148,9 +148,9 @@ const CheckBoxPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("checkBox-desc")}
             </Text>
@@ -188,10 +188,10 @@ const CheckBoxPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -312,26 +312,26 @@ const CheckBoxPage = () => {
                     style={stylesheet.switchesContainer}
                 >
                     <Switch
+                        title={localize("checkBox-toggleLoading")}
                         onPress={() => {
                             setIsLoading(!isLoading);
                         }}
-                        title={localize("checkBox-toggleLoading")}
                         spreadBehaviour="free"
                         isActive={isLoading}
                     />
                     <Switch
+                        title={localize("checkBox-toggleDisabled")}
                         onPress={() => {
                             setIsDisabled(!isDisabled);
                         }}
-                        title={localize("checkBox-toggleDisabled")}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />
                     <Switch
+                        title={localize("checkBox-toggleFlip")}
                         onPress={() => {
                             setIsFlip(!isFlip);
                         }}
-                        title={localize("checkBox-toggleFlip")}
                         spreadBehaviour="free"
                         isActive={isFlip}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -126,10 +126,10 @@ const ChipPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -138,9 +138,9 @@ const ChipPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("chip-desc")}
             </Text>
@@ -172,10 +172,10 @@ const ChipPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -186,10 +186,10 @@ const ChipPage = () => {
             </View>
             <TextInput
                 placeholder={localize("chip-enterText")}
+                title={localize("chip-titleLabel")}
                 style={{
                     marginBottom: spaces.spacingMd
                 }}
-                title={localize("chip-titleLabel")}
                 spreadBehaviour="stretch"
                 onChangeText={setTitle}
                 value={title}
@@ -223,8 +223,8 @@ const ChipPage = () => {
                             : []
 
                     }
-                    title={localize("chip-changeType")}
                     titleExtractor={(item) => item.__title}
+                    title={localize("chip-changeType")}
                     keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={CHIP_TYPES_DATA}
@@ -250,10 +250,10 @@ const ChipPage = () => {
                             : []
 
                     }
-                    title={localize("chip-changeSpread")}
                     titleExtractor={(item) => item.__title}
-                    data={CHIP_SPREAD_BEHAVIOURS_DATA}
+                    title={localize("chip-changeSpread")}
                     keyExtractor={(item) => item.__key}
+                    data={CHIP_SPREAD_BEHAVIOURS_DATA}
                     spreadBehaviour="free"
                 />
                 <SelectBox
@@ -277,8 +277,8 @@ const ChipPage = () => {
                             : []
 
                     }
-                    title={localize("chip-changeSize")}
                     titleExtractor={(item) => item.__title}
+                    title={localize("chip-changeSize")}
                     keyExtractor={(item) => item.__key}
                     data={CHIP_SIZES_DATA}
                     spreadBehaviour="free"
@@ -287,26 +287,26 @@ const ChipPage = () => {
                     style={stylesheet.switchesContainer}
                 >
                     <Switch
+                        title={localize("chip-toggleClosable")}
                         onPress={() => {
                             setIsClosable(!isClosable);
                         }}
-                        title={localize("chip-toggleClosable")}
                         spreadBehaviour="free"
                         isActive={isClosable}
                     />
                     <Switch
+                        title={localize("chip-toggleLoading")}
                         onPress={() => {
                             setIsLoading(!isLoading);
                         }}
-                        title={localize("chip-toggleLoading")}
                         spreadBehaviour="free"
                         isActive={isLoading}
                     />
                     <Switch
+                        title={localize("chip-toggleDisabled")}
                         onPress={() => {
                             setIsDisabled(!isDisabled);
                         }}
-                        title={localize("chip-toggleDisabled")}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -36,8 +36,8 @@ const LANGUAGES = [
 ];
 
 const LANGUAGES_DATA = LANGUAGES.map(item => ({
-    __key: item,
-    __title: item
+    __title: item,
+    __key: item
 }));
 
 const DEFAULT_CODE = `import {
@@ -79,25 +79,25 @@ const CodeViewerPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            headerShown: true,
             header: () => <Header
-                isWrapSafeareaContext={false}
                 title={localize("codeViewer")}
+                isWrapSafeareaContext={false}
                 navigation={navigation}
                 isGoBackEnable={true}
-            />
+            />,
+            headerShown: true
         });
     }, []);
 
     return <PageContainer
-        isWorkWithHeaderSpace={false}
-        isScrollable={true}
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
+        isScrollable={true}
     >
         <View
             style={[
@@ -105,9 +105,9 @@ const CodeViewerPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("codeViewer-desc") || localize("codeViewer")}
             </Text>
@@ -132,12 +132,18 @@ const CodeViewerPage = () => {
                 style={[
                     stylesheet.rowContainer,
                     {
-                        gap: spaces.spacingMd,
-                        marginBottom: spaces.spacingMd
+                        marginBottom: spaces.spacingMd,
+                        gap: spaces.spacingMd
                     }
                 ]}
             >
                 <SelectBox
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = LANGUAGES.indexOf(selectedItems[0]!.__key);
+                            if (index !== -1) setLanguageIndex(index);
+                        }
+                    }}
                     initialSelectedItems={
 
                         LANGUAGES_DATA[languageIndex]
@@ -154,24 +160,18 @@ const CodeViewerPage = () => {
                     title={localize("change-language")}
                     spreadBehaviour="free"
                     data={LANGUAGES_DATA}
-                    onChange={(selectedItems) => {
-                        if (selectedItems.length > 0) {
-                            const index = LANGUAGES.indexOf(selectedItems[0]!.__key);
-                            if (index !== -1) setLanguageIndex(index);
-                        }
-                    }}
                 />
             </View>
             <TextAreaInput
                 placeholder={localize("enter-code")}
                 title={localize("codeViewer-code")}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
                 isUpdateOnRealtime={true}
                 spreadBehaviour="stretch"
                 onChangeText={setCode}
                 value={code}
-                style={{
-                    marginBottom: spaces.spacingMd
-                }}
             />
         </View>
     </PageContainer>;

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

@@ -3,31 +3,31 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    contentContainer: {
-        maxWidth: 850,
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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",
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -55,10 +55,10 @@ const DateSelectorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -67,15 +67,15 @@ const DateSelectorPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("dateSelector-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-dateSelector")}
             </Text>
@@ -85,10 +85,10 @@ const DateSelectorPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -37,6 +16,27 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -133,10 +133,10 @@ const DateTimePickerPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -145,9 +145,9 @@ const DateTimePickerPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("dateTimePicker-desc")}
             </Text>
@@ -182,10 +182,10 @@ const DateTimePickerPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -225,8 +225,8 @@ const DateTimePickerPage = () => {
                     }
                     title={localize("dateTimePicker-changeType")}
                     titleExtractor={(item) => item.__title}
-                    data={DATE_TIME_PICKER_TYPES_DATA}
                     keyExtractor={(item) => item.__key}
+                    data={DATE_TIME_PICKER_TYPES_DATA}
                     spreadBehaviour="free"
                 />
                 <SelectBox
@@ -275,11 +275,11 @@ const DateTimePickerPage = () => {
                             ]
                             : []
                     }
+                    data={DATE_TIME_PICKER_PICKER_TYPES_DATA}
+                    titleExtractor={(item) => item.__title}
                     title={localize(
                         "dateTimePicker-changePickerType",
                     )}
-                    data={DATE_TIME_PICKER_PICKER_TYPES_DATA}
-                    titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                 />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -62,10 +62,10 @@ const DateTimeSheetPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -74,15 +74,15 @@ const DateTimeSheetPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("dateTimeSheet-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-dateTimeSheet")}
             </Text>
@@ -97,10 +97,10 @@ const DateTimeSheetPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -110,19 +110,19 @@ const DateTimeSheetPage = () => {
                 />
             </View>
             <DateTimeSheet
+                cancel={() => setIsActive(false)}
                 selectMultipleObject={() => {}}
+                bottomSheetRef={bottomSheetRef}
+                ok={() => setIsActive(false)}
                 selectDateRule={() => {}}
-                selectObject={() => {}}
                 isWorkWithRealtime={true}
-                dateTimePickerKey="test"
-                bottomSheetRef={bottomSheetRef}
                 setIsActive={setIsActive}
-                cancel={() => setIsActive(false)}
-                clean={() => {}}
-                ok={() => setIsActive(false)}
+                dateTimePickerKey="test"
+                selectObject={() => {}}
+                isActive={isActive}
                 pickerType="date"
                 isLoading={false}
-                isActive={isActive}
+                clean={() => {}}
                 variant="single"
             />
         </View>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -37,6 +16,27 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -90,10 +90,10 @@ const DialogPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -102,9 +102,9 @@ const DialogPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("dialog-desc")}
             </Text>
@@ -131,10 +131,10 @@ const DialogPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -201,6 +201,7 @@ const DialogPage = () => {
             </View>
         </View>
         <Dialog
+            variant={DIALOG_VARIANTS[variantIndex]}
             secondaryButtonProps={{
                 onPress: ({
                     closeAnimation
@@ -215,15 +216,14 @@ const DialogPage = () => {
                     closeAnimation();
                 }
             }}
+            onClosed={() => {
+                setIsVisible(false);
+            }}
             onOverlayPress={({
                 closeAnimation
             }) => {
                 closeAnimation();
             }}
-            onClosed={() => {
-                setIsVisible(false);
-            }}
-            variant={DIALOG_VARIANTS[variantIndex]}
             isVisible={isVisible}
             content={content}
             title={title}

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -86,10 +86,10 @@ const EmbeddedMenuPage = () => {
             scrollViewProps={{
                 contentContainerStyle: stylesheet.scrollContent
             }}
+            isWorkWithHeaderSpace={false}
             scrollViewStyle={[
                 stylesheet.container
             ]}
-            isWorkWithHeaderSpace={false}
             isScrollable={true}
         >
             <View
@@ -98,9 +98,9 @@ const EmbeddedMenuPage = () => {
                 ]}
             >
                 <Text
+                    style={stylesheet.descText}
                     variant="bodyMediumSize"
                     color="mid"
-                    style={stylesheet.descText}
                 >
                     {localize("embeddedMenu-desc")}
                 </Text>
@@ -115,10 +115,10 @@ const EmbeddedMenuPage = () => {
                     }}
                 >
                     <Text
-                        variant="headlineSmallSize"
                         style={{
                             marginBottom: spaces.spacingSm
                         }}
+                        variant="headlineSmallSize"
                     >
                         {localize("usage")}
                     </Text>

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

@@ -3,28 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -35,6 +16,25 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -64,17 +64,21 @@ const HeaderPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("header-desc")}
             </Text>
@@ -91,8 +95,8 @@ const HeaderPage = () => {
                 ]}
             >
                 <Header
-                    isWrapSafeareaContext={false}
                     isGoBackEnable={isGoBackEnable}
+                    isWrapSafeareaContext={false}
                     navigation={navigation}
                     title={title}
                 />
@@ -103,10 +107,10 @@ const HeaderPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,31 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -39,19 +17,41 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
-    },
-    paddedMarginContainer: {
-        justifyContent: "center",
-        minHeight: 120
-    },
     rowSpaceBetween: {
         justifyContent: "space-between",
         flexDirection: "row",
         alignItems: "center",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    previewContainerNoAlign: {
+        justifyContent: "center",
+        minHeight: 120
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        minHeight: 120
+    },
+    descText: {
+        marginBottom: 20
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -137,10 +137,10 @@ const HighlightButtonPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -149,9 +149,9 @@ const HighlightButtonPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("highlightButton-desc")}
             </Text>
@@ -168,6 +168,10 @@ const HighlightButtonPage = () => {
                 ]}
             >
                 <HighlightButton
+                    title={
+                        title || localize("highlightButton-example")
+                    }
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
                     icon={
                         showIcon
                             ? ({
@@ -180,10 +184,6 @@ const HighlightButtonPage = () => {
 
                             : undefined
                     }
-                    title={
-                        title || localize("highlightButton-example")
-                    }
-                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
                     isCustomPadding={isCustomPadding}
                     iconDirection={iconDirection}
                     type={TYPES[typeIndex]}
@@ -199,10 +199,10 @@ const HighlightButtonPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -239,6 +239,9 @@ const HighlightButtonPage = () => {
                             if (index !== -1) setTypeIndex(index);
                         }
                     }}
+                    title={localize("highlightButton-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
                     initialSelectedItems={
 
                         TYPES_DATA[typeIndex]
@@ -250,13 +253,13 @@ const HighlightButtonPage = () => {
                             : []
 
                     }
-                    title={localize("highlightButton-changeType")}
-                    titleExtractor={(item) => item.__title}
-                    keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={TYPES_DATA}
                 />
                 <HighlightButton
+                    title={
+                        `${localize("highlightButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
                     onPress={() => {
                         setSpreadIndex((prev) =>
                             prev + 1 > SPREAD_BEHAVIOURS.length - 1
@@ -264,9 +267,6 @@ const HighlightButtonPage = () => {
                                 : prev + 1,
                         );
                     }}
-                    title={
-                        `${localize("highlightButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                    }
                     spreadBehaviour="free"
                 />
                 <SelectBox
@@ -279,6 +279,9 @@ const HighlightButtonPage = () => {
                             if (index !== -1) setSizeIndex(index);
                         }
                     }}
+                    title={localize("highlightButton-changeSize")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
                     initialSelectedItems={
 
                         SIZES_DATA[sizeIndex]
@@ -290,9 +293,6 @@ const HighlightButtonPage = () => {
                             : []
 
                     }
-                    title={localize("highlightButton-changeSize")}
-                    titleExtractor={(item) => item.__title}
-                    keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={SIZES_DATA}
                 />
@@ -312,34 +312,34 @@ const HighlightButtonPage = () => {
                         spreadBehaviour="free"
                     />
                     <Switch
+                        onPress={() => setShowIcon(!showIcon)}
                         title={localize(
                             "highlightButton-toggleIcon",
                         )}
-                        onPress={() => setShowIcon(!showIcon)}
                         spreadBehaviour="free"
                         isActive={showIcon}
                     />
                     <Switch
+                        onPress={() => setIsLoading(!isLoading)}
                         title={localize(
                             "highlightButton-toggleLoading",
                         )}
-                        onPress={() => setIsLoading(!isLoading)}
                         spreadBehaviour="free"
                         isActive={isLoading}
                     />
                     <Switch
+                        onPress={() => setIsDisabled(!isDisabled)}
                         title={localize(
                             "highlightButton-toggleDisabled",
                         )}
-                        onPress={() => setIsDisabled(!isDisabled)}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />
                     <Switch
+                        onPress={() => setIsCustomPadding(!isCustomPadding)}
                         title={localize(
                             "highlightButton-toggleCustomPadding",
                         )}
-                        onPress={() => setIsCustomPadding(!isCustomPadding)}
                         isActive={isCustomPadding}
                         spreadBehaviour="free"
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -73,10 +73,10 @@ const LoadingPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -85,9 +85,9 @@ const LoadingPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("loading-desc")}
             </Text>
@@ -113,10 +113,10 @@ const LoadingPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -144,6 +144,9 @@ const LoadingPage = () => {
                             if (index !== -1) setSizeIndex(index);
                         }
                     }}
+                    titleExtractor={(item) => item.__title}
+                    title={localize("loading-changeSize")}
+                    keyExtractor={(item) => item.__key}
                     initialSelectedItems={
 
                         SIZES_DATA[sizeIndex]
@@ -155,9 +158,6 @@ const LoadingPage = () => {
                             : []
 
                     }
-                    title={localize("loading-changeSize")}
-                    titleExtractor={(item) => item.__title}
-                    keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={SIZES_DATA}
                 />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -49,10 +49,10 @@ const LocaleSwitcherPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -61,15 +61,15 @@ const LocaleSwitcherPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("localeSwitcher-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-localeSwitcher")}
             </Text>
@@ -80,10 +80,10 @@ const LocaleSwitcherPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,16 +3,28 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    contentContainer: {
-        padding: 20,
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         width: "100%"
     },
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
     },
-    container: {
-        flex: 1
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     title: {
         marginBottom: 20
@@ -20,24 +32,12 @@ const stylesheet = StyleSheet.create({
     descText: {
         marginBottom: 20
     },
-    previewContainer: {
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: 120
-    },
-    rowContainer: {
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    contentContainer: {
+        width: "100%",
+        padding: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -64,17 +64,21 @@ const MainHeaderPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("mainHeader-desc")}
             </Text>
@@ -91,9 +95,9 @@ const MainHeaderPage = () => {
                 ]}
             >
                 <MainHeader
-                    isWorkWithSafeAreaView={false}
                     isWorkWithSeperator={isWorkWithSeperator}
                     isWorkWithSticky={isWorkWithSticky}
+                    isWorkWithSafeAreaView={false}
                     isWorkWithPortal={false}
                 />
             </View>
@@ -103,10 +107,10 @@ const MainHeaderPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,27 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -35,19 +17,37 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
-    },
-    paddedMarginContainer: {
-        justifyContent: "center",
-        minHeight: 120
-    },
     rowSpaceBetween: {
         justifyContent: "space-between",
         flexDirection: "row",
         alignItems: "center",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    paddedMarginContainer: {
+        justifyContent: "center",
+        minHeight: 120
+    },
+    descText: {
+        marginBottom: 20
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -49,17 +49,21 @@ const MarkdownEditorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("markdownEditor-desc")}
             </Text>
@@ -69,10 +73,10 @@ const MarkdownEditorPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage") || "Usage"}
                 </Text>

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

@@ -7,16 +7,16 @@ const stylesheet = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center"
     },
-    contentContainer: {
-        maxWidth: 850,
-        width: "100%"
-    },
     paddedMarginContainer: {
         minHeight: 120
     },
     marginContainer: {
         marginBottom: 20
     },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
     editor: {
         minHeight: 350
     },

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

@@ -61,17 +61,21 @@ const MarkdownViewerPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("markdownViewer-desc")}
             </Text>
@@ -105,10 +109,10 @@ const MarkdownViewerPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,47 +3,47 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    paddedMarginContainer: {
+        minHeight: 120
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    descText: {
+        marginBottom: 20
     },
     marginContainer: {
         marginBottom: 20
     },
-    paddedMarginContainer: {
-        minHeight: 120
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
     },
     markdownEditor: {
         minHeight: 350
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -47,8 +47,8 @@ const MenuPage = () => {
     useLayoutEffect(() => {
         navigation.setOptions({
             header: () => <Header
-                isWrapSafeareaContext={false}
                 title={localize("menu-title")}
+                isWrapSafeareaContext={false}
                 navigation={navigation}
                 isGoBackEnable={true}
             />,
@@ -60,10 +60,10 @@ const MenuPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -72,15 +72,15 @@ const MenuPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("menu-desc")}
             </Text>
             <Button
-                title={localize("menu-openMenu")}
                 onPress={() => menuRef.current?.open()}
+                title={localize("menu-openMenu")}
                 spreadBehaviour="stretch"
             />
             <View
@@ -89,10 +89,10 @@ const MenuPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -103,6 +103,7 @@ const MenuPage = () => {
             </View>
         </View>
         <Menu
+            navigation={navigation as unknown as NCoreUIKit.Navigation}
             buttons={[
                 {
                     title: localize("menu-settings"),
@@ -121,7 +122,6 @@ const MenuPage = () => {
                     />
                 }
             ]}
-            navigation={navigation as unknown as NCoreUIKit.Navigation}
             id="menu-page-example"
             ref={menuRef}
         />

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

@@ -3,28 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -35,6 +16,25 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -56,10 +56,10 @@ const ModalPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -68,15 +68,15 @@ const ModalPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("modal-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-modal")}
             </Text>
@@ -91,10 +91,10 @@ const ModalPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,8 +3,18 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    contentContainer: {
-        padding: 20,
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         width: "100%"
     },
     modalContent: {
@@ -13,11 +23,10 @@ const stylesheet = StyleSheet.create({
         padding: 20,
         gap: 20
     },
-    scrollContent: {
-        flexGrow: 1
-    },
-    container: {
-        flex: 1
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     title: {
         marginBottom: 20
@@ -25,24 +34,15 @@ const stylesheet = StyleSheet.create({
     descText: {
         marginBottom: 20
     },
-    previewContainer: {
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: 120
+    contentContainer: {
+        width: "100%",
+        padding: 20
     },
-    rowContainer: {
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    scrollContent: {
+        flexGrow: 1
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -55,10 +55,10 @@ const MonthSelectorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -67,15 +67,15 @@ const MonthSelectorPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("monthSelector-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-monthSelector")}
             </Text>
@@ -91,10 +91,10 @@ const MonthSelectorPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -37,6 +16,27 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -89,17 +89,21 @@ const NotificationIndicatorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("notificationIndicator-desc")}
             </Text>
@@ -142,10 +146,10 @@ const NotificationIndicatorPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -172,22 +176,24 @@ const NotificationIndicatorPage = () => {
                             if (index !== -1) setTypeIndex(index);
                         }
                     }}
-                    initialSelectedItems={
-                        TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]!] : []
-                    }
                     title={localize(
                         "notificationIndicator-changeType",
                     )}
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
+                    initialSelectedItems={
+                        TYPES_DATA[typeIndex] ? [
+                            TYPES_DATA[typeIndex]!
+                        ] : []
+                    }
                     spreadBehaviour="free"
                     data={TYPES_DATA}
                 />
                 <Button
+                    onPress={() => setCount((prev) => prev + 1)}
                     title={localize(
                         "notificationIndicator-addCount",
                     )}
-                    onPress={() => setCount((prev) => prev + 1)}
                     spreadBehaviour="free"
                 />
                 <Switch

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

@@ -3,28 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -36,23 +17,42 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    borderedCard: {
+        backgroundColor: "transparent"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     paddedMarginContainer: {
         justifyContent: "center",
         alignItems: "center",
         minHeight: 120
     },
-    borderedCard: {
-        backgroundColor: "transparent"
+    descText: {
+        marginBottom: 20
     },
-    rowSpaceBetween: {
-        justifyContent: "space-between",
-        flexDirection: "row",
-        alignItems: "center",
-        flexWrap: "wrap",
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -141,10 +141,10 @@ const NumericInputPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -153,9 +153,9 @@ const NumericInputPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("numericInput-desc")}
             </Text>
@@ -172,6 +172,7 @@ const NumericInputPage = () => {
                 ]}
             >
                 <NumericInput
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
                     icon={
                         showIcon
                             ? ({
@@ -188,11 +189,10 @@ const NumericInputPage = () => {
                         title ||
                             localize("numericInput-exampleTitle")
                     }
+                    variant={VARIANTS[variantIndex]}
                     placeholder={localize(
                         "numericInput-placeholder",
                     )}
-                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                    variant={VARIANTS[variantIndex]}
                     isCleanEnabled={isCleanEnabled}
                     type={TYPES[typeIndex]}
                     isDisabled={isDisabled}
@@ -208,10 +208,10 @@ const NumericInputPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -248,6 +248,9 @@ const NumericInputPage = () => {
                             if (index !== -1) setTypeIndex(index);
                         }
                     }}
+                    title={localize("numericInput-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
                     initialSelectedItems={
 
                         TYPES_DATA[typeIndex]
@@ -259,9 +262,6 @@ const NumericInputPage = () => {
                             : []
 
                     }
-                    title={localize("numericInput-changeType")}
-                    titleExtractor={(item) => item.__title}
-                    keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={TYPES_DATA}
                 />
@@ -275,6 +275,7 @@ const NumericInputPage = () => {
                             if (index !== -1) setVariantIndex(index);
                         }
                     }}
+                    title={localize("numericInput-changeVariant")}
                     initialSelectedItems={
 
                         VARIANTS_DATA[variantIndex]
@@ -286,13 +287,15 @@ const NumericInputPage = () => {
                             : []
 
                     }
-                    title={localize("numericInput-changeVariant")}
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={VARIANTS_DATA}
                 />
                 <Button
+                    title={
+                        `${localize("numericInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
                     onPress={() => {
                         setSpreadIndex((prev) =>
                             prev + 1 > SPREAD_BEHAVIOURS.length - 1
@@ -300,9 +303,6 @@ const NumericInputPage = () => {
                                 : prev + 1,
                         );
                     }}
-                    title={
-                        `${localize("numericInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                    }
                     spreadBehaviour="free"
                 />
                 <View
@@ -315,10 +315,10 @@ const NumericInputPage = () => {
                         isActive={showIcon}
                     />
                     <Switch
+                        onPress={() => setIsDisabled(!isDisabled)}
                         title={localize(
                             "numericInput-toggleDisabled",
                         )}
-                        onPress={() => setIsDisabled(!isDisabled)}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />
@@ -329,18 +329,18 @@ const NumericInputPage = () => {
                         spreadBehaviour="free"
                     />
                     <Switch
+                        onPress={() => setIsRequired(!isRequired)}
                         title={localize(
                             "numericInput-toggleRequired",
                         )}
-                        onPress={() => setIsRequired(!isRequired)}
                         spreadBehaviour="free"
                         isActive={isRequired}
                     />
                     <Switch
+                        onPress={() => setIsOptional(!isOptional)}
                         title={localize(
                             "numericInput-toggleOptional",
                         )}
-                        onPress={() => setIsOptional(!isOptional)}
                         spreadBehaviour="free"
                         isActive={isOptional}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -48,10 +48,10 @@ const PageContainerPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -60,15 +60,15 @@ const PageContainerPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("pageContainer-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-pageContainer")}
             </Text>
@@ -81,10 +81,10 @@ const PageContainerPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -37,6 +16,27 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -49,10 +49,10 @@ const PaletteSwitcherPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -61,15 +61,15 @@ const PaletteSwitcherPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("paletteSwitcher-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-paletteSwitcher")}
             </Text>
@@ -80,10 +80,10 @@ const PaletteSwitcherPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,16 +3,28 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    contentContainer: {
-        padding: 20,
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         width: "100%"
     },
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
     },
-    container: {
-        flex: 1
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     title: {
         marginBottom: 20
@@ -20,24 +32,12 @@ const stylesheet = StyleSheet.create({
     descText: {
         marginBottom: 20
     },
-    previewContainer: {
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: 120
-    },
-    rowContainer: {
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    contentContainer: {
+        width: "100%",
+        padding: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -108,10 +108,10 @@ const RadioButtonPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -120,9 +120,9 @@ const RadioButtonPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("radioButton-desc")}
             </Text>
@@ -156,10 +156,10 @@ const RadioButtonPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -196,6 +196,9 @@ const RadioButtonPage = () => {
                             if (index !== -1) setTypeIndex(index);
                         }
                     }}
+                    title={localize("radioButton-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
                     initialSelectedItems={
 
                         TYPES_DATA[typeIndex]
@@ -207,13 +210,13 @@ const RadioButtonPage = () => {
                             : []
 
                     }
-                    title={localize("radioButton-changeType")}
-                    titleExtractor={(item) => item.__title}
-                    keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={TYPES_DATA}
                 />
                 <Button
+                    title={
+                        `${localize("radioButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
                     onPress={() => {
                         setSpreadIndex((prev) =>
                             prev + 1 > SPREAD_BEHAVIOURS.length - 1
@@ -221,19 +224,16 @@ const RadioButtonPage = () => {
                                 : prev + 1,
                         );
                     }}
-                    title={
-                        `${localize("radioButton-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                    }
                     spreadBehaviour="free"
                 />
                 <View
                     style={stylesheet.switchesContainer}
                 >
                     <Switch
+                        onPress={() => setIsDisabled(!isDisabled)}
                         title={localize(
                             "radioButton-toggleDisabled",
                         )}
-                        onPress={() => setIsDisabled(!isDisabled)}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />
@@ -244,10 +244,10 @@ const RadioButtonPage = () => {
                         isActive={isLoading}
                     />
                     <Switch
+                        onPress={() => setIsSelected(!isSelected)}
                         title={localize(
                             "radioButton-toggleSelected",
                         )}
-                        onPress={() => setIsSelected(!isSelected)}
                         spreadBehaviour="free"
                         isActive={isSelected}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -74,10 +74,10 @@ const RowCardPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -86,9 +86,9 @@ const RowCardPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("rowCard-desc")}
             </Text>
@@ -139,10 +139,10 @@ const RowCardPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -123,10 +123,10 @@ const SelectBoxPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -135,9 +135,9 @@ const SelectBoxPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("selectBox-desc")}
             </Text>
@@ -154,6 +154,15 @@ const SelectBoxPage = () => {
                 ]}
             >
                 <SelectBox
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    title={
+                        title || localize("selectBox-exampleTitle")
+                    }
+                    placeholder={localize("selectBox-placeholder")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    maxChoice={isMultiSelect ? 3 : 1}
+                    isCleanEnabled={isCleanEnabled}
                     data={[
                         {
                             __title: "Option 1",
@@ -172,15 +181,6 @@ const SelectBoxPage = () => {
                             __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}
@@ -194,10 +194,10 @@ const SelectBoxPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -244,6 +244,9 @@ const SelectBoxPage = () => {
                             if (index !== -1) setTypeIndex(index);
                         }
                     }}
+                    title={localize("selectBox-changeType")}
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
                     initialSelectedItems={
 
                         TYPES_DATA[typeIndex]
@@ -255,13 +258,13 @@ const SelectBoxPage = () => {
                             : []
 
                     }
-                    title={localize("selectBox-changeType")}
-                    titleExtractor={(item) => item.__title}
-                    keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"
                     data={TYPES_DATA}
                 />
                 <Button
+                    title={
+                        `${localize("selectBox-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
                     onPress={() => {
                         setSpreadIndex((prev) =>
                             prev + 1 > SPREAD_BEHAVIOURS.length - 1
@@ -269,9 +272,6 @@ const SelectBoxPage = () => {
                                 : prev + 1,
                         );
                     }}
-                    title={
-                        `${localize("selectBox-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                    }
                     spreadBehaviour="free"
                 />
                 <View
@@ -284,10 +284,10 @@ const SelectBoxPage = () => {
                         isActive={isDisabled}
                     />
                     <Switch
+                        onPress={() => setIsSearchable(!isSearchable)}
                         title={localize(
                             "selectBox-toggleSearchable",
                         )}
-                        onPress={() => setIsSearchable(!isSearchable)}
                         isActive={isSearchable}
                         spreadBehaviour="free"
                     />
@@ -298,10 +298,10 @@ const SelectBoxPage = () => {
                         spreadBehaviour="free"
                     />
                     <Switch
+                        onPress={() => setIsMultiSelect(!isMultiSelect)}
                         title={localize(
                             "selectBox-toggleMultiSelect",
                         )}
-                        onPress={() => setIsMultiSelect(!isMultiSelect)}
                         isActive={isMultiSelect}
                         spreadBehaviour="free"
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -62,10 +62,10 @@ const SelectSheetPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -74,15 +74,15 @@ const SelectSheetPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("selectSheet-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-selectSheet")}
             </Text>
@@ -97,10 +97,10 @@ const SelectSheetPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -111,24 +111,24 @@ const SelectSheetPage = () => {
             </View>
             <SelectSheet
                 keyExtractor={(item: { __key: string }) => item.__key}
-                selectObject={() => {}}
-                setSearchText={() => {}}
-                setIsLoading={() => {}}
-                isWorkWithRealtime={true}
-                selectBoxKey="example"
+                cancel={() => setIsActive(false)}
                 bottomSheetRef={bottomSheetRef}
+                ok={() => setIsActive(false)}
                 setIsMoreLoading={() => {}}
+                isWorkWithRealtime={true}
                 setIsActive={setIsActive}
-                cancel={() => setIsActive(false)}
-                ok={() => setIsActive(false)}
+                setSearchText={() => {}}
+                selectObject={() => {}}
+                setIsLoading={() => {}}
+                selectBoxKey="example"
                 mainSelectedItems={[]}
-                cleanAll={() => {}}
+                isMoreLoading={false}
                 selectAll={() => {}}
+                cleanAll={() => {}}
+                isActive={isActive}
                 searchedData={[]}
-                searchText=""
                 isLoading={false}
-                isMoreLoading={false}
-                isActive={isActive}
+                searchText=""
                 data={[]}
             />
         </View>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -37,6 +16,27 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -59,17 +59,21 @@ const SeperatorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("seperator-desc")}
             </Text>
@@ -95,10 +99,10 @@ const SeperatorPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,28 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -36,12 +17,31 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     paddedMarginContainer: {
         justifyContent: "center",
         minHeight: 120
+    },
+    descText: {
+        marginBottom: 20
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -71,10 +71,10 @@ const SiteLogoPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -83,9 +83,9 @@ const SiteLogoPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("siteLogo-desc")}
             </Text>
@@ -107,13 +107,13 @@ const SiteLogoPage = () => {
                             ? "http://ncore.nibgat.space/assets/images/darklogo.png"
                             : "http://ncore.nibgat.space/assets/images/ncorelogo.png"
                     }
+                    title={
+                        title || localize("siteLogo-exampleTitle")
+                    }
                     subTitle={
                         subTitle ||
                             localize("siteLogo-exampleSubTitle")
                     }
-                    title={
-                        title || localize("siteLogo-exampleTitle")
-                    }
                     isShowIcon={isShowIcon}
                 />
             </View>
@@ -123,10 +123,10 @@ const SiteLogoPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -51,10 +51,10 @@ const SnackBarPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -63,15 +63,15 @@ const SnackBarPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("snackBar-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-snackBar")}
             </Text>
@@ -79,10 +79,10 @@ const SnackBarPage = () => {
                 style={stylesheet.customContainer}
             >
                 <SnackBar
-                    title="This is an example SnackBar"
                     subTitle="This is an example subtitle"
-                    type="primary"
+                    title="This is an example SnackBar"
                     id="example-snackbar"
+                    type="primary"
                 />
                 <Button
                     onPress={() => {
@@ -101,10 +101,10 @@ const SnackBarPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -38,12 +17,33 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     customContainer: {
         position: "relative",
         height: 200
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -72,10 +72,10 @@ const StateCardPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -84,9 +84,9 @@ const StateCardPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("stateCard-desc")}
             </Text>
@@ -115,13 +115,13 @@ const StateCardPage = () => {
                         size={size}
                     />
                     }
+                    title={
+                        title || localize("stateCard-exampleTitle")
+                    }
                     subTitle={
                         subTitle ||
                             localize("stateCard-exampleSubTitle")
                     }
-                    title={
-                        title || localize("stateCard-exampleTitle")
-                    }
                 />
             </View>
             <View
@@ -130,10 +130,10 @@ const StateCardPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -62,10 +62,10 @@ const StickerPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -74,9 +74,9 @@ const StickerPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("sticker-desc")}
             </Text>
@@ -93,6 +93,7 @@ const StickerPage = () => {
                 ]}
             >
                 <Sticker
+                    title={title || localize("sticker-exampleTitle")}
                     icon={({
                         color,
                         size
@@ -101,7 +102,6 @@ const StickerPage = () => {
                         size={size}
                     />
                     }
-                    title={title || localize("sticker-exampleTitle")}
                 />
             </View>
             <View
@@ -110,10 +110,10 @@ const StickerPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -94,10 +94,10 @@ const SwitchPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -106,9 +106,9 @@ const SwitchPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("switch-desc")}
             </Text>
@@ -140,10 +140,10 @@ const SwitchPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -181,6 +181,9 @@ const SwitchPage = () => {
                 ]}
             >
                 <Button
+                    title={
+                        `${localize("switch-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
                     onPress={() => {
                         setSpreadIndex((prev) =>
                             prev + 1 > SPREAD_BEHAVIOURS.length - 1
@@ -188,9 +191,6 @@ const SwitchPage = () => {
                                 : prev + 1,
                         );
                     }}
-                    title={
-                        `${localize("switch-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                    }
                     spreadBehaviour="free"
                 />
                 <View

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -45,22 +45,22 @@ const TextPage = () => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            headerShown: true,
             header: () => <Header
                 isWrapSafeareaContext={false}
                 title={localize("text")}
                 navigation={navigation}
                 isGoBackEnable={true}
-            />
+            />,
+            headerShown: true
         });
     }, []);
 
     return <PageContainer
-        isScrollable={false}
         isWorkWithHeaderSpace={false}
         style={[
             stylesheet.container
         ]}
+        isScrollable={false}
     >
         <View
             style={[
@@ -68,9 +68,9 @@ const TextPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("text-desc")}
             </Text>
@@ -101,10 +101,10 @@ const TextPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -114,11 +114,11 @@ const TextPage = () => {
                 />
             </View>
             <Button
-                title={`variant = ${Object.keys(typography)[variant]}`}
-                spreadBehaviour="stretch"
                 onPress={() => {
                     setVariant(variant + 1 > Object.keys(typography).length - 1 ? 0 : variant + 1);
                 }}
+                title={`variant = ${Object.keys(typography)[variant]}`}
+                spreadBehaviour="stretch"
             />
         </View>
     </PageContainer>;

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

@@ -3,25 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -33,11 +17,27 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    container: {
+        alignItems: "center",
+        flex: 1
     },
     paddedMarginContainer: {
         minHeight: 120
+    },
+    descText: {
+        marginBottom: 20
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
     }
 });
 export default stylesheet;

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

@@ -10,8 +10,8 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
-    CodeViewer,
     TextAreaInput,
+    CodeViewer,
     SelectBox,
     TextInput,
     Button,
@@ -119,17 +119,21 @@ const TextAreaInputPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
-        scrollViewStyle={[stylesheet.container]}
         isWorkWithHeaderSpace={false}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
         isScrollable={true}
     >
         <View
-            style={[stylesheet.contentContainer]}
+            style={[
+                stylesheet.contentContainer
+            ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("textAreaInput-desc")}
             </Text>
@@ -146,6 +150,7 @@ const TextAreaInputPage = () => {
                 ]}
             >
                 <TextAreaInput
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
                     title={
                         title ||
                             localize("textAreaInput-exampleTitle")
@@ -153,15 +158,14 @@ const TextAreaInputPage = () => {
                     placeholder={localize(
                         "textAreaInput-placeholder",
                     )}
-                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
                     isCleanEnabled={isCleanEnabled}
+                    isUpdateOnRealtime={true}
                     type={TYPES[typeIndex]}
                     isDisabled={isDisabled}
                     isRequired={isRequired}
                     isOptional={isOptional}
                     onChangeText={setVal}
                     value={val}
-                    isUpdateOnRealtime={true}
                 />
             </View>
             <View
@@ -170,10 +174,10 @@ const TextAreaInputPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -210,16 +214,21 @@ const TextAreaInputPage = () => {
                             if (index !== -1) setTypeIndex(index);
                         }
                     }}
-                    initialSelectedItems={
-                        TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]!] : []
-                    }
                     title={localize("textAreaInput-changeType")}
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
+                    initialSelectedItems={
+                        TYPES_DATA[typeIndex] ? [
+                            TYPES_DATA[typeIndex]!
+                        ] : []
+                    }
                     spreadBehaviour="free"
                     data={TYPES_DATA}
                 />
                 <Button
+                    title={
+                        `${localize("textAreaInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
+                    }
                     onPress={() => {
                         setSpreadIndex((prev) =>
                             prev + 1 > SPREAD_BEHAVIOURS.length - 1
@@ -227,19 +236,16 @@ const TextAreaInputPage = () => {
                                 : prev + 1,
                         );
                     }}
-                    title={
-                        `${localize("textAreaInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`
-                    }
                     spreadBehaviour="free"
                 />
                 <View
                     style={stylesheet.switchesContainer}
                 >
                     <Switch
+                        onPress={() => setIsDisabled(!isDisabled)}
                         title={localize(
                             "textAreaInput-toggleDisabled",
                         )}
-                        onPress={() => setIsDisabled(!isDisabled)}
                         spreadBehaviour="free"
                         isActive={isDisabled}
                     />
@@ -250,18 +256,18 @@ const TextAreaInputPage = () => {
                         spreadBehaviour="free"
                     />
                     <Switch
+                        onPress={() => setIsRequired(!isRequired)}
                         title={localize(
                             "textAreaInput-toggleRequired",
                         )}
-                        onPress={() => setIsRequired(!isRequired)}
                         spreadBehaviour="free"
                         isActive={isRequired}
                     />
                     <Switch
+                        onPress={() => setIsOptional(!isOptional)}
                         title={localize(
                             "textAreaInput-toggleOptional",
                         )}
-                        onPress={() => setIsOptional(!isOptional)}
                         spreadBehaviour="free"
                         isActive={isOptional}
                     />

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -140,10 +140,10 @@ const TextInputPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -152,9 +152,9 @@ const TextInputPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("textInput-desc")}
             </Text>
@@ -171,6 +171,9 @@ const TextInputPage = () => {
                 ]}
             >
                 <TextInput
+                    title={title || localize("textInput-exampleTitle")}
+                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
+                    placeholder={localize("textInput-placeholder")}
                     icon={
                         showIcon
                             ? ({
@@ -183,9 +186,6 @@ const TextInputPage = () => {
 
                             : undefined
                     }
-                    title={title || localize("textInput-exampleTitle")}
-                    spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
-                    placeholder={localize("textInput-placeholder")}
                     variant={VARIANTS[variantIndex]}
                     isCleanEnabled={isCleanEnabled}
                     type={TYPES[typeIndex]}
@@ -202,10 +202,10 @@ const TextInputPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>
@@ -233,6 +233,16 @@ const TextInputPage = () => {
                 ]}
             >
                 <SelectBox
+                    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}
                     initialSelectedItems={
 
                         TYPES_DATA[typeIndex]
@@ -244,16 +254,6 @@ const TextInputPage = () => {
                             : []
 
                     }
-                    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}
                 />
@@ -265,6 +265,7 @@ const TextInputPage = () => {
                             if (index !== -1) setVariantIndex(index);
                         }
                     }}
+                    title={localize("textInput-changeVariant")}
                     initialSelectedItems={
 
                         VARIANTS_DATA[variantIndex]
@@ -276,7 +277,6 @@ const TextInputPage = () => {
                             : []
 
                     }
-                    title={localize("textInput-changeVariant")}
                     titleExtractor={(item) => item.__title}
                     keyExtractor={(item) => item.__key}
                     spreadBehaviour="free"

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

@@ -3,38 +3,38 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        flex: 1
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
     },
-    contentContainer: {
-        maxWidth: 850,
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         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%"
+    descText: {
+        marginBottom: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
+    contentContainer: {
+        maxWidth: 850,
         width: "100%"
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -49,10 +49,10 @@ const ThemeSwitcherPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -61,15 +61,15 @@ const ThemeSwitcherPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("themeSwitcher-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-themeSwitcher")}
             </Text>
@@ -80,10 +80,10 @@ const ThemeSwitcherPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,16 +3,28 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    contentContainer: {
-        padding: 20,
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         width: "100%"
     },
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
     },
-    container: {
-        flex: 1
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     title: {
         marginBottom: 20
@@ -20,24 +32,12 @@ const stylesheet = StyleSheet.create({
     descText: {
         marginBottom: 20
     },
-    previewContainer: {
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: 120
-    },
-    rowContainer: {
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    contentContainer: {
+        width: "100%",
+        padding: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -55,10 +55,10 @@ const TimeSelectorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -67,15 +67,15 @@ const TimeSelectorPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("timeSelector-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-timeSelector")}
             </Text>
@@ -92,10 +92,10 @@ const TimeSelectorPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,16 +3,28 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    contentContainer: {
-        padding: 20,
+    rowContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    },
+    switchesContainer: {
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
         width: "100%"
     },
     scrollContent: {
         justifyContent: "center",
         alignItems: "center"
     },
-    container: {
-        flex: 1
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     title: {
         marginBottom: 20
@@ -20,24 +32,12 @@ const stylesheet = StyleSheet.create({
     descText: {
         marginBottom: 20
     },
-    previewContainer: {
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: 120
-    },
-    rowContainer: {
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    contentContainer: {
+        width: "100%",
+        padding: 20
     },
-    switchesContainer: {
-        justifyContent: "space-between",
-        alignItems: "center",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        width: "100%"
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -51,10 +51,10 @@ const ToastPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -63,15 +63,15 @@ const ToastPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.marginContainer}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.marginContainer}
             >
                 {localize("toast-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-toast")}
             </Text>
@@ -79,10 +79,10 @@ const ToastPage = () => {
                 style={stylesheet.customContainer}
             >
                 <Toast
-                    title="This is an example Toast"
                     subTitle="This is an example subtitle"
-                    type="success"
+                    title="This is an example Toast"
                     id="example-toast"
+                    type="success"
                 />
                 <Button
                     onPress={() => {
@@ -101,10 +101,10 @@ const ToastPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -38,12 +17,33 @@ const stylesheet = StyleSheet.create({
         flexWrap: "wrap",
         width: "100%"
     },
-    marginContainer: {
-        marginBottom: 20
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
     },
     customContainer: {
         position: "relative",
         height: 200
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    marginContainer: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -121,10 +121,10 @@ const TooltipPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -221,16 +221,16 @@ const TooltipPage = () => {
                             ]
                             : []
                     }
+                    data={TOOLTIP_LOCATIONS_DATA.map(item => ({
+                        ...item,
+                        __title: localize(item.__title.toLowerCase() as keyof NCoreUIKit.Translation)
+                    }))}
                     onChange={(selectedItems) => {
                         if (selectedItems.length > 0) {
                             const index = parseInt(selectedItems[0]!.__key);
                             if (!isNaN(index)) setLocationIndex(index);
                         }
                     }}
-                    data={TOOLTIP_LOCATIONS_DATA.map(item => ({
-                        ...item,
-                        __title: localize(item.__title.toLowerCase() as keyof NCoreUIKit.Translation)
-                    }))}
                     titleExtractor={(item) => item.__title}
                     title={localize("change-location")}
                     keyExtractor={(item) => item.__key}

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

@@ -19,13 +19,13 @@ const stylesheet = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center"
     },
+    descText: {
+        marginBottom: 20
+    },
     contentContainer: {
         width: "100%",
         maxWidth: 850
     },
-    descText: {
-        marginBottom: 20
-    },
     container: {
         flex: 1
     }

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

@@ -22,10 +22,10 @@ const WebScrollbar = () => {
     } = NCoreUIKitLocalize.useContext();
 
     return <PageContainer
-        isScrollable={true}
         scrollViewProps={{
             showsVerticalScrollIndicator: true
         }}
+        isScrollable={true}
     >
         <Text
             variant="headlineSmallSize"
@@ -34,23 +34,23 @@ const WebScrollbar = () => {
             {localize("webScrollbar-title")}
         </Text>
         <Text
+            style={stylesheet.descText}
             variant="bodyMediumSize"
             color="mid"
-            style={stylesheet.descText}
         >
             {localize("webScrollbar-desc")}
         </Text>
         <View
             style={{
-                marginBottom: spaces.spacingMd,
-                marginHorizontal: spaces.spacingMd
+                marginHorizontal: spaces.spacingMd,
+                marginBottom: spaces.spacingMd
             }}
         >
             <Text
-                variant="headlineSmallSize"
                 style={{
                     marginBottom: spaces.spacingSm
                 }}
+                variant="headlineSmallSize"
             >
                 {localize("usage")}
             </Text>
@@ -71,13 +71,13 @@ const WebScrollbar = () => {
             {Array.from({
                 length: 30
             }).map((_, index) => <View
-                key={index}
                 style={[
                     stylesheet.item,
                     {
                         borderBottomColor: colors.content.container.mid
                     }
                 ]}
+                key={index}
             >
                 <Text>
                     {localize("webScrollbar-item")} {index + 1}

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

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

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

@@ -55,10 +55,10 @@ const YearSelectorPage = () => {
         scrollViewProps={{
             contentContainerStyle: stylesheet.scrollContent
         }}
+        isWorkWithHeaderSpace={false}
         scrollViewStyle={[
             stylesheet.container
         ]}
-        isWorkWithHeaderSpace={false}
         isScrollable={true}
     >
         <View
@@ -67,15 +67,15 @@ const YearSelectorPage = () => {
             ]}
         >
             <Text
+                style={stylesheet.descText}
                 variant="bodyMediumSize"
                 color="mid"
-                style={stylesheet.descText}
             >
                 {localize("yearSelector-desc")}
             </Text>
             <Text
-                style={stylesheet.title}
                 variant="titleMediumSize"
+                style={stylesheet.title}
             >
                 {localize("components-yearSelector")}
             </Text>
@@ -91,10 +91,10 @@ const YearSelectorPage = () => {
                 }}
             >
                 <Text
-                    variant="headlineSmallSize"
                     style={{
                         marginBottom: spaces.spacingSm
                     }}
+                    variant="headlineSmallSize"
                 >
                     {localize("usage")}
                 </Text>

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

@@ -3,30 +3,9 @@ import {
 } 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",
+        alignItems: "center",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
@@ -37,6 +16,27 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%"
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    title: {
+        marginBottom: 20
+    },
+    descText: {
+        marginBottom: 20
+    },
+    contentContainer: {
+        width: "100%",
+        padding: 20
+    },
+    scrollContent: {
+        flexGrow: 1
+    },
+    container: {
+        flex: 1
     }
 });
 export default stylesheet;

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

@@ -43,9 +43,9 @@ const DefaultJSONs = () => {
     useLayoutEffect(() => {
         navigation.setOptions({
             header: () => <Header
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
                 title={localize("defaultJSONs-title")}
                 isWrapSafeareaContext={false}
-                navigation={navigation as unknown as NCoreUIKit.Navigation}
                 isGoBackEnable={true}
             />,
             headerShown: true
@@ -86,27 +86,27 @@ const DefaultJSONs = () => {
             {localize("defaultJSONs-title")}
         </Text>
         <Text
-            color="mid"
             style={{
                 marginTop: spaces.spacingXs
             }}
+            color="mid"
         >
             {localize("defaultJSONs-desc")}
         </Text>
         <Text
-            variant="titleMediumSize"
-            color="high"
             style={{
                 marginTop: spaces.spacingXl
             }}
+            variant="titleMediumSize"
+            color="high"
         >
             defaultLocaleJSON
         </Text>
         <Text
-            color="mid"
             style={{
                 marginTop: spaces.spacingXs
             }}
+            color="mid"
         >
             {localize("defaultJSONs-localeDesc")}
         </Text>
@@ -121,19 +121,19 @@ const DefaultJSONs = () => {
             />
         </View>
         <Text
-            variant="titleMediumSize"
-            color="high"
             style={{
                 marginTop: spaces.spacingXl
             }}
+            variant="titleMediumSize"
+            color="high"
         >
             defaultThemeJSON
         </Text>
         <Text
-            color="mid"
             style={{
                 marginTop: spaces.spacingXs
             }}
+            color="mid"
         >
             {localize("defaultJSONs-themeDesc")}
         </Text>
@@ -166,12 +166,12 @@ const DefaultJSONs = () => {
                         size={size + 3}
                     />;
                 }}
-                title={localize("typesOverride")}
                 onPress={() => {
                     navigation.navigate("CoreFeatures", {
                         screen: "TypesOverride"
                     });
                 }}
+                title={localize("typesOverride")}
             />
             <Button
                 icon={({
@@ -183,13 +183,13 @@ const DefaultJSONs = () => {
                         size={size + 3}
                     />;
                 }}
-                title={localize("components")}
-                iconDirection="right"
                 onPress={() => {
                     navigation.navigate("Components", {
                         screen: "Text"
                     });
                 }}
+                title={localize("components")}
+                iconDirection="right"
             />
         </View>
     </PageContainer>;

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

@@ -22,8 +22,8 @@ import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
 import {
-    ChevronLeftIcon,
-    ChevronRightIcon
+    ChevronRightIcon,
+    ChevronLeftIcon
 } from "lucide-react-native";
 
 const LocaleExamples = () => {
@@ -33,8 +33,8 @@ const LocaleExamples = () => {
     } = NCoreUIKitTheme.useContext();
 
     const {
-        localize,
-        activeLocale
+        activeLocale,
+        localize
     } = NCoreUIKitLocalize.useContext();
 
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -70,12 +70,12 @@ const LocaleExamples = () => {
             {localize("localeExamples-desc")}
         </Text>
         <Text
-            variant="titleMediumSize"
-            color="high"
             style={{
                 marginBottom: spaces.spacingLg,
                 marginTop: spaces.spacingXl
             }}
+            variant="titleMediumSize"
+            color="high"
         >
             {localize("localeExamples-languageSwitcher")}
         </Text>
@@ -100,23 +100,23 @@ const LocaleExamples = () => {
             ]}
         >
             <Text
-                variant="titleMediumSize"
-                color="high"
                 style={{
                     marginBottom: spaces.spacingMd
                 }}
+                variant="titleMediumSize"
+                color="high"
             >
                 {localize("localeExamples-localizedTexts")}
             </Text>
             <Text
-                color="mid"
                 style={{
                     marginBottom: spaces.spacingSm
                 }}
+                color="mid"
             >
                 {localize("localeExamples-currentLanguage")}<Text
-                    color="high"
                     variant="labelLargeSize"
+                    color="high"
                 >
                     {activeLocale}
                 </Text>

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

@@ -3,6 +3,10 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
+    rowSpaceBetween: {
+        justifyContent: "space-between",
+        flexDirection: "row"
+    },
     rowContainer: {
         flexDirection: "row"
     },
@@ -11,10 +15,6 @@ const stylesheet = StyleSheet.create({
     },
     borderedCard2: {
         borderRadius: 8
-    },
-    rowSpaceBetween: {
-        justifyContent: "space-between",
-        flexDirection: "row"
     }
 });
 export default stylesheet;

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

@@ -42,9 +42,9 @@ const ThemeExamples = () => {
     useLayoutEffect(() => {
         navigation.setOptions({
             header: () => <Header
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
                 title={localize("themeExamples-title")}
                 isWrapSafeareaContext={false}
-                navigation={navigation as unknown as NCoreUIKit.Navigation}
                 isGoBackEnable={true}
             />,
             headerShown: true
@@ -70,12 +70,12 @@ const ThemeExamples = () => {
             {localize("themeExamples-desc")}
         </Text>
         <Text
-            variant="titleMediumSize"
-            color="high"
             style={{
                 marginBottom: spaces.spacingLg,
                 marginTop: spaces.spacingXl
             }}
+            variant="titleMediumSize"
+            color="high"
         >
             {localize("themeExamples-switchers")}
         </Text>
@@ -101,11 +101,11 @@ const ThemeExamples = () => {
             ]}
         >
             <Text
-                variant="titleMediumSize"
-                color="high"
                 style={{
                     marginBottom: spaces.spacingMd
                 }}
+                variant="titleMediumSize"
+                color="high"
             >
                 {localize("themeExamples-typographyExamples")}
             </Text>
@@ -140,12 +140,12 @@ const ThemeExamples = () => {
                 {localize("themeExamples-labelLarge")}
             </Text>
             <Text
-                variant="titleMediumSize"
-                color="high"
                 style={{
                     marginBottom: spaces.spacingMd,
                     marginTop: spaces.spacingXl
                 }}
+                variant="titleMediumSize"
+                color="high"
             >
                 {localize("themeExamples-colorExamples")}
             </Text>
@@ -262,12 +262,12 @@ const ThemeExamples = () => {
                         size={size + 3}
                     />;
                 }}
-                title={localize("toolsUsage-title")}
                 onPress={() => {
                     navigation.navigate("CoreFeatures", {
                         screen: "ToolsUsage"
                     });
                 }}
+                title={localize("toolsUsage-title")}
             />
             <Button
                 icon={({
@@ -279,13 +279,13 @@ const ThemeExamples = () => {
                         size={size + 3}
                     />;
                 }}
-                title={localize("localeExamples-title")}
-                iconDirection="right"
                 onPress={() => {
                     navigation.navigate("CoreFeatures", {
                         screen: "LocaleExamples"
                     });
                 }}
+                title={localize("localeExamples-title")}
+                iconDirection="right"
             />
         </View>
     </PageContainer>;

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

@@ -3,16 +3,20 @@ import {
 } from "react-native";
 
 const stylesheet = StyleSheet.create({
-    rowContainer: {
+    rowSpaceBetween: {
+        justifyContent: "space-between",
         flexDirection: "row"
     },
-    borderedCard: {
-        borderRadius: 12
-    },
     rowContainer2: {
         flexDirection: "row",
         flexWrap: "wrap"
     },
+    rowContainer: {
+        flexDirection: "row"
+    },
+    borderedCard: {
+        borderRadius: 12
+    },
     borderedCard2: {
         borderRadius: 8
     },
@@ -27,10 +31,6 @@ const stylesheet = StyleSheet.create({
     },
     borderedCard6: {
         borderRadius: 8
-    },
-    rowSpaceBetween: {
-        justifyContent: "space-between",
-        flexDirection: "row"
     }
 });
 export default stylesheet;

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

@@ -22,8 +22,8 @@ import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
 import {
-    ChevronLeftIcon,
-    ChevronRightIcon
+    ChevronRightIcon,
+    ChevronLeftIcon
 } from "lucide-react-native";
 
 const ToolsUsage = () => {
@@ -41,9 +41,9 @@ const ToolsUsage = () => {
     useLayoutEffect(() => {
         navigation.setOptions({
             header: () => <Header
+                navigation={navigation as unknown as NCoreUIKit.Navigation}
                 title={localize("toolsUsage-title")}
                 isWrapSafeareaContext={false}
-                navigation={navigation as unknown as NCoreUIKit.Navigation}
                 isGoBackEnable={true}
             />,
             headerShown: true
@@ -140,19 +140,19 @@ const MyComponent = () => {
             {localize("toolsUsage-desc")}
         </Text>
         <Text
-            variant="titleMediumSize"
-            color="high"
             style={{
                 marginTop: spaces.spacingXl
             }}
+            variant="titleMediumSize"
+            color="high"
         >
             NCoreUIKitTheme.useContext
         </Text>
         <Text
-            color="mid"
             style={{
                 marginTop: spaces.spacingXs
             }}
+            color="mid"
         >
             {localize("toolsUsage-ncoreThemeDesc")}
         </Text>
@@ -167,19 +167,19 @@ const MyComponent = () => {
             />
         </View>
         <Text
-            variant="titleMediumSize"
-            color="high"
             style={{
                 marginTop: spaces.spacingXl
             }}
+            variant="titleMediumSize"
+            color="high"
         >
             NCoreUIKitLocalize.useContext
         </Text>
         <Text
-            color="mid"
             style={{
                 marginTop: spaces.spacingXs
             }}
+            color="mid"
         >
             {localize("toolsUsage-ncoreLocalizeDesc")}
         </Text>
@@ -194,19 +194,19 @@ const MyComponent = () => {
             />
         </View>
         <Text
-            variant="titleMediumSize"
-            color="high"
             style={{
                 marginTop: spaces.spacingXl
             }}
+            variant="titleMediumSize"
+            color="high"
         >
             NCoreUIKitToast.open
         </Text>
         <Text
-            color="mid"
             style={{
                 marginTop: spaces.spacingXs
             }}
+            color="mid"
         >
             {localize("toolsUsage-ncoreToastDesc")}
         </Text>
@@ -229,6 +229,11 @@ const MyComponent = () => {
             ]}
         >
             <Button
+                onPress={() => {
+                    navigation.navigate("GettingStarted", {
+                        screen: "Implementation"
+                    });
+                }}
                 icon={({
                     color,
                     size
@@ -239,11 +244,6 @@ const MyComponent = () => {
                     />;
                 }}
                 title={localize("implementation")}
-                onPress={() => {
-                    navigation.navigate("GettingStarted", {
-                        screen: "Implementation"
-                    });
-                }}
             />
             <Button
                 icon={({
@@ -255,13 +255,13 @@ const MyComponent = () => {
                         size={size + 3}
                     />;
                 }}
-                title={localize("themeExamples-title")}
-                iconDirection="right"
                 onPress={() => {
                     navigation.navigate("CoreFeatures", {
                         screen: "ThemeExamples"
                     });
                 }}
+                title={localize("themeExamples-title")}
+                iconDirection="right"
             />
         </View>
     </PageContainer>;

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

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