@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

package/build/utils/themeValueHelpers.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export declare const camelCaseToPath: (camelCased: string) => string[];
+/**
+ * Helper function to get nested value from object using path array
+ */
+export declare const getNestedValue: (obj: any, path: string[]) => any;
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export declare const resolveThemeValue: (value: any, themeMapping: any) => any;

package/build/utils/themeValueHelpers.js

@@ -0,0 +1,54 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export const camelCaseToPath = (camelCased) => {
+    // Split on uppercase letters but keep them
+    const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
+    return parts;
+};
+/**
+ * Helper function to get nested value from object using path array
+ */
+export const getNestedValue = (obj, path) => {
+    return path.reduce((current, key) => {
+        return current && typeof current === 'object' ? current[key] : undefined;
+    }, obj);
+};
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export const resolveThemeValue = (value, themeMapping) => {
+    if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
+        return value;
+    }
+    // First, try direct lookup for simple values
+    if (themeMapping[value] !== undefined) {
+        return themeMapping[value];
+    }
+    // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
+    if (/^[a-z][a-zA-Z]*$/.test(value)) {
+        // Only camelCase strings without numbers
+        const path = camelCaseToPath(value);
+        const nestedValue = getNestedValue(themeMapping, path);
+        if (nestedValue !== undefined) {
+            return nestedValue;
+        }
+    }
+    // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
+    const shadeMatch = value.match(/\d+$/);
+    if (shadeMatch) {
+        const shade = shadeMatch[0];
+        const base = value.slice(0, -shade.length);
+        const nested = themeMapping[base];
+        if (nested && typeof nested === 'object') {
+            return nested[shade] ?? value;
+        }
+    }
+    // If none of the approaches work, return the original value
+    return value;
+};

package/docs/components/AllComponents.web.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
+  BellMediumIcon,
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
   ChevronRightMediumIcon,
