adding badgeStyle props

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();

src/TabScreen.tsx

@@ -1,11 +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;
+  badgeProps?: BadgeProps;
   children: any;
   onPress?: (event: GestureResponderEvent) => void;
   onPressIn?: (event: GestureResponderEvent) => void;

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} />
-              ) : (
-                <Badge visible={true} size={16}>
-                  {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 ? (