import { useTheme } from '@react-navigation/native'; import color from 'color'; import * as React from 'react'; import { Animated, StyleProp, StyleSheet, TextStyle } from 'react-native'; type Props = { /** * Whether the badge is visible */ visible: boolean; /** * Content of the `Badge`. */ children?: string | number; /** * Size of the `Badge`. */ size?: number; /** * Style object for the tab bar container. */ style?: Animated.WithAnimatedValue>; }; export default function Badge({ children, style, visible = true, size = 18, ...rest }: Props) { const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0)); const [rendered, setRendered] = React.useState(visible); const theme = useTheme(); React.useEffect(() => { if (!rendered) { return; } Animated.timing(opacity, { toValue: visible ? 1 : 0, duration: 150, useNativeDriver: true, }).start(({ finished }) => { if (finished && !visible) { setRendered(false); } }); return () => opacity.stopAnimation(); }, [opacity, rendered, visible]); if (!rendered) { if (visible) { setRendered(true); } else { return null; } } // @ts-expect-error: backgroundColor definitely exists const { backgroundColor = theme.colors.notification, ...restStyle } = StyleSheet.flatten(style) || {}; const textColor = color(backgroundColor).isLight() ? 'black' : 'white'; const borderRadius = size / 2; const fontSize = Math.floor((size * 3) / 4); return ( {children} ); } const styles = StyleSheet.create({ container: { alignSelf: 'flex-end', textAlign: 'center', paddingHorizontal: 4, overflow: 'hidden', }, });