Fix style array logic

boilerplate/src/views/shared/button/button.story.tsx

@@ -1,14 +1,20 @@
 import * as React from "react"
+import { ViewStyle } from "react-native"
 import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { Button } from "./"
 
+const buttonStyleArray: ViewStyle[] = [
+  {paddingVertical: 100},
+  {borderRadius: 0},
+]
+
 storiesOf("Button", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Style Presets", () => (
     <Story>
       <UseCase text="Primary" usage="The primary button.">
-        <Button text="Click It" preset="primary" onPress={() => window.alert("pressed")} />
+        <Button text={"Click It"} onPress={() => window.alert("pressed")} style={buttonStyleArray} />
       </UseCase>
       <UseCase text="Disabled" usage="The disabled behaviour of the primary button.">
         <Button text="Click It" preset="primary" onPress={() => window.alert("pressed")} disabled />

boilerplate/src/views/shared/button/button.tsx

@@ -3,7 +3,7 @@ import { TouchableOpacity } from "react-native"
 import { Text } from "../text"
 import { viewPresets, textPresets } from "./button.presets"
 import { ButtonProps } from "./button.props"
-import { mergeWith, concat } from "ramda"
+import { reduce } from "ramda"
 
 /**
  * For your text displaying needs.
@@ -20,14 +20,18 @@ export function Button(props: ButtonProps) {
 
   let viewStyle
   if (Array.isArray(styleOverride)) {
-    viewStyle = mergeWith(concat, ...viewPresetToUse, styleOverride)
+    viewStyle = reduce((acc,term) => {
+      return { ...acc, ...term, }
+    }, viewPresetToUse, styleOverride)
   } else {
     viewStyle = { ...viewPresetToUse, ...styleOverride }
   }
 
   let textStyle
   if (Array.isArray(textStyleOverride)) {
-    textStyle = mergeWith(concat, ...textPresetToUse, textStyleOverride)
+    textStyle = reduce((acc,term) => {
+      return { ...acc, ...term, }
+    }, textPresetToUse, textStyleOverride)
   } else {
     textStyle = { ...textPresetToUse, ...textStyleOverride }
   }

boilerplate/src/views/shared/checkbox/checkbox.tsx

@@ -3,7 +3,7 @@ import { TouchableOpacity, TextStyle, ViewStyle, View } from "react-native"
 import { Text } from "../text"
 import { color, spacing } from "../../../theme"
 import { CheckboxProps } from "./checkbox.props"
-import { concat, mergeWith } from "ramda"
+import { reduce } from "ramda"
 
 const ROOT: ViewStyle = {
   flexDirection: "row",
@@ -36,21 +36,27 @@ export function Checkbox(props: CheckboxProps) {
 
   let rootStyle
   if (Array.isArray(props.style)) {
-    rootStyle = mergeWith(concat, ROOT, props.style) as ViewStyle
+    rootStyle = reduce((acc,term) => {
+      return { ...acc, ...term, }
+    }, ROOT, props.style)
   } else {
     rootStyle = { ...ROOT, ...props.style } as ViewStyle
   }
 
   let outlineStyle
   if (Array.isArray(props.outlineStyle)) {
-    outlineStyle = mergeWith(concat, OUTLINE, props.outlineStyle)
+    outlineStyle = reduce((acc,term) => {
+      return { ...acc, ...term, }
+    }, OUTLINE, props.outlineStyle)
   } else {
     outlineStyle = { ...OUTLINE, ...props.outlineStyle } as ViewStyle
   }
 
   let fillStyle
   if (Array.isArray(props.fillStyle)) {
-    fillStyle = mergeWith(concat, FILL, props.fillStyle)
+    rootStyle = reduce((acc,term) => {
+      return { ...acc, ...term, }
+    }, FILL, props.fillStyle)
   } else {
     fillStyle = { ...FILL, ...props.fillStyle } as ViewStyle
   }

boilerplate/src/views/shared/form-row/form-row.tsx

@@ -2,15 +2,17 @@ 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"
+import { reduce } 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)
+    viewStyle = reduce((acc,term) => {
+      return { ...acc, ...term, }
+    }, PRESETS[props.preset], props.style)
   } else {
     viewStyle = {
       ...PRESETS[props.preset],

boilerplate/src/views/shared/switch/switch.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { ViewStyle, Animated, Easing, TouchableWithoutFeedback } from "react-native"
 import { color } from "../../../theme"
 import { SwitchProps } from "./switch.props"
-import { concat, mergeWith } from "ramda"
+import { reduce } from "ramda"
 
 // dimensions
 const THUMB_SIZE = 30
@@ -80,11 +80,15 @@ export class Switch extends React.PureComponent<SwitchProps, SwitchState> {
   enhanceStyle(baseStyle, onOption, offOption) {
     if (this.props.value)  {
       if (Array.isArray(onOption)) {
-        return mergeWith(concat, baseStyle, onOption)
+        return reduce((acc,term) => {
+          return { ...acc, ...term, }
+        }, baseStyle, onOption)
       }
     } else {
       if (Array.isArray(offOption)) {
-        return mergeWith(concat, baseStyle, offOption)
+        return reduce((acc,term) => {
+          return { ...acc, ...term, }
+        }, baseStyle, offOption)
       }
     }
   }
@@ -100,7 +104,9 @@ export class Switch extends React.PureComponent<SwitchProps, SwitchState> {
 
     let style
     if (Array.isArray(this.props.style)) {
-      style = mergeWith(concat, {}, this.props.style)
+      style = reduce((acc,term) => {
+        return { ...acc, ...term, }
+      }, {}, this.props.style)
     } else {
       style = this.props.style
     }

boilerplate/src/views/shared/text/text.tsx

@@ -3,7 +3,7 @@ import { Text as ReactNativeText } from "react-native"
 import { presets } from "./text.presets"
 import { TextProps } from "./text.props"
 import { translate } from "../../../i18n"
-import { mergeWith, concat } from "ramda"
+import { reduce } from "ramda"
 
 /**
  * For your text displaying needs.
@@ -22,7 +22,9 @@ export function Text(props: TextProps) {
   const presetToUse = presets[preset] || presets.default
   let style
   if (Array.isArray(styleOverride)) {
-    style = mergeWith(concat, ...presetToUse, styleOverride)
+    style = reduce((acc,term) => {
+      return { ...acc, ...term, }
+    }, presetToUse, styleOverride)
   } else {
     style = { ...presetToUse, ...styleOverride }
   }