Merge pull request #28 from bothrs/react-native-layout/bugfix/contain…

…er-flex

fix(React-Native-Layout): Add 'flex' as a prop on Container

packages/react-native-layout/src/components/container/Container.props.ts

@@ -1,10 +1,11 @@
-import type { LayoutChangeEvent } from 'react-native'
+import type { LayoutChangeEvent, ViewStyle } from 'react-native'
 
 import type { PaddingOrMarginProps } from '../../types/generic-props'
 
 export interface ContainerProps {
   type: 'padding' | 'margin'
   amount: PaddingOrMarginProps
   backgroundColor?: string
+  style?: ViewStyle
   onLayout?: (e: LayoutChangeEvent) => void
 }

packages/react-native-layout/src/components/container/Container.test.tsx

@@ -11,11 +11,11 @@ describe('Container', () => {
     const foundElement = getByTestId('paddingWithHorizontal')
     const foundElementStyles = foundElement.props.style
 
-    expect(foundElementStyles.backgroundColor).toEqual('transparent')
-    expect(foundElementStyles.paddingHorizontal).toEqual(10)
-    expect(foundElementStyles.paddingTop).toEqual(undefined)
-    expect(foundElementStyles.paddingBottom).toEqual(undefined)
-    expect(foundElementStyles.paddingVertical).toEqual(undefined)
+    expect(foundElementStyles[0].backgroundColor).toEqual('transparent')
+    expect(foundElementStyles[2].paddingHorizontal).toEqual(10)
+    expect(foundElementStyles[2].paddingTop).toEqual(undefined)
+    expect(foundElementStyles[2].paddingBottom).toEqual(undefined)
+    expect(foundElementStyles[2].paddingVertical).toEqual(undefined)
   })
 
   it('Padding: Should render with vertical padding', () => {
@@ -25,11 +25,11 @@ describe('Container', () => {
     const foundElement = getByTestId('paddingWithVertical')
     const foundElementStyles = foundElement.props.style
 
-    expect(foundElementStyles.backgroundColor).toEqual('transparent')
-    expect(foundElementStyles.paddingVertical).toEqual(10)
-    expect(foundElementStyles.paddingLeft).toEqual(undefined)
-    expect(foundElementStyles.paddingRight).toEqual(undefined)
-    expect(foundElementStyles.paddingHorizontal).toEqual(undefined)
+    expect(foundElementStyles[0].backgroundColor).toEqual('transparent')
+    expect(foundElementStyles[2].paddingVertical).toEqual(10)
+    expect(foundElementStyles[2].paddingLeft).toEqual(undefined)
+    expect(foundElementStyles[2].paddingRight).toEqual(undefined)
+    expect(foundElementStyles[2].paddingHorizontal).toEqual(undefined)
   })
 
   it('Padding: Should render with background color', () => {
@@ -43,7 +43,7 @@ describe('Container', () => {
     const foundElement = getByTestId('paddingWithBackground')
     const foundElementStyles = foundElement.props.style
 
-    expect(foundElementStyles.backgroundColor).toEqual('#AAA')
+    expect(foundElementStyles[0].backgroundColor).toEqual('#AAA')
   })
 
   it('Margin: Should render with horizontal margin', () => {
@@ -53,11 +53,11 @@ describe('Container', () => {
     const foundElement = getByTestId('marginWithHorizontal')
     const foundElementStyles = foundElement.props.style
 
-    expect(foundElementStyles.backgroundColor).toEqual('transparent')
-    expect(foundElementStyles.marginHorizontal).toEqual(10)
-    expect(foundElementStyles.marginTop).toEqual(undefined)
-    expect(foundElementStyles.marginBottom).toEqual(undefined)
-    expect(foundElementStyles.marginVertical).toEqual(undefined)
+    expect(foundElementStyles[0].backgroundColor).toEqual('transparent')
+    expect(foundElementStyles[2].marginHorizontal).toEqual(10)
+    expect(foundElementStyles[2].marginTop).toEqual(undefined)
+    expect(foundElementStyles[2].marginBottom).toEqual(undefined)
+    expect(foundElementStyles[2].marginVertical).toEqual(undefined)
   })
 
   it('Margin: Should render with vertical margin', () => {
@@ -67,11 +67,11 @@ describe('Container', () => {
     const foundElement = getByTestId('marginWithVertical')
     const foundElementStyles = foundElement.props.style
 
-    expect(foundElementStyles.backgroundColor).toEqual('transparent')
-    expect(foundElementStyles.marginVertical).toEqual(10)
-    expect(foundElementStyles.marginLeft).toEqual(undefined)
-    expect(foundElementStyles.marginRight).toEqual(undefined)
-    expect(foundElementStyles.marginHorizontal).toEqual(undefined)
+    expect(foundElementStyles[0].backgroundColor).toEqual('transparent')
+    expect(foundElementStyles[2].marginVertical).toEqual(10)
+    expect(foundElementStyles[2].marginLeft).toEqual(undefined)
+    expect(foundElementStyles[2].marginRight).toEqual(undefined)
+    expect(foundElementStyles[2].marginHorizontal).toEqual(undefined)
   })
 
   it('Margin: Should render with background color', () => {
@@ -85,6 +85,20 @@ describe('Container', () => {
     const foundElement = getByTestId('marginWithBackground')
     const foundElementStyles = foundElement.props.style
 
-    expect(foundElementStyles.backgroundColor).toEqual('#AAA')
+    expect(foundElementStyles[0].backgroundColor).toEqual('#AAA')
+  })
+
+  it('Margin: Should render with custom styles', () => {
+    const { getByTestId } = render(
+      <Margin
+        amount={{ vertical: 10 }}
+        style={{ borderRadius: 3 }}
+        testID={'marginWithBackground'}
+      />
+    )
+    const foundElement = getByTestId('marginWithBackground')
+    const foundElementStyles = foundElement.props.style
+
+    expect(foundElementStyles[1].borderRadius).toEqual(3)
   })
 })

packages/react-native-layout/src/components/container/Container.tsx

@@ -1,39 +1,54 @@
-import React from 'react'
-import { View, ViewStyle } from 'react-native'
+import React, { useEffect } from 'react'
+import { StyleProp, View, ViewStyle } from 'react-native'
 
+import type { FunctionComponent } from 'react'
 import type { TestableComponent } from '../../types/generic-props'
 import type { ContainerProps } from './Container.props'
 
-const Container: React.FC<ContainerProps & TestableComponent> = ({
+const Container: FunctionComponent<ContainerProps & TestableComponent> = ({
   children,
   testID,
   type,
   backgroundColor = 'transparent',
+  style,
   amount,
   onLayout,
 }) => {
-  const styles: ViewStyle = {
-    backgroundColor,
-    ...(amount.horizontal
-      ? {
-          [`${type}Horizontal`]: amount.horizontal,
-        }
-      : {
-          [`${type}Left`]: amount.left,
-          [`${type}Right`]: amount.right,
-        }),
-    ...(amount.vertical
-      ? {
-          [`${type}Vertical`]: amount.vertical,
-        }
-      : {
-          [`${type}Top`]: amount.top,
-          [`${type}Bottom`]: amount.bottom,
-        }),
-  }
+  useEffect(() => {
+    if (backgroundColor !== 'transparent') {
+      console.warn(
+        '[@bothrs/react-native-layout]: backgroundColor has been deprecated and will be removed in a later version.'
+      )
+    }
+  }, [backgroundColor])
+
+  const composedStyles: StyleProp<ViewStyle> = [
+    {
+      backgroundColor,
+    },
+    style,
+    {
+      ...(amount.horizontal
+        ? {
+            [`${type}Horizontal`]: amount.horizontal,
+          }
+        : {
+            [`${type}Left`]: amount.left,
+            [`${type}Right`]: amount.right,
+          }),
+      ...(amount.vertical
+        ? {
+            [`${type}Vertical`]: amount.vertical,
+          }
+        : {
+            [`${type}Top`]: amount.top,
+            [`${type}Bottom`]: amount.bottom,
+          }),
+    },
+  ]
 
   return (
-    <View testID={testID} onLayout={onLayout} style={styles}>
+    <View testID={testID} onLayout={onLayout} style={composedStyles}>
       {children}
     </View>
   )