Added background view with flexible color and offset

AllGistsEqual · Jan 26, 2020 · 4874bc8 · 4874bc8
1 parent 7a05753
commit 4874bc8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/Box/index.jsx b/src/components/Box/index.jsx
@@ -11,6 +11,8 @@ const Box = ({ children, setup }) => {
         width,
         height,
         margin,
+        backgroundColor = '#fff',
+        backgroundOffset = {},
         N = { id: 'N' },
         S = { id: 'S' },
         E = { id: 'E' },
@@ -40,10 +42,14 @@ const Box = ({ children, setup }) => {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: '#fff',
-            borderRadius: 4,
-            borderWidth: 0.5,
-            borderColor: '#000',
+        },
+        background: {
+            backgroundColor: backgroundColor || undefined,
+            position: 'absolute',
+            top: backgroundOffset.top ?? 0,
+            right: backgroundOffset.right ?? 0,
+            bottom: backgroundOffset.bottom ?? 0,
+            left: backgroundOffset.left ?? 0,
         },
         posN: {
             ...base.pos,
@@ -107,6 +113,7 @@ const Box = ({ children, setup }) => {
 
     return (
         <View style={styles.boxOuter}>
+            <View style={styles.background} />
             {
                 [N, E, S, W, NE, NW, SE, SW].map((loc) => (
                     <View

diff --git a/src/scenes/ScenePlayground.jsx b/src/scenes/ScenePlayground.jsx
@@ -12,6 +12,7 @@ const setupOffset = {
     width: 280,
     height: 160,
     margin: 0,
+    backgroundColor: '#ddd',
     N: {
         id: 'N',
         height: 20,