react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/esm/components/CopyButton.js

@@ -1,51 +1,3 @@
-import React, { useState, useCallback } from 'react';
-import { Share } from 'react-native';
-import TouchableScale from './TouchableScale';
-import { copyToClipboard } from '../helpers';
-import { triggerNativeHaptic } from '../native/NativeInspector';
-import { TerminalIcon, FetchIcon, CopyIcon, CheckIcon } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
-    const [copied, setCopied] = useState(false);
-    const handlePress = useCallback(() => {
-        triggerNativeHaptic('success');
-        const resolvedValue = typeof value === 'function' ? value() : value;
-        copyToClipboard(resolvedValue, label);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1200);
-    }, [value, label]);
-    const handleLongPress = useCallback(() => {
-        try {
-            triggerNativeHaptic('medium');
-            const resolvedValue = typeof value === 'function' ? value() : value;
-            const textToShare = typeof resolvedValue === 'string'
-                ? resolvedValue
-                : JSON.stringify(resolvedValue, null, 2);
-            Share.share({
-                message: textToShare,
-                title: label,
-            });
-        }
-        catch { }
-    }, [value, label]);
-    const containerStyle = [
-        styles.iconSquareBtn,
-        copied && styles.iconSquareBtnSuccess,
-    ];
-    const IconComponent = iconType === 'terminal'
-        ? TerminalIcon
-        : iconType === 'fetch'
-            ? FetchIcon
-            : CopyIcon;
-    return (<TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={label
-            ? copied
-                ? `${label} copied`
-                : `Copy ${label}`
-            : copied
-                ? 'Copied to clipboard'
-                : 'Copy to clipboard'} accessibilityHint="Double tap to copy, long press to share" onPress={handlePress} onLongPress={handleLongPress} hitSlop={12} style={containerStyle}>
-      {copied ? (<CheckIcon color={AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors.grayTextWeak} size={14}/>)}
-    </TouchableScale>);
-});
-export default CopyButton;
+import g,{useState as b,useCallback as i}from"react";import{Share as T}from"react-native";import I from"./TouchableScale";import{copyToClipboard as P}from"../helpers";import{triggerNativeHaptic as n}from"../native/NativeInspector";import{TerminalIcon as k,FetchIcon as x,CopyIcon as B,CheckIcon as L}from"./NetworkIcons";import{AppColors as p}from"../styles/AppColors";import a from"../styles";const q=g.memo(({value:o,label:t,iconType:c="copy"})=>{const[s,r]=b(!1),m=i(()=>{n("success");const e=typeof o=="function"?o():o;P(e,t),r(!0),setTimeout(()=>r(!1),1200)},[o,t]),l=i(()=>{try{n("medium");const e=typeof o=="function"?o():o,S=typeof e=="string"?e:JSON.stringify(e,null,2);T.share({message:S,title:t})}catch{}},[o,t]),f=[a.iconSquareBtn,s&&a.iconSquareBtnSuccess],C=c==="terminal"?k:c==="fetch"?x:B;return<I accessible={!0}accessibilityRole="button"accessibilityLabel={t?s?`${t} copied`:`Copy ${t}`:s?"Copied to clipboard":"Copy to clipboard"}accessibilityHint="Double tap to copy, long press to share"onPress={m}onLongPress={l}hitSlop={12}style={f}>
+      {s?<L color={p.greenColor}size={14}/>:<C color={p.grayTextWeak}size={14}/>}
+    </I>});export default q;

package/dist/esm/components/DiffViewer.js

