@boostdev/design-system-react-native 0.2.6 → 0.3.0

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

@@ -5,9 +5,13 @@ import { useTheme } from '../../../native/ThemeContext';
 
 type BannerVariant = 'info' | 'success' | 'warning' | 'error';
 
+/** Function form of children: receives the variant's resolved text color so
+ *  custom content can match the banner's theme. */
+type BannerContentRenderProp = (props: { color: string }) => ReactNode;
+
 interface NotificationBannerProps {
   variant?: BannerVariant;
-  children: ReactNode;
+  children: ReactNode | BannerContentRenderProp;
   action?: ReactNode;
   onDismiss?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -21,8 +25,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.m,
     gap: spacing.xs,
   },
-  content: {
+  body: {
     flex: 1,
+  },
+  content: {
     fontSize: font.size.bodyS,
     fontFamily: font.family.body,
     lineHeight: lineHeight.bodyS,
@@ -51,6 +57,7 @@ export function NotificationBanner({
   };
 
   const { bg, text, border: borderColor } = variantColors[variant];
+  const resolvedChildren = typeof children === 'function' ? children({ color: text }) : children;
 
   return (
     <View
@@ -58,7 +65,13 @@ export function NotificationBanner({
       accessibilityLiveRegion={isUrgent ? 'assertive' : 'polite'}
       style={[styles.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, style]}
     >
-      <Text style={[styles.content, { color: text }]}>{children}</Text>
+      <View style={styles.body}>
+        {typeof resolvedChildren === 'string' || typeof resolvedChildren === 'number' ? (
+          <Text style={[styles.content, { color: text }]}>{resolvedChildren}</Text>
+        ) : (
+          resolvedChildren
+        )}
+      </View>
       {action}
       {onDismiss && (
         <Pressable