From a87e6f11f824676f5448c0dcc18b49ab886417dd Mon Sep 17 00:00:00 2001
From: Marcin Dziewulski <hello@mobily.pl>
Date: Mon, 12 Apr 2021 23:41:11 +0200
Subject: [PATCH] Update example

---
 .../typescript/screens/Playground/index.tsx   | 255 ++++++++++--------
 1 file changed, 138 insertions(+), 117 deletions(-)

diff --git a/example/src/typescript/screens/Playground/index.tsx b/example/src/typescript/screens/Playground/index.tsx
index 1d823021..f6bbfbe1 100644
--- a/example/src/typescript/screens/Playground/index.tsx
+++ b/example/src/typescript/screens/Playground/index.tsx
@@ -1,136 +1,157 @@
 import React from 'react'
-import { Text } from 'react-native'
+import { ScrollView, Text } from 'react-native'
 import { Box, Columns, Column, Stack, Inline, Tiles, FillView } from '@mobily/stacks'
 
 import { Placeholder } from '../../components/Placeholder'
 
 export const Playground = () => {
   return (
-    <Box padding={2}>
-      <Stack space={2}>
-        <Text>Columns</Text>
-        <Stack space={3}>
-          <Columns space={1}>
-            <Column>
-              <Text>C1</Text>
-            </Column>
-            <Column>
-              <Text>C2</Text>
-            </Column>
-            <Column>
-              <Text>C3</Text>
-            </Column>
-          </Columns>
-          <Columns space={1} alignY="center">
-            <Column>
-              <Text>C1</Text>
-            </Column>
-            <Column>
-              <Columns space={2}>
-                <Column>
-                  <Text>C21</Text>
-                </Column>
-                <Column>
-                  <Text>C22</Text>
-                </Column>
-              </Columns>
-            </Column>
-            <Column>
-              <Tiles columns={2} space={1}>
-                <Text>T1</Text>
-                <Text>T2</Text>
-                <Text>T3</Text>
-              </Tiles>
-            </Column>
-          </Columns>
-          <Columns space={1}>
-            <Column width="1/2">
-              <Text>C1</Text>
-            </Column>
-            <Column width="content">
-              <Text>C2</Text>
-            </Column>
-            <Column>
-              <Text>C3</Text>
-            </Column>
-            <Column>
-              <Text>C4</Text>
-            </Column>
-          </Columns>
-          <Columns space={2}>
-            <Column width="1/4">
-              <Columns space={2}>
-                <Column width="1/2">
-                  <Text>C11</Text>
-                </Column>
-                <Column width="1/2">
-                  <Text>C12</Text>
-                </Column>
-              </Columns>
-            </Column>
-            <Column>
-              <Text>C2</Text>
-              <Text>C3</Text>
-            </Column>
-          </Columns>
-        </Stack>
+    <ScrollView>
+      <Box padding={2}>
+        <Stack space={2}>
+          <Text>Columns</Text>
+          <Stack space={3}>
+            <Columns space={1}>
+              <Column>
+                <Text>C1</Text>
+              </Column>
+              <Column>
+                <Text>C2</Text>
+              </Column>
+              <Column>
+                <Text>C3</Text>
+              </Column>
+            </Columns>
+            <Columns space={1} alignY="center">
+              <Column>
+                <Text>C1</Text>
+              </Column>
+              <Column>
+                <Columns space={2}>
+                  <Column>
+                    <Text>C21</Text>
+                  </Column>
+                  <Column>
+                    <Text>C22</Text>
+                  </Column>
+                </Columns>
+              </Column>
+              <Column>
+                <Tiles columns={2} space={1}>
+                  <Text>T1</Text>
+                  <Text>T2</Text>
+                  <Text>T3</Text>
+                </Tiles>
+              </Column>
+            </Columns>
+            <Columns space={1}>
+              <Column width="1/2">
+                <Text>C1</Text>
+              </Column>
+              <Column width="content">
+                <Text>C2</Text>
+              </Column>
+              <Column>
+                <Text>C3</Text>
+              </Column>
+              <Column>
+                <Text>C4</Text>
+              </Column>
+            </Columns>
+            <Columns space={2}>
+              <Column width="1/4">
+                <Columns space={2}>
+                  <Column width="1/2">
+                    <Text>C11</Text>
+                  </Column>
+                  <Column width="1/2">
+                    <Text>C12</Text>
+                  </Column>
+                </Columns>
+              </Column>
+              <Column>
+                <Text>C2</Text>
+                <Text>C3</Text>
+              </Column>
+            </Columns>
+          </Stack>
 
-        <Text>Inline</Text>
-        <Inline space={1}>
-          <Text>inline 1</Text>
-          <Text>inline 2</Text>
-          <Text>inline 3</Text>
-        </Inline>
-        <Inline space={1}>
-          <Text>Lorem ipsum</Text>
-          <Text>Quisquam hic</Text>
-          <Text>nulla ad velit</Text>
-          <Text>Lorem ipsum</Text>
-        </Inline>
+          <Text>Inline</Text>
+          <Inline space={1}>
+            <Text>inline 1</Text>
+            <Text>inline 2</Text>
+            <Text>inline 3</Text>
+          </Inline>
+          <Inline space={1}>
+            <Text>Lorem ipsum</Text>
+            <Text>Quisquam hic</Text>
+            <Text>nulla ad velit</Text>
+            <Text>Lorem ipsum</Text>
+          </Inline>
 
-        <Text>Tiles</Text>
-        <Tiles columns={2} space={1}>
-          <Text>T1</Text>
-          <Text>T2</Text>
-          <Text>T3</Text>
-          <Text>T4</Text>
-          <Text>T5</Text>
-        </Tiles>
+          <Text>Tiles</Text>
+          <Tiles columns={2} space={1}>
+            <Text>T1</Text>
+            <Text>T2</Text>
+            <Text>T3</Text>
+            <Text>T4</Text>
+            <Text>T5</Text>
+          </Tiles>
 
-        <Text>Box</Text>
-        <Box direction="row">
-          <Box flex="fluid" direction="row" alignX="between">
-            <Box flex="fluid" alignX="center" alignY="center">
-              <Text>B1</Text>
-              <Text>B2</Text>
-            </Box>
-            <Box flex="1/4" style={{ height: 200, backgroundColor: 'pink' }}>
-              <Box style={{ height: 100 }}>
-                <FillView alignX="center" alignY="center" style={{ backgroundColor: 'yellow' }}>
-                  <Text>B0</Text>
-                </FillView>
+          <Text>Box</Text>
+          <Box direction="row">
+            <Box flex="fluid" direction="row" alignX="between">
+              <Box flex="fluid" alignX="center" alignY="center">
+                <Text>B1</Text>
+                <Text>B2</Text>
+              </Box>
+              <Box flex="1/4" style={{ height: 200, backgroundColor: 'pink' }}>
+                <Box style={{ height: 100 }}>
+                  <FillView alignX="center" alignY="center" style={{ backgroundColor: 'yellow' }}>
+                    <Text>B0</Text>
+                  </FillView>
+                </Box>
+                <Text>B1</Text>
               </Box>
-              <Text>B1</Text>
             </Box>
           </Box>
-        </Box>
-        <Stack space={4} horizontal={true} align="center">
-          <Text>T1</Text>
-          <Text>T2</Text>
-          <Text>T3</Text>
-        </Stack>
-        <Stack space={4} horizontal={true} align={['center', 'bottom']}>
-          <Placeholder height={50}>
+          <Stack space={4} align={['center', 'bottom']}>
+            <Placeholder height={50} width={120}>
+              <Text>T1</Text>
+            </Placeholder>
+            <Placeholder height={70} width={200}>
+              <Text>T2</Text>
+            </Placeholder>
+            <Placeholder height={30} width={150}>
+              <Text>T3</Text>
+            </Placeholder>
+          </Stack>
+          <Stack space={4} horizontal={true} align="center">
             <Text>T1</Text>
-          </Placeholder>
-          <Placeholder height={70}>
             <Text>T2</Text>
-          </Placeholder>
-          <Placeholder height={30}>
             <Text>T3</Text>
-          </Placeholder>
+          </Stack>
+          <Stack space={4} horizontal={true} align={['center', 'bottom']}>
+            <Placeholder height={50}>
+              <Text>T1</Text>
+            </Placeholder>
+            <Placeholder height={70}>
+              <Text>T2</Text>
+            </Placeholder>
+            <Placeholder height={30}>
+              <Text>T3</Text>
+            </Placeholder>
+          </Stack>
+          <Columns style={{ height: 64, backgroundColor: 'white' }} alignX="evenly">
+            <Column style={{ backgroundColor: 'red' }}>
+              <Text>T1</Text>
+            </Column>
+            <Column style={{ backgroundColor: 'red' }}>
+              <Text>T2</Text>
+            </Column>
+          </Columns>
         </Stack>
-      </Stack>
-    </Box>
+      </Box>
+    </ScrollView>
   )
 }