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 ( { // 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 53171c2..a78d472 100644 --- a/src/TabScreen.tsx +++ b/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; + ref?: React.RefObject; + 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; diff --git a/src/TabsHeaderItem.tsx b/src/TabsHeaderItem.tsx index 7227c2d..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 ( - {badgeWithoutContent ? ( - - ) : ( - - {tab.props.badge as any} - - )} + > + + {tab.props.badge as any} + ) : null} {showTextLabel ? (