Adds background compatibility to layout components (#742)

Author: YoussefHenna

packages/core/src/components/Layout/Center.tsx

@@ -1,8 +1,12 @@
 import React from "react";
 import { View, ViewProps, StyleSheet } from "react-native";
+import { convertBackwardCompatiblePropsToStyle } from "./LayoutCommon";
 
 const Center: React.FC<ViewProps> = ({ style, ...rest }) => {
-  return <View {...rest} style={[styles.center, style]} />;
+  const backwardsCompatibleStyle = convertBackwardCompatiblePropsToStyle(rest);
+  return (
+    <View {...rest} style={[styles.center, backwardsCompatibleStyle, style]} />
+  );
 };
 
 const styles = StyleSheet.create({

packages/core/src/components/Layout/Circle.tsx

@@ -1,13 +1,26 @@
 import React from "react";
 import { ViewProps, StyleSheet } from "react-native";
 import Square from "./Square";
+import { pick } from "lodash";
+import { convertBackwardCompatiblePropsToStyle } from "./LayoutCommon";
 
 interface CircleProps extends ViewProps {
   size?: number;
 }
 
 const Circle: React.FC<CircleProps> = ({ size, style, ...rest }) => {
-  return <Square {...rest} size={size} style={[style, styles.circle]} />;
+  const backwardsCompatibleStyle = pick(
+    convertBackwardCompatiblePropsToStyle(rest),
+    "backgroundColor"
+  );
+
+  return (
+    <Square
+      {...rest}
+      size={size}
+      style={[backwardsCompatibleStyle, style, styles.circle]}
+    />
+  );
 };
 
 const styles = StyleSheet.create({

packages/core/src/components/Layout/LayoutCommon.ts

@@ -0,0 +1,25 @@
+import { ViewProps, ViewStyle } from "react-native";
+
+/**
+ * Old and deprecated layout components of the same names had props that have since been removed
+ * This maintains correct rendering when using the older/deprecated props as to not break existing usage
+ * (See: deprecared-components/Layout)
+ *
+ * These deprecated props are not exposed in the component type to discourage their usage
+ */
+
+interface BackwardsCompatibleProps {
+  width?: number;
+  height?: number;
+  bgColor?: string;
+}
+
+export function convertBackwardCompatiblePropsToStyle(
+  props: BackwardsCompatibleProps & ViewProps
+): ViewStyle {
+  return {
+    width: props.width,
+    height: props.height,
+    backgroundColor: props.bgColor,
+  };
+}

packages/core/src/components/Layout/Square.tsx

@@ -1,13 +1,19 @@
 import React from "react";
 import { ViewProps } from "react-native";
 import Center from "./Center";
+import { pick } from "lodash";
+import { convertBackwardCompatiblePropsToStyle } from "./LayoutCommon";
 
 interface SquareProps extends ViewProps {
   size?: number;
 }
 
 const Square: React.FC<SquareProps> = ({ size, style, onLayout, ...rest }) => {
   const [calculatedSize, setCalculatedSize] = React.useState(0);
+  const backwardsCompatibleStyle = pick(
+    convertBackwardCompatiblePropsToStyle(rest),
+    "backgroundColor"
+  );
 
   return (
     <Center
@@ -18,6 +24,7 @@ const Square: React.FC<SquareProps> = ({ size, style, onLayout, ...rest }) => {
       }}
       {...rest}
       style={[
+        backwardsCompatibleStyle,
         style,
         size != undefined ? { width: size, height: size } : {},
         calculatedSize > 0