diff --git a/packages/lucide-react-native/src/createLucideIcon.ts b/packages/lucide-react-native/src/createLucideIcon.ts index 3c0ed5671..fe1ea1301 100644 --- a/packages/lucide-react-native/src/createLucideIcon.ts +++ b/packages/lucide-react-native/src/createLucideIcon.ts @@ -30,7 +30,9 @@ const createLucideIcon = (iconName: string, iconNode: IconNode) => { const upperCasedTag = (tag.charAt(0).toUpperCase() + tag.slice(1)) as keyof (typeof NativeSvg); return createElement(NativeSvg[upperCasedTag] as FunctionComponent>, attrs); }), - ...(children as ReactNode[] || []), + ...( + (Array.isArray(children) ? children : [children]) || [] + ), ], ), ); diff --git a/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap b/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap index cacc50c33..18786cf7a 100644 --- a/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap +++ b/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap @@ -5,3 +5,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `""`; exports[`Using lucide icon components > should render an component 1`] = `""`; + +exports[`Using lucide icon components > should work with a single child component 1`] = `""`; + +exports[`Using lucide icon components > should work with several children components 1`] = `""`; diff --git a/packages/lucide-react-native/tests/lucide-react-native.spec.tsx b/packages/lucide-react-native/tests/lucide-react-native.spec.tsx index b898d59b2..7debf73ae 100644 --- a/packages/lucide-react-native/tests/lucide-react-native.spec.tsx +++ b/packages/lucide-react-native/tests/lucide-react-native.spec.tsx @@ -80,4 +80,40 @@ describe('Using lucide icon components', () => { expect( container.innerHTML ).toMatchSnapshot(); }); + + it('should work with a single child component', () => { + const testId = "single-child"; + const childId = "child"; + + const { container, getByTestId } = render( + + + + ); + const { children} = getByTestId(testId) as unknown as{ children: HTMLCollection}; + const lastChild = children[children.length -1]; + + expect(lastChild).toEqual(getByTestId(childId)); + expect(container.innerHTML).toMatchSnapshot(); + }) + + it('should work with several children components', () => { + const testId = "multiple-children"; + const childId1 = "child1"; + const childId2 = "child2"; + + const { container, getByTestId } = render( + + + + + ); + const {children} = getByTestId(testId) as unknown as{ children: HTMLCollection}; + const child1 = children[children.length - 2]; + const child2 = children[children.length - 1]; + + expect(child1).toEqual(getByTestId(childId1)); + expect(child2).toEqual(getByTestId(childId2)); + expect(container.innerHTML).toMatchSnapshot(); + }) })