Checkbox array style story

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

@@ -1,10 +1,23 @@
 import * as React from "react"
-import { View } from "react-native"
+import { View, ViewStyle } from "react-native"
 import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { Checkbox } from "./"
 import { Toggle } from "react-powerplug"
 
+const arrayStyle: ViewStyle[] = [
+  {paddingVertical: 40},
+  {alignSelf: "flex-end"},
+]
+const arrayOutlineStyle: ViewStyle[] =
+  [
+    {borderColor: "#b443c9"},
+    {borderWidth: 25},
+  ]
+const arrayFillStyle: ViewStyle[] = [
+  {backgroundColor: "#55e0ff"},
+]
+
 storiesOf("Checkbox", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Behaviour", () => (
@@ -91,5 +104,22 @@ storiesOf("Checkbox", module)
           )}
         </Toggle>
       </UseCase>
+
+      <UseCase text="Array style" usage="Use array styles">
+        <Toggle initial={false}>
+          {({ on, toggle }) => (
+            <View>
+              <Checkbox
+                text="Check it twice"
+                value={on}
+                onToggle={toggle}
+                style={arrayStyle}
+                outlineStyle={arrayOutlineStyle}
+                fillStyle={arrayFillStyle}
+              />
+            </View>
+          )}
+        </Toggle>
+      </UseCase>
     </Story>
   ))

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

@@ -37,7 +37,7 @@ export function Checkbox(props: CheckboxProps) {
   let rootStyle
   if (Array.isArray(props.style)) {
     rootStyle = reduce((acc,term) => {
-      return { ...acc, ...term, }
+      return { ...acc, ...term }
     }, ROOT, props.style)
   } else {
     rootStyle = { ...ROOT, ...props.style } as ViewStyle
@@ -46,16 +46,16 @@ export function Checkbox(props: CheckboxProps) {
   let outlineStyle
   if (Array.isArray(props.outlineStyle)) {
     outlineStyle = reduce((acc,term) => {
-      return { ...acc, ...term, }
+      return { ...acc, ...term }
     }, OUTLINE, props.outlineStyle)
   } else {
     outlineStyle = { ...OUTLINE, ...props.outlineStyle } as ViewStyle
   }
 
   let fillStyle
   if (Array.isArray(props.fillStyle)) {
-    rootStyle = reduce((acc,term) => {
-      return { ...acc, ...term, }
+    fillStyle = reduce((acc,term) => {
+      return { ...acc, ...term }
     }, FILL, props.fillStyle)
   } else {
     fillStyle = { ...FILL, ...props.fillStyle } as ViewStyle