@@ -1,48 +1,22 @@
-import { useTranslation } from '../i18n';
-import React, { useMemo } from 'react';
-import { View, Text, ScrollView } from 'react-native';
-import { getDiff } from '../helpers';
-import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-const DiffViewer = React.memo(({ oldData, newData, forceOpen, }) => {
-    const { t } = useTranslation();
-    const diffs = useMemo(() => getDiff(oldData, newData), [oldData, newData]);
-    if (forceOpen === false) {
-        return (<View style={styles.codeBlock}>
-          <Text style={[styles.codeText, { color: AppColors.grayTextWeak }]}>
-            {t('network.diffHidden')}
-          </Text>
-        </View>);
-    }
-    if (diffs.length === 0) {
-        return (<View style={styles.codeBlock}>
-          <Text style={styles.codeText}>{t('network.noDiff')}</Text>
-        </View>);
-    }
-    return (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
-        <View style={styles.diffBlock}>
-          {diffs.map((d, i) => {
-            const key = d.path === 'root' ? '' : `"${d.path}": `;
-            if (d.type === 'added') {
-                return (<Text key={i} selectable={true} style={styles.diffAdded}>
-                  + <Text style={styles.codeKey}>{key}</Text>
-                  {JSON.stringify(d.newVal)}
-                </Text>);
-            }
-            if (d.type === 'removed') {
-                return (<Text key={i} selectable={true} style={styles.diffRemoved}>
-                  - <Text style={styles.codeKey}>{key}</Text>
-                  {JSON.stringify(d.oldVal)}
-                </Text>);
-            }
-            return (<Text key={i} selectable={true} style={styles.diffChanged}>
-                ~ <Text style={styles.codeKey}>{key}</Text>
-                {JSON.stringify(d.oldVal)}{' '}
-                <Text style={{ color: AppColors.grayTextWeak }}>→</Text>{' '}
-                {JSON.stringify(d.newVal)}
-              </Text>);
-        })}
-        </View>
-      </ScrollView>);
-});
-export default DiffViewer;
+import{useTranslation as O}from"../i18n";import b,{useMemo as K}from"react";import{View as V,Text as T,ScrollView as A}from"react-native";import{getDiff as C}from"../helpers";import{AppColors as J}from"../styles/AppColors";import e from"../styles";const H=b.memo(({oldData:g,newData:S,forceOpen:N})=>{const{t:h}=O(),B=K(()=>C(g,S),[g,S]);return N===!1?<V style={e.codeBlock}>
+          <T style={[e.codeText,{color:J.grayTextWeak}]}>
+            {h("network.diffHidden")}
+          </T>
+        </V>:B.length===0?<V style={e.codeBlock}>
+          <T style={e.codeText}>{h("network.noDiff")}</T>
+        </V>:<A horizontal showsHorizontalScrollIndicator={!0}style={e.codeBlockScroll}>
+        <V style={e.diffBlock}>
+          {B.map((p,u)=>{const k=p.path==="root"?"":`"${p.path}": `;return p.type==="added"?<T key={u}selectable={!0}style={e.diffAdded}>
+                  + <T style={e.codeKey}>{k}</T>
+                  {JSON.stringify(p.newVal)}
+                </T>:p.type==="removed"?<T key={u}selectable={!0}style={e.diffRemoved}>
+                  - <T style={e.codeKey}>{k}</T>
+                  {JSON.stringify(p.oldVal)}
+                </T>:<T key={u}selectable={!0}style={e.diffChanged}>
+                ~ <T style={e.codeKey}>{k}</T>
+                {JSON.stringify(p.oldVal)}{" "}
+                <T style={{color:J.grayTextWeak}}>→</T>{" "}
+                {JSON.stringify(p.newVal)}
+              </T>})}
+        </V>
+      </A>});export default H;

package/dist/esm/components/DomainHeader.js

