diff --git a/example/src/components/SpacerViewerBox.tsx b/example/src/components/SpacerViewerBox.tsx
new file mode 100644
index 00000000..87e3ef47
--- /dev/null
+++ b/example/src/components/SpacerViewerBox.tsx
@@ -0,0 +1,71 @@
+import {
+ HSpacer,
+ IOColors,
+ IOSpacer,
+ IOThemeContext,
+ SpacerOrientation,
+ VSpacer
+} from "@pagopa/io-app-design-system";
+import React, { useContext } from "react";
+import { Text, View } from "react-native";
+
+type SpacerViewerBoxProps = {
+ size: IOSpacer;
+ orientation?: SpacerOrientation;
+};
+
+const SpacerLabel = ({ value }: { value: IOSpacer }) => {
+ const theme = useContext(IOThemeContext);
+ return (
+
+ {value}
+
+ );
+};
+
+export const SpacerViewerBox = ({
+ size,
+ orientation = "vertical"
+}: SpacerViewerBoxProps) => {
+ const theme = useContext(IOThemeContext);
+ return (
+ <>
+ {orientation === "vertical" ? (
+
+
+
+
+ {size && (
+
+
+
+ )}
+
+ ) : (
+
+
+
+
+ {size && (
+
+
+
+ )}
+
+ )}
+
+ );
+};
diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx
index 53e50e8e..f79a7702 100644
--- a/example/src/navigation/navigator.tsx
+++ b/example/src/navigation/navigator.tsx
@@ -1,10 +1,10 @@
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
-import { Icons } from "../pages/Icons";
-import { Logos } from "../pages/Logos";
-
import { DSAdvice } from "../pages/Advice";
import { DSAlert } from "../pages/Alert";
+import { Icons } from "../pages/Icons";
+import { Layout } from "../pages/Layout";
+import { Logos } from "../pages/Logos";
import MainScreen from "../pages/MainScreen";
import { Pictograms } from "../pages/Pictograms";
import { Typography } from "../pages/Typography";
@@ -57,6 +57,14 @@ const AppNavigator = () => (
headerBackTitleVisible: false
}}
/>
+
{
+ const theme = useContext(IOThemeContext);
+
+ return (
+
+
+
+ Grid
+
+
+ ContentWrapper
+
+
+ {IOAppMargin.map((value, i, arr) => (
+
+
+
+
+ Content example
+
+ {value}
+
+
+
+
+ {i !== arr.length - 1 && }
+
+ ))}
+
+
+
+
+
+ Spacing
+
+
+
+ VSpacer
+
+
+ {/* Vertical */}
+ {IOSpacer.map((spacerEntry, i, arr) => (
+
+
+ {/* Don't add spacer to the last item. Quick and dirty
+ alternative to the Stack component.
+ https://stackoverflow.com/a/60975451 */}
+ {i !== arr.length - 1 && }
+
+ ))}
+
+
+
+
+ HSpacer
+
+
+ {/* Horizontal */}
+
+ {IOSpacer.map((spacerEntry, i, arr) => (
+
+
+ {i !== arr.length - 1 && }
+
+ ))}
+
+
+
+
+
+
+
+ Divider
+
+
+
+ Default (Horizontal)
+
+
+
+
+
+
+
+
+
+
+ Vertical
+
+
+
+
+
+
+
+
+ );
+};