@retray-dev/ui-kit 6.2.0 → 7.0.1

package/src/components/Sheet/Sheet.tsx

@@ -25,6 +25,21 @@ export { BottomSheetModalProvider }
 // Re-export BottomSheetTextInput as SheetTextInput for consumer convenience
 export { BottomSheetTextInput as SheetTextInput }
 
+export interface SheetHeaderProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface SheetContentProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface SheetFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
 export interface SheetProps {
   open: boolean
   onClose: () => void
@@ -80,6 +95,23 @@ export interface SheetProps {
   snapPoints?: (string | number)[]
 }
 
+export function SheetHeader({ children, style }: SheetHeaderProps) {
+  return <View style={[styles.header, style]}>{children}</View>
+}
+
+export function SheetContent({ children, style }: SheetContentProps) {
+  return <View style={[styles.sheetContent, style]}>{children}</View>
+}
+
+export function SheetFooter({ children, style }: SheetFooterProps) {
+  const { colors } = useTheme()
+  return (
+    <View style={[styles.sheetFooter, { backgroundColor: colors.card, borderTopColor: colors.border }, style]}>
+      {children}
+    </View>
+  )
+}
+
 export function Sheet({
   open,
   onClose,
@@ -125,20 +157,25 @@ export function Sheet({
     />
   ), [])
 
-  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
-    if (!footer) return null
-    return (
-      <BottomSheetFooter {...props}>
-        {footer}
-      </BottomSheetFooter>
-    )
-  }, [footer])
+  // Detect compound components in children
+  const childArray = React.Children.toArray(children)
+  const customHeader = childArray.find((child) => React.isValidElement(child) && child.type === SheetHeader)
+  const customContent = childArray.find((child) => React.isValidElement(child) && child.type === SheetContent)
+  const customFooter = childArray.find((child) => React.isValidElement(child) && child.type === SheetFooter)
+  
+  // If using compound components, filter them out from main children
+  const filteredChildren = customHeader || customContent || customFooter
+    ? childArray.filter(
+        (child) =>
+          !React.isValidElement(child) ||
+          (child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter)
+      )
+    : children
 
   const effectiveSubtitle = subtitle ?? description
+  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader
 
-  const showHeader = !!(title || effectiveSubtitle || showCloseButton)
-
-  const headerNode = showHeader ? (
+  const headerNode = customHeader ? customHeader : (showHeader ? (
     <View style={styles.header} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
@@ -166,7 +203,19 @@ export function Sheet({
         </Text>
       ) : null}
     </View>
-  ) : null
+  ) : null)
+
+  const contentNode = customContent ? customContent : filteredChildren
+  const effectiveFooter = customFooter ? customFooter : footer
+
+  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
+    if (!effectiveFooter) return null
+    return (
+      <BottomSheetFooter {...props}>
+        {effectiveFooter}
+      </BottomSheetFooter>
+    )
+  }, [effectiveFooter])
 
   const useScroll = scrollable || !!maxHeight
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT
@@ -182,7 +231,7 @@ export function Sheet({
       maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
       onDismiss={onClose}
       backdropComponent={renderBackdrop}
-      footerComponent={footer ? renderFooter : undefined}
+      footerComponent={effectiveFooter ? renderFooter : undefined}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
@@ -204,18 +253,22 @@ export function Sheet({
           persistentScrollbar={isAndroid}
         >
           {headerNode}
-          {children}
+          {contentNode}
         </BottomSheetScrollView>
       ) : (
         <BottomSheetView style={[styles.content, contentStyle, style]}>
           {headerNode}
-          {children}
+          {contentNode}
         </BottomSheetView>
       )}
     </BottomSheetModal>
   )
 }
 
+Sheet.Header = SheetHeader
+Sheet.Content = SheetContent
+Sheet.Footer = SheetFooter
+
 const styles = StyleSheet.create({
   background: {
     borderTopLeftRadius: ms(16),
@@ -238,12 +291,12 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(18),
     flex: 1,
   },
   subtitle: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },
@@ -260,4 +313,15 @@ const styles = StyleSheet.create({
     paddingBottom: vs(32),
     paddingRight: s(16),
   },
+  sheetContent: {
+    gap: vs(16),
+  },
+  sheetFooter: {
+    paddingHorizontal: s(16),
+    paddingVertical: vs(16),
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    gap: s(12),
+  },
 })
+

package/src/components/Skeleton/Skeleton.tsx