@@ -1,139 +1,44 @@
-import React from 'react';
-import { Pressable, View, Text } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import { formatDateTime } from '../helpers';
-import { ChevronIcon, ScreenIcon, CheckIcon, FailIcon, ClockIcon, } from './NetworkIcons';
-import styles from '../styles';
-const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, isCollapsed, onToggleCollapse, isFirst, timestamp, }) => {
-    const visibleStats = ['success', 'failed', 'loading'];
-    const total = stats.success + stats.failed + stats.loading;
-    const pctSuccess = total > 0 ? Math.round((stats.success / total) * 100) : 0;
-    const pctFailed = total > 0 ? Math.round((stats.failed / total) * 100) : 0;
-    const pctLoading = total > 0 ? Math.round((stats.loading / total) * 100) : 0;
-    return (<Pressable style={[
-            styles.domainHeaderCard,
-            !isCollapsed && styles.domainHeaderCardExpanded,
-        ]} onPress={() => onToggleCollapse(pageName)}>
-      <View style={styles.domainHeaderTopRow}>
-        <View style={styles.domainHeaderLeft}>
-          <View style={{ transform: [{ rotate: isCollapsed ? '-90deg' : '0deg' }], flexShrink: 0 }}>
-            <ChevronIcon color={AppColors.grayTextWeak} size={13}/>
-          </View>
-          <View style={[styles.domainIconWrap, { backgroundColor: `${color}18`, flexShrink: 0 }]}>
-            <ScreenIcon color={color} size={14}/>
-          </View>
-          <View style={{ flex: 1, justifyContent: 'center', minWidth: 0 }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
-              <Text style={[styles.domainTitleText, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
-                {pageName}
-              </Text>
-              {total > 0 && (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4,
-                backgroundColor: stats.failed > 0
-                    ? AppColors.red100
-                    : stats.loading > 0
-                        ? AppColors.amber100
-                        : AppColors.emerald100,
-                paddingHorizontal: 5,
-                paddingVertical: 1.5,
-                borderRadius: 4,
-                flexShrink: 0,
-            }}>
-                  <View style={{
-                width: 22,
-                height: 3.5,
-                borderRadius: 2,
-                backgroundColor: AppColors.gray200,
-                flexDirection: 'row',
-                overflow: 'hidden',
-            }}>
-                    {pctSuccess > 0 && (<View style={{
-                    width: `${pctSuccess}%`,
-                    height: '100%',
-                    backgroundColor: AppColors.emerald500,
-                }}/>)}
-                    {pctFailed > 0 && (<View style={{
-                    width: `${pctFailed}%`,
-                    height: '100%',
-                    backgroundColor: AppColors.red500,
-                }}/>)}
-                    {pctLoading > 0 && (<View style={{
-                    width: `${pctLoading}%`,
-                    height: '100%',
-                    backgroundColor: AppColors.amber500,
-                }}/>)}
-                  </View>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 8.5,
-                color: stats.failed > 0
-                    ? AppColors.redErrorText
-                    : stats.loading > 0
-                        ? AppColors.amber800Warm
-                        : AppColors.emerald700,
-            }}>
-                    {pctSuccess}%
-                  </Text>
-                </View>)}
-            </View>
-            <Text style={styles.domainSummaryText} numberOfLines={1} ellipsizeMode="tail">
-              {formatDateTime(timestamp)}
-            </Text>
-          </View>
-        </View>
+import"react";import{Pressable as A,View as C,Text as H}from"react-native";import{AppColors as e}from"../styles/AppColors";import{AppFonts as q}from"../styles/AppFonts";import{formatDateTime as J}from"../helpers";import{ChevronIcon as K,ScreenIcon as Q,CheckIcon as L,FailIcon as U,ClockIcon as X}from"./NetworkIcons";import p from"../styles";const Y=({pageName:P,color:$,stats:o,activeFilters:O,onToggleFilter:E,isCollapsed:D,onToggleCollapse:j,isFirst:Z,timestamp:B})=>{const G=["success","failed","loading"],S=o.success+o.failed+o.loading,R=S>0?Math.round(o.success/S*100):0,F=S>0?Math.round(o.failed/S*100):0,M=S>0?Math.round(o.loading/S*100):0;return<A style={[p.domainHeaderCard,!D&&p.domainHeaderCardExpanded]}onPress={()=>j(P)}>
+      <C style={p.domainHeaderTopRow}>
+        <C style={p.domainHeaderLeft}>
+          <C style={{transform:[{rotate:D?"-90deg":"0deg"}],flexShrink:0}}>
+            <K color={e.grayTextWeak}size={13}/>
+          </C>
+          <C style={[p.domainIconWrap,{backgroundColor:`${$}18`,flexShrink:0}]}>
+            <Q color={$}size={14}/>
+          </C>
+          <C style={{flex:1,justifyContent:"center",minWidth:0}}>
+            <C style={{flexDirection:"row",alignItems:"center",gap:6,minWidth:0}}>
+              <H style={[p.domainTitleText,{flexShrink:1}]}numberOfLines={1}ellipsizeMode="tail">
+                {P}
+              </H>
+              {S>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:o.failed>0?e.red100:o.loading>0?e.amber100:e.emerald100,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,flexShrink:0}}>
+                  <C style={{width:22,height:3.5,borderRadius:2,backgroundColor:e.gray200,flexDirection:"row",overflow:"hidden"}}>
+                    {R>0&&<C style={{width:`${R}%`,height:"100%",backgroundColor:e.emerald500}}/>}
+                    {F>0&&<C style={{width:`${F}%`,height:"100%",backgroundColor:e.red500}}/>}
+                    {M>0&&<C style={{width:`${M}%`,height:"100%",backgroundColor:e.amber500}}/>}
+                  </C>
+                  <H style={{fontFamily:q.interBold,fontSize:8.5,color:o.failed>0?e.redErrorText:o.loading>0?e.amber800Warm:e.emerald700}}>
+                    {R}%
+                  </H>
+                </C>}
+            </C>
+            <H style={p.domainSummaryText}numberOfLines={1}ellipsizeMode="tail">
+              {J(B)}
+            </H>
+          </C>
+        </C>
 
