From 91ad0c1bbec749ef9f4f78ca3690d286d171e513 Mon Sep 17 00:00:00 2001
From: Cyril <cyril.moreauu@gmail.com>
Date: Wed, 13 Mar 2024 03:16:41 +0000
Subject: [PATCH 1/2] adding badgeStyle props

---
 src/TabScreen.tsx      | 1 +
 src/TabsHeaderItem.tsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/TabScreen.tsx b/src/TabScreen.tsx
index 53171c2..b562c7c 100644
--- a/src/TabScreen.tsx
+++ b/src/TabScreen.tsx
@@ -6,6 +6,7 @@ export interface TabScreenProps {
   label: string;
   icon?: IconSource;
   badge?: string | number | boolean;
+  badgeStyle?: React.CSSProperties;
   children: any;
   onPress?: (event: GestureResponderEvent) => void;
   onPressIn?: (event: GestureResponderEvent) => void;
diff --git a/src/TabsHeaderItem.tsx b/src/TabsHeaderItem.tsx
index 7227c2d..85400f3 100644
--- a/src/TabsHeaderItem.tsx
+++ b/src/TabsHeaderItem.tsx
@@ -138,9 +138,9 @@ export default function TabsHeaderItem({
               ]}
             >
               {badgeWithoutContent ? (
-                <Badge visible={true} size={8} />
+                <Badge visible={true} size={8} style={tab.props.badgeStyle} />
               ) : (
-                <Badge visible={true} size={16}>
+                <Badge visible={true} size={16} style={tab.props.badgeStyle}>
                   {tab.props.badge as any}
                 </Badge>
               )}

From 0dd400bd80e8d55d9e622c2e3587137a31f03323 Mon Sep 17 00:00:00 2001
From: Cyril <cyril.moreauu@gmail.com>
Date: Wed, 13 Mar 2024 13:44:05 +0000
Subject: [PATCH 2/2]  update badgeStyle to badgeProps

---
 README.md              | 20 ++++++++++++++++++++
 src/TabScreen.tsx      | 13 +++++++++++--
 src/TabsHeaderItem.tsx | 24 +++++++++++++++---------
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 64c1672..4fb1741 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,8 @@ npm install react-native-paper-tabs react-native-pager-view
 ## Usage
 
 ```tsx
+import { useRef } from "react";
+import { StyleSheet } from "react-native"
 import {
   Button,
   Title,
@@ -71,6 +73,14 @@ import {
 } from 'react-native-paper-tabs';
 
 function Example() {
+    const badgeRef = useRef(null);
+    const myBadgeProps = {
+      style:styles.badge,
+      visible:false,
+      ref:badgeRef,
+      //theme:mytheme
+    }
+
     return (
       <TabsProvider
         defaultIndex={0}
@@ -100,6 +110,7 @@ function Example() {
             // badge={true} // only show indicator
             // badge="text"
             // badge={1}
+            // badgeProps={myBadgeProps}
             // onPressIn={() => {
             //   console.log('onPressIn explore');
             // }}
@@ -114,6 +125,15 @@ function Example() {
     )
 }
 
+
+const styles = StyleSheet.create({
+  badge: {
+    position: "absolute",
+    top: 4,
+    right: 0,
+    backgroundColor: "rgb(120, 69, 172)",
+  }
+});
 function ExploreWitHookExamples() {
   const goTo = useTabNavigation();
   const index = useTabIndex();
diff --git a/src/TabScreen.tsx b/src/TabScreen.tsx
index b562c7c..a78d472 100644
--- a/src/TabScreen.tsx
+++ b/src/TabScreen.tsx
@@ -1,12 +1,21 @@
 import * as React from 'react';
-import type { GestureResponderEvent } from 'react-native';
+import type { Animated, GestureResponderEvent } from 'react-native';
 import type { IconSource } from 'react-native-paper/lib/typescript/src/components/Icon';
+import type { ThemeProps } from 'react-native-paper/lib/typescript/src/types';
+import { StyleProp, TextStyle } from 'react-native';
+export interface BadgeProps {
+  visible?: boolean;
+  size?: number;
+  style?: StyleProp<TextStyle>;
+  ref?: React.RefObject<typeof Animated.Text>;
+  theme?:ThemeProps;
+}
 
 export interface TabScreenProps {
   label: string;
   icon?: IconSource;
   badge?: string | number | boolean;
-  badgeStyle?: React.CSSProperties;
+  badgeProps?: BadgeProps;
   children: any;
   onPress?: (event: GestureResponderEvent) => void;
   onPressIn?: (event: GestureResponderEvent) => void;
diff --git a/src/TabsHeaderItem.tsx b/src/TabsHeaderItem.tsx
index 85400f3..f90a0e4 100644
--- a/src/TabsHeaderItem.tsx
+++ b/src/TabsHeaderItem.tsx
@@ -71,8 +71,18 @@ export default function TabsHeaderItem({
 
   const badgeIsFilled =
     tab.props.badge !== undefined && tab.props.badge !== null;
-
   const badgeWithoutContent = typeof tab.props.badge === 'boolean';
+  const badgePropsIsFiiled = badgeIsFilled && 
+     tab.props.badgeProps !== undefined && tab.props.badgeProps !== null; // False if badge is not filled - badgeIsFilled==false
+  // check that badgeProps.visible is filled
+  const badgeVisibleIsFilled = badgePropsIsFiiled && tab.props.badgeProps?.visible !== undefined && tab.props.badgeProps?.visible !== null ;
+  const badgeVisible = badgeVisibleIsFilled ?  tab.props.badgeProps?.visible  : badgeIsFilled
+  const badgeRef = tab.props.badgeProps?.ref !== undefined  ? tab.props.badgeProps?.ref : undefined
+  const badgeSizeIsFiiled = badgePropsIsFiiled && (tab.props.badgeProps?.size !== undefined) && (tab.props.badgeProps?.size !== null) ; 
+  const badgeSize = badgeSizeIsFiiled ? tab.props.badgeProps?.size : badgeWithoutContent ? 8 : 16
+  const badgeTheme = tab.props.badgeProps?.theme
+  const badgeStyle = tab.props.badgeProps?.style 
+
 
   return (
     <View
@@ -136,14 +146,10 @@ export default function TabsHeaderItem({
                       : 0) - 2,
                 },
               ]}
-            >
-              {badgeWithoutContent ? (
-                <Badge visible={true} size={8} style={tab.props.badgeStyle} />
-              ) : (
-                <Badge visible={true} size={16} style={tab.props.badgeStyle}>
-                  {tab.props.badge as any}
-                </Badge>
-              )}
+            >              
+              <Badge visible={badgeVisible} theme={badgeTheme} ref={badgeRef as any} size={badgeSize} style={badgeStyle}  >
+                {tab.props.badge as any}
+              </Badge>
             </View>
           ) : null}
           {showTextLabel ? (