Fix #6

Author: mobily

src/Columns/index.tsx

@@ -36,7 +36,8 @@ export const Columns = (props: Props) => {
     ...rest
   } = props
   const { resolveResponsiveProp, currentBreakpoint } = useBreakpoint()
-  const isLast = lastFactory(children)
+  const elements = Children.toArray(children)
+  const isLast = lastFactory(elements)
   const debugStyle = useDebugStyle()
 
   const alignX = resolveResponsiveProp(responsiveAlignX)
@@ -67,7 +68,7 @@ export const Columns = (props: Props) => {
       ]}
       {...rest}
     >
-      {Children.map(children, (child, index) => {
+      {elements.map((child, index) => {
         const marginStyle = isLast(index) ? noLastMargin : spacing
 
         return isValidElement(child)

src/Inline/index.tsx

@@ -22,6 +22,7 @@ export const Inline = (props: Props) => {
   const margin = useSpacing(resolveResponsiveProp(space))
   const align = resolveResponsiveProp(responsiveAlign)
   const debugStyle = useDebugStyle()
+  const elements = Children.toArray(children)
 
   return (
     <View style={style} {...rest}>
@@ -33,7 +34,7 @@ export const Inline = (props: Props) => {
           { marginTop: -margin, marginRight: -margin },
         ]}
       >
-        {Children.map(children, child => {
+        {elements.map(child => {
           return isValidElement(child)
             ? cloneElement(child, {
                 ...child.props,

src/Stack/index.tsx

@@ -23,14 +23,15 @@ export const Stack = (props: Props) => {
 
   const margin = useSpacing(resolveResponsiveProp(space))
   const align = resolveResponsiveProp(responsiveAlign)
-  const isLast = lastFactory(children)
+  const elements = Children.toArray(children)
+  const isLast = lastFactory(elements)
 
   return (
     <View
       style={[style, styles.fullWidth, resolveDirection('column'), resolveAlign(align)]}
       {...rest}
     >
-      {Children.map(children, (child, index) => {
+      {elements.map((child, index) => {
         return isValidElement(child)
           ? cloneElement(child, {
               ...child.props,

src/utils.ts

@@ -95,7 +95,7 @@ const normalizeResponsiveProp = <T>(value: ResponsiveProp<T>): Readonly<[T, T, T
 export const randomColor = () =>
   `rgba(${[randomByte(), randomByte(), randomByte(), 0.2].join(',')})`
 
-export const lastFactory = (elements: React.ReactNode) => (index: number) =>
+export const lastFactory = (elements: ReturnType<typeof Children.toArray>) => (index: number) =>
   index === Children.count(elements) - 1
 
 export const splitEvery = <T>(n: number, list: T[]) => {