-        <View style={styles.domainStatsGroup}>
-          {visibleStats.map(type => {
-            const isActive = activeFilters.has(type);
-            let IconComponent;
-            let activeColor = '';
-            let count = 0;
-            if (type === 'success') {
-                IconComponent = CheckIcon;
-                activeColor = AppColors.greenColor;
-                count = stats.success;
-            }
-            else if (type === 'failed') {
-                IconComponent = FailIcon;
-                activeColor = AppColors.errorColor;
-                count = stats.failed;
-            }
-            else {
-                IconComponent = ClockIcon;
-                activeColor = AppColors.darkOrange;
-                count = stats.loading;
-            }
-            return (<Pressable key={type} onPress={() => onToggleFilter(pageName, type)} hitSlop={6} style={[
-                    styles.domainStatPill,
-                    isActive && {
-                        borderColor: `${activeColor}40`,
-                        backgroundColor: `${activeColor}12`,
-                    },
-                ]}>
-                <View style={[
-                    styles.filterCheckbox,
-                    { marginRight: 0, width: 11, height: 11, borderRadius: 2.5 },
-                    isActive && [
-                        styles.filterCheckboxActive,
-                        { backgroundColor: activeColor },
-                    ],
-                ]}>
-                  {isActive && (<CheckIcon color={AppColors.white} size={7}/>)}
-                </View>
-                <IconComponent color={isActive ? activeColor : AppColors.grayTextWeak} size={type === 'failed' ? 8 : 10}/>
-                <Text style={[
-                    styles.domainStatText,
-                    { color: isActive ? activeColor : AppColors.grayTextWeak },
-                ]}>
-                  {count}
-                </Text>
-              </Pressable>);
-        })}
-        </View>
-      </View>
-    </Pressable>);
-};
-export default DomainHeader;
+        <C style={p.domainStatsGroup}>
+          {G.map(V=>{const I=O.has(V);let W,T="",v=0;return V==="success"?(W=L,T=e.greenColor,v=o.success):V==="failed"?(W=U,T=e.errorColor,v=o.failed):(W=X,T=e.darkOrange,v=o.loading),<A key={V}onPress={()=>E(P,V)}hitSlop={6}style={[p.domainStatPill,I&&{borderColor:`${T}40`,backgroundColor:`${T}12`}]}>
+                <C style={[p.filterCheckbox,{marginRight:0,width:11,height:11,borderRadius:2.5},I&&[p.filterCheckboxActive,{backgroundColor:T}]]}>
+                  {I&&<L color={e.white}size={7}/>}
+                </C>
+                <W color={I?T:e.grayTextWeak}size={V==="failed"?8:10}/>
+                <H style={[p.domainStatText,{color:I?T:e.grayTextWeak}]}>
+                  {v}
+                </H>
+              </A>})}
+        </C>
+      </C>
+    </A>};export default Y;

