Merge branch 'badge' into 'main'

Badge

See merge request react-native/react-native-material-components!15

Author: computools-anastasiia-nahaiska

README.md

@@ -212,6 +212,19 @@ export const AppBodyLargeText: React.FC<PropsWithChildren> = ({children}) => {
 ![linear activity indicator gif](https://ik.imagekit.io/Computools/rn-material-components/linear-indicator-gif.gif?updatedAt=1705066319092)
 </details>
 </details>
+<details><summary>Badge</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| value | required | string | - |
+| valueStyle | - | TextStyle | - |
+
+![badge light theme](https://ik.imagekit.io/Computools/rn-material-components/badge_light.png?updatedAt=1733926687727)
+![badge dark theme](https://ik.imagekit.io/Computools/rn-material-components/badge_dark.png?updatedAt=1733926687741)
+</details>
 <details><summary>Buttons</summary>
 <br />
 <details><summary>Common buttons</summary>

src/badge/Badge.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {View, Text, type ViewProps, type StyleProp, type TextStyle} from 'react-native';
+
+import {styles} from './badge.styles';
+import {useTheme} from '../theme/useTheme.hook';
+import {useTypography} from '../typography/useTypography.component';
+
+export interface BadgeProps extends ViewProps {
+  value: string;
+
+  valueStyle?: StyleProp<TextStyle>;
+}
+
+export const Badge: React.FC<BadgeProps> = ({value, style, valueStyle, ...props}) => {
+  const {error} = useTheme();
+  const {labelSmall} = useTypography();
+
+  return (
+    <View style={[styles.container, {backgroundColor: error.background}, style]} {...props}>
+      <Text style={[labelSmall, {color: error.text}, valueStyle]}>{value}</Text>
+    </View>
+  );
+};

src/badge/badge.styles.ts

@@ -0,0 +1,13 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    paddingHorizontal: 4,
+    minWidth: 16,
+    height: 16,
+    borderRadius: 100,
+  },
+});

src/index.tsx

@@ -1,3 +1,5 @@
+export {Badge, type BadgeProps} from './badge/Badge.component';
+
 export {Divider, type DividerProps} from './divider/Divider.component';
 
 export {BottomSheet, type BottomSheetProps, type BottomSheetRef} from './sheets/bottom-sheet/BottomSheet.component';