Added missing scrollProps properties to Screen component, Block now s…

…upports components as backgrounds.
prototypdigital · Apr 15, 2024 · facf708 · facf708
1 parent 851877c
commit facf708
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -206,6 +206,7 @@ scrollable?: boolean;
 scrollProps?: ScrollViewProps
 opacity?: ViewStyle["opacity"];
 animations?: Partial<ViewStyle>;
+background?: JSX.Element | string;
 ...Position,
 ...Alignment,
 ...Flex,

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "Luka Buljan <luka@prototyp.digital>",
     "Vlatko Vlahek <vlatko@prototyp.digital>"
   ],
-  "version": "1.0.16",
+  "version": "1.0.17",
   "license": "MIT",
   "types": "lib/typescript/index.d.ts",
   "main": "lib/module/index.js",

diff --git a/src/components/Block/Block.tsx b/src/components/Block/Block.tsx
@@ -35,7 +35,7 @@ type SkeletorProps = Alignment &
   Animations;
 
 type SharedProps = SkeletorProps & {
-  background?: string;
+  background?: JSX.Element | string;
   opacity?: ViewStyle["opacity"];
 };
 
@@ -92,7 +92,8 @@ const BlockElement: React.FC<PropsWithChildren<BlockElementProps>> = ({
     () =>
       StyleSheet.flatten([
         {
-          backgroundColor: background,
+          backgroundColor:
+            typeof background === "string" ? background : undefined,
           overflow,
           opacity,
         },
@@ -144,7 +145,20 @@ export const Block: React.FC<PropsWithChildren<BlockProps>> = ({
   ...props
 }) => {
   if (!isScrollable(props)) {
-    return <BlockElement {...props}>{children}</BlockElement>;
+    return (
+      <BlockElement {...props}>
+        {props.background && typeof props.background !== "string" && (
+          <BlockElement
+            absolute
+            zIndex={-1}
+            offsets={{ top: 0, bottom: 0, left: 0, right: 0 }}
+          >
+            {props.background}
+          </BlockElement>
+        )}
+        {children}
+      </BlockElement>
+    );
   }
 
   const { scrollProps, ...rest } = props;
@@ -165,12 +179,27 @@ export const Block: React.FC<PropsWithChildren<BlockProps>> = ({
       showsVerticalScrollIndicator={showsVerticalScrollIndicator}
       bounces={bounces}
       contentContainerStyle={[
-        { flexGrow: 1, backgroundColor: rest.background },
+        {
+          flexGrow: 1,
+          backgroundColor:
+            typeof rest.background === "string" ? rest.background : undefined,
+        },
         contentContainerStyle,
       ]}
       {...scrollProps}
     >
-      <BlockElement {...rest}>{children}</BlockElement>
+      <BlockElement {...rest}>
+        {rest.background && typeof rest.background !== "string" && (
+          <BlockElement
+            absolute
+            zIndex={-1}
+            offsets={{ top: 0, bottom: 0, left: 0, right: 0 }}
+          >
+            {rest.background}
+          </BlockElement>
+        )}
+        {children}
+      </BlockElement>
     </ScrollView>
   );
 };
diff --git a/src/components/Screen/Screen.tsx b/src/components/Screen/Screen.tsx
@@ -8,7 +8,7 @@ import {
 } from "react-native";
 
 import { useSkeletor } from "../../hooks";
-import { Block, BlockProps } from "../Block";
+import { Block, BlockScrollViewProps, BlockViewProps } from "../Block";
 
 type OwnProps = {
   /** Pass a specific background view OR just a background color value. Custom components should be 100% height and width. */
@@ -20,7 +20,7 @@ type OwnProps = {
   statusBarType?: "default" | "light-content" | "dark-content";
 };
 
-export type ScreenProps = OwnProps & Omit<BlockProps, "background">;
+export type ScreenProps = OwnProps & (BlockScrollViewProps | BlockViewProps);
 
 export const Screen: React.FC<PropsWithChildren<ScreenProps>> = ({
   background,