package/dist/esm/components/EmptyState.js

@@ -1,56 +1,17 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, DevSettings, Alert, Text } from 'react-native';
-import TouchableScale from './TouchableScale';
-import AnimatedEntrance from './AnimatedEntrance';
-import { EmptyRadarIcon } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-const EmptyState = React.memo(function EmptyState({ isSearch, searchQuery, customTitle, customSub, onClearSearch, showReload = true, }) {
-    const iconPulse = useRef(new Animated.Value(1)).current;
-    useEffect(() => {
-        const loop = Animated.loop(Animated.sequence([
-            Animated.timing(iconPulse, {
-                toValue: 1.06,
-                duration: 900,
-                useNativeDriver: false,
-            }),
-            Animated.timing(iconPulse, {
-                toValue: 1,
-                duration: 900,
-                useNativeDriver: false,
-            }),
-        ]));
-        loop.start();
-        return () => loop.stop();
-    }, [iconPulse]);
-    const handleReload = () => {
-        if (__DEV__ && DevSettings && DevSettings.reload) {
-            DevSettings.reload();
-            return;
-        }
-        Alert.alert('Reload', 'App reload is typically only available in development mode.');
-    };
-    return (<AnimatedEntrance style={styles.emptyContainer} distance={14}>
-      <Animated.View style={[styles.emptyIconWrap, { transform: [{ scale: iconPulse }] }]}>
-        <EmptyRadarIcon color={AppColors.purple} size={32}/>
-      </Animated.View>
-      <Text style={styles.emptyTitle}>
-        {customTitle || (isSearch ? 'No matching results' : 'No network activity')}
-      </Text>
-      <Text style={styles.emptySub}>
-        {customSub ||
-            (isSearch
-                ? searchQuery
-                    ? `No items matched "${searchQuery}"`
-                    : 'Try adjusting your filters or search keywords.'
-                : 'Listening for incoming API calls...')}
-      </Text>
-      {isSearch && onClearSearch && (<TouchableScale style={styles.reloadBtn} onPress={onClearSearch}>
-          <Text style={styles.reloadBtnText}>Clear Search & Filters</Text>
-        </TouchableScale>)}
-      {!isSearch && showReload && (<TouchableScale style={styles.reloadBtn} onPress={handleReload}>
-          <Text style={styles.reloadBtnText}>Reload App</Text>
-        </TouchableScale>)}
-    </AnimatedEntrance>);
-});
-export default EmptyState;
+import N,{useEffect as B,useRef as D}from"react";import{Animated as t,DevSettings as A,Alert as P,Text as T}from"react-native";import E from"./TouchableScale";import S from"./AnimatedEntrance";import{EmptyRadarIcon as _}from"./NetworkIcons";import{AppColors as h}from"../styles/AppColors";import e from"../styles";const I=N.memo(function({isSearch:o,searchQuery:v,customTitle:R,customSub:V,onClearSearch:x,showReload:b=!0}){const r=D(new t.Value(1)).current;B(()=>{const g=t.loop(t.sequence([t.timing(r,{toValue:1.06,duration:900,useNativeDriver:!1}),t.timing(r,{toValue:1,duration:900,useNativeDriver:!1})]));return g.start(),()=>g.stop()},[r]);const w=()=>{if(__DEV__&&A&&A.reload){A.reload();return}P.alert("Reload","App reload is typically only available in development mode.")};return<S style={e.emptyContainer}distance={14}>
+      <t.View style={[e.emptyIconWrap,{transform:[{scale:r}]}]}>
+        <_ color={h.purple}size={32}/>
+      </t.View>
+      <T style={e.emptyTitle}>
+        {R||(o?"No matching results":"No network activity")}
+      </T>
+      <T style={e.emptySub}>
+        {V||(o?v?`No items matched "${v}"`:"Try adjusting your filters or search keywords.":"Listening for incoming API calls...")}
+      </T>
+      {o&&x&&<E style={e.reloadBtn}onPress={x}>
+          <T style={e.reloadBtnText}>Clear Search & Filters</T>
+        </E>}
+      {!o&&b&&<E style={e.reloadBtn}onPress={w}>
+          <T style={e.reloadBtnText}>Reload App</T>
+        </E>}
+    </S>});export default I;