@@ -74,7 +74,7 @@ export function Skeleton({
     <View
       style={[
         styles.base,
-        { width: resolvedWidth as any, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        { width: resolvedWidth as number | `${number}%`, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
         style,
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}

package/src/components/Slider/Slider.tsx

@@ -101,11 +101,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(15),
   },
   valueText: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   slider: {

package/src/components/Spinner/Spinner.tsx

@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     gap: vs(6),
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     lineHeight: mvs(18),
   },
 })

package/src/components/Switch/Switch.tsx

@@ -13,12 +13,12 @@ import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
 import { SPRINGS, TIMINGS, EASINGS } from '../../utils/animations'
 
-const TRACK_WIDTH = s(52)
+const TRACK_WIDTH  = s(52)
 const TRACK_HEIGHT = s(30)
-const THUMB_SIZE = s(24)
+const THUMB_SIZE   = s(24)
 const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
-const ICON_SIZE = s(13)
+const ICON_SIZE    = s(13)
 
 export interface SwitchProps {
   checked?: boolean
@@ -31,7 +31,6 @@ export interface SwitchProps {
 export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
   const { colors } = useTheme()
 
-  // Single 0→1 progress drives thumb position, track color, and icon crossfade — all UI thread.
   const progress = useSharedValue(checked ? 1 : 0)
 
   useEffect(() => {
@@ -50,6 +49,19 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
     ),
   }))
 
+  // AUDIT FIX: the off-state track used surfaceStrong (~#ebebeb in light mode)
+  // with no border — nearly invisible on white page/card surfaces. A 1.5px border
+  // that fades out as the track fills gives the off state clear visual definition
+  // without adding visual weight to the on state.
+  const trackBorderStyle = useAnimatedStyle(() => ({
+    borderWidth: 1.5,
+    borderColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.border, 'transparent'],
+    ),
+  }))
+
   const checkIconStyle = useAnimatedStyle(() => ({
     opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
   }))
