Allow style arrays in FormRow HOC

infinitered · Sep 7, 2018 · 3624927 · 3624927
1 parent f35ee00
commit 3624927
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/boilerplate/src/views/shared/form-row/form-row.props.tsx b/boilerplate/src/views/shared/form-row/form-row.props.tsx
@@ -14,7 +14,7 @@ export interface FormRowProps {
   /**
    * Override the container style... useful for margins and padding.
    */
-  style?: ViewStyle
+  style?: ViewStyle | ViewStyle[]
 
   /**
    * The type of border.

diff --git a/boilerplate/src/views/shared/form-row/form-row.tsx b/boilerplate/src/views/shared/form-row/form-row.tsx
@@ -2,17 +2,24 @@ import * as React from "react"
 import { View } from "react-native"
 import { PRESETS } from "./form-row.presets"
 import { FormRowProps } from "./form-row.props"
+import { concat, mergeWith } from "ramda"
 
 /**
  * A horizontal container component used to hold a row of a form.
  */
 export function FormRow(props: FormRowProps) {
+  let viewStyle
+  if (Array.isArray(props.style)) {
+    viewStyle = mergeWith(concat, PRESETS[props.preset], props.style)
+  } else {
+    viewStyle = {
+      ...PRESETS[props.preset],
+      ...props.style,
+    }
+  }
   return (
     <View
-      style={{
-        ...PRESETS[props.preset],
-        ...props.style,
-      }}
+      style={viewStyle}
     >
       {props.children}
     </View>