package/dist/esm/components/EndOfListFooter.js

@@ -1,83 +1,15 @@
-import React from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import { CheckIcon } from './NetworkIcons';
-export const EndOfListFooter = React.memo(({ count, label, message = "You've reached the end of the list", }) => {
-    return (<View style={styles.container}>
-      <View style={styles.dividerLine}/>
-      <View style={styles.badgePill}>
-        <View style={styles.iconCircle}>
-          <CheckIcon color={AppColors.purple} size={8}/>
-        </View>
-        <Text style={styles.messageText}>{message}</Text>
-        {count != null && count > 0 && (<View style={styles.countBadge}>
-            <Text style={styles.countText}>
-              {count} {label ? (count === 1 ? label.replace(/s$/, '') : label) : ''}
-            </Text>
-          </View>)}
-      </View>
-      <View style={styles.dividerLine}/>
-    </View>);
-});
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: Platform.OS === 'ios' ? 44 : 32,
-        gap: 8,
-    },
-    dividerLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: AppColors.dividerColor,
-        opacity: 0.7,
-    },
-    badgePill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 999,
-        backgroundColor: AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.04,
-        shadowRadius: 2,
-        elevation: 1,
-    },
-    iconCircle: {
-        width: 14,
-        height: 14,
-        borderRadius: 7,
-        backgroundColor: `${AppColors.purple}18`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    messageText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.1,
-    },
-    countBadge: {
-        paddingHorizontal: 5,
-        paddingVertical: 1,
-        borderRadius: 6,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    countText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.grayTextStrong,
-    },
-});
-export default EndOfListFooter;
+import B from"react";import{Platform as V,StyleSheet as v,Text as T,View as C}from"react-native";import{AppColors as e}from"../styles/AppColors";import{AppFonts as S}from"../styles/AppFonts";import{CheckIcon as L}from"./NetworkIcons";export const EndOfListFooter=B.memo(({count:w,label:b,message:k="You've reached the end of the list"})=><C style={o.container}>
+      <C style={o.dividerLine}/>
+      <C style={o.badgePill}>
+        <C style={o.iconCircle}>
+          <L color={e.purple}size={8}/>
+        </C>
+        <T style={o.messageText}>{k}</T>
+        {w!=null&&w>0&&<C style={o.countBadge}>
+            <T style={o.countText}>
+              {w} {b?w===1?b.replace(/s$/,""):b:""}
+            </T>
+          </C>}
+      </C>
+      <C style={o.dividerLine}/>
+    </C>);const o=v.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingHorizontal:16,paddingTop:16,paddingBottom:V.OS==="ios"?44:32,gap:8},dividerLine:{flex:1,height:1,backgroundColor:e.dividerColor,opacity:.7},badgePill:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:5,borderRadius:999,backgroundColor:e.primaryLight,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.black,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},iconCircle:{width:14,height:14,borderRadius:7,backgroundColor:`${e.purple}18`,alignItems:"center",justifyContent:"center"},messageText:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak,letterSpacing:.1},countBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:6,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},countText:{fontFamily:S.interBold,fontSize:9.5,color:e.grayTextStrong}});export default EndOfListFooter;