@@ -59,7 +71,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
   }))
 
   return (
-    <View style={[{ opacity: disabled ? 0.45 : 1 }, style]}>
+    <View style={[{ opacity: disabled ? 0.45 : 1, alignSelf: 'flex-start' }, style]}>
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
@@ -71,8 +83,10 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
         accessibilityState={{ checked, disabled: !!disabled }}
+        style={styles.touchable}
       >
         <Animated.View style={[styles.track, trackStyle]}>
+          <Animated.View style={[styles.trackBorder, trackBorderStyle]} pointerEvents="none" />
           <Animated.View
             style={[styles.thumb, { backgroundColor: colors.primaryForeground }, thumbStyle]}
           >
@@ -90,11 +104,18 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
 }
 
 const styles = StyleSheet.create({
+  touchable: {
+    alignSelf: 'flex-start',
+  },
   track: {
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     borderRadius: TRACK_HEIGHT / 2,
   },
+  trackBorder: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: TRACK_HEIGHT / 2,
+  },
   thumb: {
     position: 'absolute',
     top: THUMB_OFFSET,
@@ -112,5 +133,7 @@ const styles = StyleSheet.create({
   },
   iconWrapper: {
     position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 })

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect, useCallback } from 'react'
 import { View, TouchableOpacity, Text, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
 import Animated, {
   useSharedValue,
@@ -17,8 +17,6 @@ export interface TabItem {
   icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
-// pill: animated sliding pill background (default)
-// underline: 2px bottom border on active tab — Airbnb product-tab style
 export type TabsVariant = 'pill' | 'underline'
 
 export interface TabsProps {
@@ -76,13 +74,16 @@ function TabTrigger({
       <Animated.View style={animatedStyle}>
         <View style={styles.triggerInner}>
           {tab.icon ? (
-            (typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode
+            typeof tab.icon === 'function' ? tab.icon(isActive) : tab.icon
           ) : null}
           <Text
             style={[
               styles.triggerLabel,
+              // AUDIT FIX: active state now only changes color, never font metrics.
+              // Previously: inactive=Regular, active=Medium (pill) or SemiBold+fontSize14 (underline)
+              // The weight/size change caused measurable layout reflow every tab switch.
+              // Solution: all labels render at SemiBold always; active = foreground, inactive = foregroundMuted.
               { color: isActive ? colors.foreground : colors.foregroundMuted },
-              isActive && (isUnderline ? styles.activeTriggerLabelUnderline : styles.activeTriggerLabel),
             ]}
             allowFontScaling={true}
           >
@@ -100,26 +101,27 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
   const active = value ?? internal
 
   const tabLayouts = useRef<Record<string, { x: number; width: number }>>({})
-  // Shared values drive the pill position on the UI thread — no JS bridge cost on slide.
   const pillX = useSharedValue(0)
   const pillWidth = useSharedValue(0)
   const initialised = useRef(false)
 
-  const animatePill = (tabValue: string, animate: boolean) => {
+  const animatePill = useCallback((tabValue: string, animate: boolean) => {
     const layout = tabLayouts.current[tabValue]
     if (!layout) return
     if (animate) {
+      // eslint-disable-next-line react-hooks/immutability
       pillX.value = withSpring(layout.x, SPRINGS.glide)
+      // eslint-disable-next-line react-hooks/immutability
       pillWidth.value = withSpring(layout.width, SPRINGS.glide)
     } else {
       pillX.value = layout.x
       pillWidth.value = layout.width
     }
-  }
+  }, [pillX, pillWidth])
 
   useEffect(() => {
     if (initialised.current) animatePill(active, true)
-  }, [active])
+  }, [active, animatePill])
 
   const handlePress = (v: string) => {
     hapticSelection()
@@ -136,7 +138,9 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
     <View style={style}>
       <View
         style={[
-          variant === 'pill' ? [styles.list, { backgroundColor: colors.surface }] : styles.listUnderline,
+          variant === 'pill'
+            ? [styles.list, { backgroundColor: colors.surface }]
+            : styles.listUnderline,
         ]}
         accessibilityRole="tablist"
       >
@@ -198,6 +202,8 @@ const styles = StyleSheet.create({
   },
   listUnderline: {
     flexDirection: 'row',
+    // AUDIT FIX: was missing borderBottomColor — the 1px hairline would render
+    // as transparent on some platforms. Explicit token reference ensures visibility.
     borderBottomWidth: 1,
   },
   pill: {},
@@ -224,15 +230,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     gap: s(4),
   },
+  // AUDIT FIX: was Sohne-Regular at rest, Sohne-Medium/SemiBold when active.
+  // Font-weight changes at runtime cause advance-width shifts → the tab bar would
+  // visibly jump/reflow on every selection. Now always SemiBold; active state
+  // is communicated by color alone (foreground vs foregroundMuted). The pill
+  // indicator provides additional active signal without text layout side-effects.
   triggerLabel: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(13),
   },
-  activeTriggerLabel: {
-    fontFamily: 'Poppins-Medium',
-  },
-  activeTriggerLabelUnderline: {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: ms(14),
-  },
 })

package/src/components/Text/Text.tsx

@@ -67,7 +67,7 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'button-sm':    'foreground',
 }
 
-export function Text({ variant = 'body-md', color, style, children, ...props }: TextProps) {
+function TextBase({ variant = 'body-md', color, style, children, ...props }: TextProps) {
   const { colors } = useTheme()
 
   const colorKey = defaultColorVariant[variant] ?? 'foreground'
@@ -83,3 +83,5 @@ export function Text({ variant = 'body-md', color, style, children, ...props }:
     </RNText>
   )
 }
+
+export const Text = React.memo(TextBase)

package/src/components/Textarea/Textarea.tsx

@@ -3,6 +3,7 @@ import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform
 import Animated, {
   useAnimatedStyle,
   interpolateColor,
+  interpolate,
 } from 'react-native-reanimated'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
@@ -10,26 +11,19 @@ import { renderIcon } from '../../utils/icons'
 import { useColorTransition } from '../../utils/useColorTransition'
 import { TIMINGS } from '../../utils/animations'
 
-const webInputResetStyle: any =
+const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
     ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
     : {}
 
 export interface TextareaProps extends TextInputProps {
   label?: string
-  /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
-  /** Helper text shown below the textarea when there is no error. */
   hint?: string
-  /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
   rows?: number
-  /** Icon name from @expo/vector-icons rendered inside top-left corner. */
   prefixIcon?: string
-  /** Custom icon node rendered top-left. */
   prefixIconNode?: React.ReactNode
-  /** Override prefix icon color. Defaults to foregroundMuted. */
   prefixIconColor?: string
-  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
   containerStyle?: ViewStyle
 }
 
@@ -58,10 +52,15 @@ export function Textarea({
     ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted)
     : prefixIconNode
 
-  const borderColorStyle = useAnimatedStyle(() => ({
+  // Border drawn on an absolute overlay (mirrors Input.tsx) so the 1px→2px
+  // focus weight change never resizes the box / reflows content.
+  const borderAnimStyle = useAnimatedStyle(() => ({
     borderColor: error
       ? colors.destructive
       : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error
+      ? 2
+      : interpolate(focusProgress.value, [0, 1], [1, 2]),
   }))
 
   return (
@@ -71,9 +70,9 @@ export function Textarea({
         style={[
           styles.inputWrapper,
           { backgroundColor: colors.background },
-          borderColorStyle,
         ]}
       >
+        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
         {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
         <TextInput
           multiline
@@ -123,32 +122,37 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
     lineHeight: vs(18),
     marginBottom: vs(2),
   },
   inputWrapper: {
-    borderWidth: 2,
+    // Border lives on borderOverlay (absolute); wrapper carries none so the
+    // focus weight change never reflows content.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     gap: s(8),
   },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8,
+  },
   prefixIcon: {
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
     paddingTop: vs(2),
   },
   input: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: vs(22),
     padding: 0,
     margin: 0,
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
     lineHeight: vs(16),
     marginTop: vs(4),

package/src/components/Toast/Toast.tsx

@@ -4,10 +4,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 
-// Direct function API — no hook required
 export { sonnerToast as toast }
 
-// useToast — backward-compat wrapper
 export function useToast() {
   return {
     toast: sonnerToast,
@@ -15,7 +13,6 @@ export function useToast() {
   }
 }
 
-// ToastProvider — wraps children + renders the Toaster
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const { colorScheme } = useTheme()
   const insets = useSafeAreaInsets()
@@ -26,7 +23,10 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
       <Toaster
         theme={colorScheme}
         position="top-center"
-        richColors={false}
+        // AUDIT FIX: was richColors={false} — all semantic variants (error, success,
+        // warning) were visually identical. richColors={true} restores correct
+        // semantic coloring so users immediately recognise severity from colour alone.
+        richColors={true}
         gap={vs(8)}
         offset={insets.top + vs(8)}
         visibleToasts={3}
@@ -40,11 +40,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
             paddingVertical: vs(10),
           },
           titleStyle: {
-            fontFamily: 'Poppins-Medium',
+            fontFamily: 'Sohne-Medium',
             fontSize: ms(13),
           },
           descriptionStyle: {
-            fontFamily: 'Poppins-Regular',
+            fontFamily: 'Sohne-Regular',
             fontSize: ms(12),
             opacity: 0.85,
           },

package/src/components/Toggle/Toggle.tsx

@@ -13,6 +13,40 @@ import { usePressScale } from '../../utils/usePressScale'
 import { useColorTransition } from '../../utils/useColorTransition'
 import { PRESS_SCALE } from '../../utils/animations'
 
+interface ToggleIconProps {
+  pressed: boolean
+  iconName?: string
+  activeIconName?: string
+  icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  iconColor?: string
+  activeIconColor?: string
+  iconSize: number
+  primaryColor: string
+  mutedColor: string
+}
+
+function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconColor, activeIconColor, iconSize, primaryColor, mutedColor }: ToggleIconProps) {
+  const renderProp = (prop?: React.ReactNode | ((p: boolean) => React.ReactNode)) => {
+    if (!prop) return null
+    if (typeof prop === 'function') return (prop as (p: boolean) => React.ReactNode)(pressed)
+    return prop
+  }
+
+  if (pressed) {
+    if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? primaryColor)}</>
+    const active = renderProp(activeIcon)
+    if (active) return <>{active}</>
+    return <FontAwesome5 name="check-circle" size={iconSize} color={primaryColor} />
+  }
+
+  if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? mutedColor)}</>
+  const custom = renderProp(icon)
+  if (custom) return <>{custom}</>
+
+  return <FontAwesome5 name="circle" size={iconSize} color={mutedColor} />
+}
+
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
 
@@ -87,27 +121,6 @@ export function Toggle({
 
   const iconSize = iconSizeMap[size]
 
-  const LeftIcon = () => {
-    const renderProp = (prop?: any) => {
-      if (!prop) return null
-      if (typeof prop === 'function') return prop(pressed)
-      return prop
-    }
-
-    if (pressed) {
-      if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary)}</>
-      const active = renderProp(activeIcon)
-      if (active) return <>{active}</>
-      return <FontAwesome5 name="check-circle" size={iconSize} color={colors.primary} />
-    }
-
-    if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? colors.foregroundMuted)}</>
-    const custom = renderProp(icon)
-    if (custom) return <>{custom}</>
-
-    return <FontAwesome5 name="circle" size={iconSize} color={colors.foregroundMuted} />
-  }
-
   return (
     <Animated.View
       style={[scaleStyle, disabled && styles.disabled, style]}
@@ -137,7 +150,18 @@ export function Toggle({
           ]}
         >
           <View style={styles.inner}>
-            <LeftIcon />
+            <ToggleIcon
+              pressed={pressed}
+              iconName={iconName}
+              activeIconName={activeIconName}
+              icon={icon}
+              activeIcon={activeIcon}
+              iconColor={iconColor}
+              activeIconColor={activeIconColor}
+              iconSize={iconSize}
+              primaryColor={colors.primary}
+              mutedColor={colors.foregroundMuted}
+            />
             {label ? (
               <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
                 {label}
@@ -164,7 +188,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
 })