@@ -24,6 +25,8 @@ import {
   Box,
   Button,
   Card,
+  Carousel,
+  CarouselItem,
   Center,
   Checkbox,
   CurrencyInput,
@@ -41,6 +44,7 @@ import {
   Icon,
   IconButton,
   IconContainer,
+  IndicatorIconButton,
   InlineLink,
   Input,
   LI,
@@ -49,6 +53,8 @@ import {
   ListItem,
   Modal,
   OL,
+  ProgressStepper,
+  ProgressStep,
   Radio,
   RadioCard,
   RadioCardGroup,
@@ -214,12 +220,63 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Card" link="/?path=/docs/components-card--docs">
             <Center flex={1}>
-              <Card colorScheme="white">
+              <Card colorScheme="neutralStrong">
                 <Heading>I am a card</Heading>
                 <BodyText>And do card stuff.</BodyText>
               </Card>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Carousel" link="/?path=/docs/components-carousel--docs">
+            <Center flex={1}>
+              <Carousel itemWidth={150} centered width={150}>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="blue700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm a carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="purple700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm another carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="green700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm also a carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+              </Carousel>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Center" link="/?path=/docs/primitives-center--docs">
             <Center flex={1}>
               <Center backgroundColor="red400" padding="300" width={200} height={100}>
@@ -330,6 +387,14 @@ const AllComponents: React.FC = () => {
               <Heading>This is a Heading</Heading>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Indicator Icon Button"
+            link="/?path=/docs/components-indicator-icon-button--docs"
+          >
+            <Center flex={1}>
+              <IndicatorIconButton icon={BellMediumIcon} onPress={() => null} indicator={true} />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Icon Button" link="/?path=/docs/components-icon-button--docs">
             <Center flex={1}>
               <IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
@@ -410,8 +475,8 @@ const AllComponents: React.FC = () => {
           <ComponentWrapper name="List" link="/?path=/docs/components-list--docs">
             <Center flex={1} p="300">
               <List>
-                <ListItem text="List Item 1" divider onPress={() => console.log('item pressed')} />
-                <ListItem text="List Item 2" onPress={() => console.log('item pressed')} />
+                <ListItem heading="List Item 1" onPress={() => console.log('item pressed')} />
+                <ListItem heading="List Item 2" onPress={() => console.log('item pressed')} />
               </List>
             </Center>
           </ComponentWrapper>
@@ -445,6 +510,19 @@ const AllComponents: React.FC = () => {
               </OL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Progress Stepper"
+            link="/?path=/docs/components-progress-stepper--docs"
+          >
+            <Center flex={1}>
+              <ProgressStepper>
+                <ProgressStep id="customer-data" state="complete" />
+                <ProgressStep id="shipping-data" state="complete" />
+                <ProgressStep id="payment-data" state="active" />
+                <ProgressStep id="summary" state="incomplete" />
+              </ProgressStepper>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Radio" link="/?path=/docs/forms-radio--docs">
             <Center flex={1}>
               <RadioGroup>
@@ -469,7 +547,11 @@ const AllComponents: React.FC = () => {
             link="/?path=/docs/components-section-header--docs"
           >
             <Center flex={1} p="300">
-              <SectionHeader heading="Heading" helperText="Supporting text" linkText="More" />
+              <SectionHeader
+                heading="Heading"
+                helperText="Supporting text"
+                trailingContent={<Link href="#">More</Link>}
+              />
             </Center>
           </ComponentWrapper>
           <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">

package/docs/components/BadgeList.tsx

@@ -1,64 +1,28 @@
-import {
-  Badge,
-  BadgeText,
-  Box,
-  Flex,
-  List,
-  ListItem,
-  ListItemContent,
-  ListItemHelperText,
-  ListItemIcon,
-  ListItemLeadingContent,
-  ListItemText,
-  ListItemTrailingContent,
-  ListItemTrailingIcon,
-} from '../../src';
+import { IconContainer, List, ListItem } from '../../src';
 
-import {
-  ChevronRightMediumIcon,
-  ElectricityMediumIcon,
-  GasMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
+import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const BadgeList = () => {
   return (
     <List>
-      <ListItem onPress={() => console.log('pressed')} divider>
-        <ListItemLeadingContent>
-          <Box padding="300" borderRadius="lg" bg="energyBlue300">
-            <ListItemIcon as={ElectricityMediumIcon} color="energyBlue600" />
-          </Box>
-        </ListItemLeadingContent>
-        <ListItemContent>
-          <ListItemText>Electricity</ListItemText>
-          <Badge colorScheme="info">
-            <BadgeText>Text</BadgeText>
-          </Badge>
-          <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
-        </ListItemContent>
-        <ListItemTrailingContent>
-          <ListItemTrailingIcon as={ChevronRightMediumIcon} />
-        </ListItemTrailingContent>
-      </ListItem>
-      <ListItem onPress={() => console.log('pressed')} divider={false}>
-        <ListItemLeadingContent>
-          <Box padding="300" borderRadius="lg" bg="energyBlue300">
-            <ListItemIcon as={GasMediumIcon} color="energyBlue600" />
-          </Box>
-        </ListItemLeadingContent>
-        <ListItemContent>
-          <Flex direction="row" style={{ justifyContent: 'space-between' }}>
-            <ListItemText>Gas</ListItemText>
-            <Badge colorScheme="positive">
-              <BadgeText>Smart meter</BadgeText>
-            </Badge>
-          </Flex>
-          <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
-        </ListItemContent>
-        <ListItemTrailingContent>
-          <ListItemTrailingIcon as={ChevronRightMediumIcon} />
-        </ListItemTrailingContent>
-      </ListItem>
+      <ListItem
+        heading="Electricity"
+        helperText="Last reading 23/03/24"
+        onPress={() => console.log('pressed')}
+        leadingContent={
+          <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
+        }
+        badge={{ text: 'Text' }}
+      />
+      <ListItem
+        heading="Gas"
+        helperText="Last reading 23/03/24"
+        onPress={() => console.log('pressed')}
+        leadingContent={
+          <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
+        }
+        badge={{ text: 'Smart Meter' }}
+      />
     </List>
   );
 };

package/docs/components/SwitchList.tsx

@@ -16,9 +16,8 @@ const SwitchList = () => {
   return (
     <List container="subtleWhite">
       <ListItem
-        text="Notifications"
+        heading="Notifications"
         helperText="Allow notifications"
-        divider
         leadingContent={<ListItemIcon as={BellMediumIcon} />}
         trailingContent={
           <Switch value={notifications} onValueChange={setNotifications} size="small" />
@@ -26,25 +25,22 @@ const SwitchList = () => {
         onPress={() => setNotifications(!notifications)}
       />
       <ListItem
-        text="Secure ID"
+        heading="Secure ID"
         helperText="Use secure ID"
-        divider
         leadingContent={<ListItemIcon as={LockMediumIcon} />}
         trailingContent={<Switch value={secureId} onValueChange={setSecureId} size="small" />}
         onPress={() => setSecureId(!secureId)}
       />
       <ListItem
-        text="Location"
+        heading="Location"
         helperText="Allow location"
-        divider
         leadingContent={<ListItemIcon as={LocationMediumIcon} />}
         trailingContent={<Switch value={location} onValueChange={setLocation} size="small" />}
         onPress={() => setLocation(!location)}
       />
       <ListItem
-        text="Dark mode"
+        heading="Dark mode"
         helperText="Enable dark mode"
-        divider
         leadingContent={<ListItemIcon as={EyeMediumIcon} />}
         trailingContent={<Switch value={darkMode} onValueChange={setDarkMode} size="small" />}
         onPress={() => setDarkMode(!darkMode)}

package/docs/getting-started.mdx

@@ -7,15 +7,27 @@ import { BackToTopButton, NextPrevPage } from './components';
 # Getting Started
 
 You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
+Although there are a few components that require a `BottomSheetModalProvider` to be wrapped around your app.
+You should also make sure you're app is wrapped in a `GestureHandlerRootView` from `react-native-gesture-handler`.
 
 ```tsx
-import { Box, Alert, BodyText } from '@utilitywarehouse/hearth-react-native';
+import {
+  Box,
+  Alert,
+  BodyText,
+  BottomSheetModalProvider,
+} from '@utilitywarehouse/hearth-react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const App: React.FC = () => (
-  <Box p="200">
-    <Alert variant="info" text="Welcome to Hearth React Native!" />
-    <BodyText>Start building your app with Hearth React Native components.</BodyText>
-  </Box>
+  <GestureHandlerRootView>
+    <BottomSheetModalProvider>
+      <Box p="200">
+        <Alert colorScheme="positive" text="Welcome to Hearth React Native!" />
+        <BodyText>Start building your app with Hearth React Native components.</BodyText>
+      </Box>
+    </BottomSheetModalProvider>
+  </GestureHandlerRootView>
 );
 ```
 
@@ -25,19 +37,31 @@ By default the light colour mode is enabled. If you want to enable dark mode, yo
 use the `useColorMode` hook to toggle between light and dark modes.
 
 ```tsx
-import { useColorMode, Box, Alert, BodyText, Button } from '@utilitywarehouse/hearth-react-native';
+import {
+  useColorMode,
+  Box,
+  Alert,
+  BodyText,
+  Button,
+  BottomSheetModalProvider,
+} from '@utilitywarehouse/hearth-react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const App: React.FC = () => {
   const [colorMode, setColorMode] = useColorMode();
 
   return (
-    <Box p="200">
-      <Alert variant="info" text="Welcome to Hearth React Native!" />
-      <BodyText>Start building your app with Hearth React Native components.</BodyText>
-      <Button onPress={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
-        Toggle Color Mode
-      </Button>
-    </Box>
+    <GestureHandlerRootView>
+      <BottomSheetModalProvider>
+        <Box p="200">
+          <Alert colorScheme="positive" text="Welcome to Hearth React Native!" />
+          <BodyText>Start building your app with Hearth React Native components.</BodyText>
+          <Button onPress={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
+            Toggle Color Mode
+          </Button>
+        </Box>
+      </BottomSheetModalProvider>
+    </GestureHandlerRootView>
   );
 };
 ```

package/docs/introduction.mdx

@@ -23,8 +23,11 @@ Hearth React Native is a comprehensive design system library for React Native, p
 
 - [Installation](#installation)
 - [Additional packages](#additional-packages)
+- [Fonts](#fonts)
+  - [iOS Setup](#ios-setup)
   - [Linking the fonts to be used in your project](#linking-the-fonts-to-be-used-in-your-project)
-    - [Using Expo](#using-expo)
+  - [Android Setup](#android-setup)
+  - [Using Expo](#using-expo)
 - [Babel configuration](#babel-configuration)
 - [Jest configuration](#jest-configuration)
 
@@ -39,7 +42,7 @@ npm install @utilitywarehouse/hearth-react-native
 To install the peer dependencies, you can run the following command:
 
 ```console
-npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler @utilitywarehouse/hearth-react-native-icons
+npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler @utilitywarehouse/hearth-react-native-icons
 ```
 
 For more information on how to install and configure `react-native-svg`, `react-native-gesture-handler` and `react-native-reanimated`,
@@ -66,6 +69,8 @@ as well as fonts and icons. Feel free to additionally install these packages if
 npm install @utilitywarehouse/hearth-tokens
 ```
 
+## Fonts
+
 You will need to include the **Comic Hams**, **DM Mono** and **DM Sans** fonts.
 The easiest way to do this is to use the `@utilitywarehouse/hearth-fonts` package.
 
@@ -73,6 +78,14 @@ The easiest way to do this is to use the `@utilitywarehouse/hearth-fonts` packag
 npm install @utilitywarehouse/hearth-fonts
 ```
 
+### iOS Setup
+
+For iOS, copy the font files to your project's assets folder:
+
+```console
+mkdir -p src/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/ttf/* src/assets/fonts/
+```
+
 Next, create or update your `react-native.config.js` file in the root directory and paste the code below inside it:
 
 ```js
@@ -81,7 +94,7 @@ module.exports = {
     ios: {},
     android: {},
   },
-  assets: ['./node_modules/@utilitywarehouse/hearth-fornts/files/ttf'],
+  assets: ['./src/assets/fonts/'],
 };
 ```
 
@@ -93,7 +106,36 @@ Now we need to link them so we'll be able to use them in any files inside the pr
 npx react-native-asset
 ```
 
-#### Using Expo
+### Android Setup
+
+For Android, you need to copy the fonts to two locations:
+
+1. Copy TTF files to the assets folder:
+
+```console
+mkdir -p android/app/src/main/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/ttf/* android/app/src/main/assets/fonts/
+```
+
+2. Copy XML font family definitions to the resources folder:
+
+```console
+mkdir -p android/app/src/main/res/font && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/xml/* android/app/src/main/res/font/
+```
+
+3. Update your `android/app/src/main/java/com/{yourapp}/MainApplication.kt` file to register the custom fonts:
+
+```kotlin
+import com.facebook.react.views.text.ReactFontManager;
+
+// ... inside your onCreate() or initialization method:
+ReactFontManager.getInstance().addCustomFont(this, "DM Sans", R.font.dm_sans)
+ReactFontManager.getInstance().addCustomFont(this, "DM Mono", R.font.dm_mono)
+ReactFontManager.getInstance().addCustomFont(this, "Comic Hams", R.font.comic_hams)
+```
+
+This approach ensures fonts work consistently across platforms with a single canonical name, as described in [this article](https://ospfranco.com/post/2023/08/11/react-native,-how-to-set-up-fonts-with-a-single-canonical-name/).
+
+### Using Expo
 
 If you are using Expo, you can use the `expo-font` and [`expo-xml-font`](https://github.com/Armster15/expo-xml-font) packages to load the fonts.
 Here is an example of how to load the fonts in your `App.tsx` file:
@@ -131,7 +173,7 @@ You will need to add the following Babel plugin to your `babel.config.js` file:
 const unistylesPluginOptions = {
   autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
   autoProcessPaths: ['@utilitywarehouse/hearth-react-native'],
-  autoProcessRoot: 'src', // Adjust this to your project's structure
+  root: 'src', // Adjust this to your project's structure
   debug: false, // Set to true for debugging purposes
 };
 
@@ -152,7 +194,10 @@ If you are using Jest for testing, you will need to add the following configurat
 ```js
 module.exports = {
   // other Jest configurations...
-  setupFiles: ['react-native-unistyles/mocks'],
+  setupFiles: [
+    'react-native-unistyles/mocks',
+    './node_modules/react-native-gesture-handler/jestSetup.js',
+  ],
   // other Jest configurations...
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -37,7 +37,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
     "eslint-plugin-storybook": "9.1.6",
-    "playwright": "^1.53.1",
+    "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-native": "0.80.0",
@@ -53,14 +53,14 @@
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.3",
-    "@utilitywarehouse/hearth-react-icons": "^0.5.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.5.0",
-    "@utilitywarehouse/hearth-tokens": "^0.1.1"
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.0",
+    "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@utilitywarehouse/hearth-react-native-icons": "0.4.0",
+    "@utilitywarehouse/hearth-react-native-icons": "0.6.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "^2.22.0",

package/src/components/Alert/AlertTitle.tsx

@@ -1,15 +1,15 @@
 import type { TextProps, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 import { useAlertContext } from './Alert.context';
 
 const AlertTitle = ({ children, style, ...props }: TextProps) => {
   const { colorScheme } = useAlertContext();
   styles.useVariants({ colorScheme });
   return (
-    <DetailText size="md" style={[styles.title as TextStyle, style]} {...props}>
+    <BodyText size="md" weight="semibold" style={[styles.title as TextStyle, style]} {...props}>
       {children}
-    </DetailText>
+    </BodyText>
   );
 };
 
@@ -18,16 +18,16 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       colorScheme: {
         info: {
-          color: theme.color.feedback.info.foreground,
+          color: theme.color.feedback.info.foreground.default,
         },
         positive: {
-          color: theme.color.feedback.positive.foreground,
+          color: theme.color.feedback.positive.foreground.default,
         },
         danger: {
-          color: theme.color.feedback.danger.foreground,
+          color: theme.color.feedback.danger.foreground.default,
         },
         warning: {
-          color: theme.color.feedback.warning.foreground,
+          color: theme.color.feedback.warning.foreground.default,
         },
       },
     },

package/src/components/Badge/Badge.props.ts

@@ -19,6 +19,7 @@ interface BadgeProps extends ViewProps {
   size?: 'sm' | 'md';
   icon?: ComponentType;
   flatBase?: boolean;
+  text?: string | number;
 }
 
 export default BadgeProps;

package/src/components/Badge/Badge.tsx

@@ -14,6 +14,7 @@ const Badge = ({ children, ...props }: BadgeProps) => {
     flatBase = false,
     size = 'sm',
     style,
+    text,
     ...rest
   } = props;
 
@@ -22,7 +23,7 @@ const Badge = ({ children, ...props }: BadgeProps) => {
     [colorScheme, flatBase, variant, size]
   );
 
-  const childIsText = typeof children === 'string' || typeof children === 'number';
+  const childIsText = typeof children === 'string' || typeof children === 'number' || !!text;
 
   styles.useVariants({ colorScheme, flatBase, variant, size });
 
@@ -30,7 +31,7 @@ const Badge = ({ children, ...props }: BadgeProps) => {
     <BadgeContext.Provider value={value}>
       <View {...rest} style={[styles.container, style]}>
         {!!icon && <BadgeIcon as={icon} />}
-        {childIsText ? <BadgeText>{children}</BadgeText> : children}
+        {childIsText ? <BadgeText>{text ?? children}</BadgeText> : children}
       </View>
     </BadgeContext.Provider>
   );