Allow to pass false values in a Button.Group

[NoZiL]

Description

Hi, I would like to do conditional rendering within a Button.Group.

Problem Statement

I was trying to render some button in a group only if a condition is true.

Proposed Solution or API

diff --git a/node_modules/native-base/lib/typescript/components/primitives/Button/types.d.ts b/node_modules/native-base/lib/typescript/components/primitives/Button/types.d.ts
index aec4dd2..5fdcc1f 100644
--- a/node_modules/native-base/lib/typescript/components/primitives/Button/types.d.ts
+++ b/node_modules/native-base/lib/typescript/components/primitives/Button/types.d.ts
@@ -121,7 +121,7 @@ export interface IButtonGroupProps extends IStackProps {
     /**
      *
      */
-    children: JSX.Element | Array<JSX.Element>;
+    children: JSX.Element | Array<JSX.Element | false>;
     /**
      * The variant of the button style to use.
      * @default 'solid'
diff --git a/node_modules/native-base/src/components/primitives/Button/ButtonGroup.tsx b/node_modules/native-base/src/components/primitives/Button/ButtonGroup.tsx
index b2f2eb0..b7226c2 100644
--- a/node_modules/native-base/src/components/primitives/Button/ButtonGroup.tsx
+++ b/node_modules/native-base/src/components/primitives/Button/ButtonGroup.tsx
@@ -27,7 +27,10 @@ export default memo(
       if (Array.isArray(children)) {
         computedChildren = React.Children.map(
           children,
-          (child: JSX.Element, index: number) => {
+          (child: JSX.Element | false, index: number) => {
+            if (!child) {
+              return null
+            }
             return React.cloneElement(child, {
               key: `button-group-child-${index}`,
               variant,
diff --git a/node_modules/native-base/src/components/primitives/Button/types.ts b/node_modules/native-base/src/components/primitives/Button/types.ts
index 2aa215f..c7ee300 100644
--- a/node_modules/native-base/src/components/primitives/Button/types.ts
+++ b/node_modules/native-base/src/components/primitives/Button/types.ts
@@ -14,6 +14,7 @@ import type { ISpinnerProps } from '../Spinner/types';
 import type { IIconProps } from '../Icon';
 import type { InterfacePressableProps } from '../Pressable/types';
 import type { ColorSchemeType } from '../../../components/types';
+import React from 'react';
 
 // const myFunction = ({ a, b }) => {
 //   return { a: a, b: b };
@@ -145,7 +146,7 @@ export interface IButtonGroupProps extends IStackProps {
   /**
    *
    */
-  children: JSX.Element | Array<JSX.Element>;
+  children: JSX.Element | Array<JSX.Element | false>;
   /**
    * The variant of the button style to use.
    * @default 'solid'

Alternatives

No response

Additional Information

No response

[Krithikj20]

Hi @NoZiL, Thank you for reaching out to us. We will look into it.