react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/components/ConsoleLogDetailView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ConsoleLog } from '../types';
+interface ConsoleLogDetailViewProps {
+    selectedConsoleLog: ConsoleLog;
+    detailSearch: string;
+    onSetDetailSearch: (search: string) => void;
+}
+export declare const ConsoleLogDetailView: React.FC<ConsoleLogDetailViewProps>;
+export default ConsoleLogDetailView;

package/dist/esm/components/ConsoleLogDetailView.js

@@ -0,0 +1,271 @@
+import React from 'react';
+import { Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import CopyButton from './CopyButton';
+import HighlightText from './HighlightText';
+import JsonViewer from './JsonViewer';
+import { SearchIcon, ClearIcon, } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import styles from '../styles';
+import { getJsonContent } from '../helpers';
+export const ConsoleLogDetailView = ({ selectedConsoleLog, detailSearch, onSetDetailSearch, }) => {
+    const { t } = useTranslation();
+    const jsonContent = getJsonContent(selectedConsoleLog.message);
+    const isAnalyticsError = selectedConsoleLog.message
+        .toLowerCase()
+        .includes('[analytics error]');
+    const isUserLog = selectedConsoleLog.sourceMethod === 'log';
+    const getLogColors = () => {
+        if (isAnalyticsError) {
+            return {
+                badgeBg: `${AppColors.skyBlue}15`,
+                badgeText: AppColors.skyBlue,
+                label: 'ERROR',
+            };
+        }
+        switch (selectedConsoleLog.type) {
+            case 'error':
+                return {
+                    badgeBg: `${AppColors.errorColor}15`,
+                    badgeText: AppColors.errorColor,
+                    label: 'ERROR',
+                };
+            case 'warn':
+                return {
+                    badgeBg: `${AppColors.lightOrange}15`,
+                    badgeText: AppColors.darkOrange || AppColors.lightOrange,
+                    label: 'WARN',
+                };
+            default:
+                if (isUserLog) {
+                    return {
+                        badgeBg: AppColors.slateBorder,
+                        badgeText: AppColors.slateText,
+                        label: 'INFO',
+                    };
+                }
+                return {
+                    badgeBg: `${AppColors.purple}15`,
+                    badgeText: AppColors.purple,
+                    label: 'INFO',
+                };
+        }
+    };
+    const colors = getLogColors();
+    return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16, gap: 12 }} nestedScrollEnabled={true}>
+      {/* 1. Header Info Card */}
+      <View style={{
+            backgroundColor: AppColors.primaryLight,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+            padding: 14,
+            gap: 12,
+        }}>
+        <View style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 8,
+        }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
+              <Text style={[styles.badgeText, { color: colors.badgeText }]}>
+                {colors.label}
+              </Text>
+            </View>
+            <View style={[
+            styles.badge,
+            {
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+                borderColor: 'rgba(107, 78, 255, 0.2)',
+                borderWidth: 1,
+            },
+        ]}>
+              <Text style={[styles.badgeText, { color: AppColors.indigoAccent }]}>
+                console.
+                {selectedConsoleLog.sourceMethod ||
+            selectedConsoleLog.type ||
+            'log'}
+              </Text>
+            </View>
+            {jsonContent && (<View style={[
+                styles.badge,
+                {
+                    backgroundColor: 'rgba(13, 148, 136, 0.08)',
+                    borderColor: 'rgba(13, 148, 136, 0.18)',
+                    borderWidth: 1,
+                },
+            ]}>
+                <Text style={[styles.badgeText, { color: AppColors.teal }]}>
+                  {Array.isArray(jsonContent.data)
+                ? `Array[${jsonContent.data.length}]`
+                : `Object{${Object.keys(jsonContent.data ?? {}).length}}`}
+                </Text>
+              </View>)}
+            {selectedConsoleLog.duplicateCount != null &&
+            selectedConsoleLog.duplicateCount > 1 && (<View style={[
+                styles.badge,
+                {
+                    backgroundColor: 'rgba(104, 75, 155, 0.1)',
+                    borderColor: 'rgba(104, 75, 155, 0.25)',
+                    borderWidth: 1,
+                },
+            ]}>
+                  <Text style={[
+                styles.badgeText,
+                { color: AppColors.purple, fontWeight: '700' },
+            ]}>
+                    ×{selectedConsoleLog.duplicateCount}
+                  </Text>
+                </View>)}
+          </View>
+
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 12,
+            color: AppColors.grayTextWeak,
+        }}>
+              #{selectedConsoleLog.id + 1}
+            </Text>
+            <CopyButton value={selectedConsoleLog.message} label="Log message"/>
+          </View>
+        </View>
+
+        <View style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            borderTopWidth: 1,
+            borderTopColor: AppColors.dividerColor,
+            paddingTop: 10,
+        }}>
+          <Text style={{
+            fontFamily: AppFonts.interMedium,
+            fontSize: 12,
+            color: AppColors.grayText,
+        }}>
+            {t('details.captured_at')}
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            color: AppColors.primaryBlack,
+        }}>
+              {new Date(selectedConsoleLog.timestamp).toLocaleTimeString()}
+            </Text>
+          </Text>
+          <Text style={{
+            fontFamily: AppFonts.interRegular,
+            fontSize: 11,
+            color: AppColors.grayTextWeak,
+        }}>
+            {selectedConsoleLog.message.length} {t('details.chars')}
+          </Text>
+        </View>
+      </View>
+
+      {/* 2. Caller Stack Frame Card (if available) */}
+      {selectedConsoleLog.caller &&
+            selectedConsoleLog.caller !== 'Unknown' && (<View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 8,
+            }}>
+            <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.5,
+            }}>
+                {t('details.caller_location')}
+              </Text>
+              <CopyButton value={selectedConsoleLog.caller} label="Caller location"/>
+            </View>
+            <View style={{
+                backgroundColor: AppColors.grayBackground,
+                padding: 10,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: AppColors.dividerColor,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }} selectable>
+                {selectedConsoleLog.caller}
+              </Text>
+            </View>
+          </View>)}
+
+      {/* 3. Search Bar for detail page */}
+      <View style={styles.searchContainer}>
+        <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+        <TextInput placeholder={t('search.log_details_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={onSetDetailSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+        {detailSearch.length > 0 && (<Pressable onPress={() => onSetDetailSearch('')} hitSlop={10} style={styles.clearBtn}>
+            <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+          </Pressable>)}
+      </View>
+
+      {/* 4. Log Content Card */}
+      <View style={{
+            backgroundColor: AppColors.primaryLight,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+            padding: 14,
+            gap: 10,
+        }}>
+        <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 11,
+            color: AppColors.grayTextWeak,
+            letterSpacing: 0.5,
+        }}>
+          {t('details.log_payload')}
+        </Text>
+
+        {jsonContent ? (<>
+            {jsonContent.header ? (<View style={{
+                    padding: 10,
+                    backgroundColor: AppColors.grayBackground,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors.dividerColor,
+                    marginBottom: 6,
+                }}>
+                <HighlightText text={jsonContent.header} search={detailSearch} style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 12,
+                    color: AppColors.primaryBlack,
+                }} highlightStyle={styles.highlight} detectLinks={true} selectable={true}/>
+              </View>) : null}
+            <JsonViewer data={jsonContent.data} search={detailSearch} wrap={true}/>
+          </>) : (<View style={{
+                padding: 12,
+                backgroundColor: AppColors.grayBackground,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: AppColors.dividerColor,
+            }}>
+            <HighlightText text={selectedConsoleLog.message} search={detailSearch} style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 12,
+                color: AppColors.primaryBlack,
+                lineHeight: 18,
+            }} highlightStyle={styles.highlight} detectLinks={true} selectable={true}/>
+          </View>)}
+      </View>
+    </ScrollView>);
+};
+export default ConsoleLogDetailView;

package/dist/esm/components/ConsoleLogsTabView.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ConsoleLog, LocalFilter, SortOrder } from '../types';
+interface ConsoleLogsTabViewProps {
+    logSearch: string;
+    onSetLogSearch: (val: string) => void;
+    logSortOrder: SortOrder;
+    onToggleSortOrder: () => void;
+    onDeleteLogs: () => void;
+    logFilters: Set<LocalFilter>;
+    onSetLogFilters: React.Dispatch<React.SetStateAction<Set<LocalFilter>>>;
+    logCounts: {
+        all: string;
+        info: string;
+        warn: string;
+        error: string;
+        'user-log': string;
+        analytics: string;
+    };
+    visibleConsoleLogs: ConsoleLog[];
+    filteredConsoleLogs: ConsoleLog[];
+    onSelectConsoleLog: (item: ConsoleLog) => void;
+}
+export declare const ConsoleLogsTabView: React.FC<ConsoleLogsTabViewProps>;
+export default ConsoleLogsTabView;

package/dist/esm/components/ConsoleLogsTabView.js

@@ -0,0 +1,348 @@
+import React from 'react';
+import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from './TouchableScale';
+import { ConsoleLogCard } from './ConsoleLogCard';
+import EmptyState from './EmptyState';
+import AnimatedEntrance from './AnimatedEntrance';
+import { SearchIcon, ClearIcon, SortArrowIcon, WipeIcon, LayersIcon, UserIcon, AnalyticsIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import styles from '../styles';
+export const ConsoleLogsTabView = React.memo(({ logSearch, onSetLogSearch, logSortOrder, onToggleSortOrder, onDeleteLogs, logFilters, onSetLogFilters, logCounts, visibleConsoleLogs, filteredConsoleLogs, onSelectConsoleLog, }) => {
+    const { t } = useTranslation();
+    const renderItem = React.useCallback(({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
+        <ConsoleLogCard item={item} searchStr={logSearch} onPress={() => onSelectConsoleLog(item)}/>
+      </AnimatedEntrance>), [logSearch, onSelectConsoleLog]);
+    const keyExtractor = React.useCallback((item) => String(item.id), []);
+    return (<View style={{ flex: 1 }}>
+      <View style={{
+            backgroundColor: AppColors.white,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors.dividerColor,
+            paddingBottom: 6,
+        }}>
+        <View style={[
+            styles.toolbarRow,
+            { marginTop: 12, marginBottom: 8 },
+        ]}>
+          <View style={styles.searchContainer}>
+            <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+            <TextInput placeholder={t('search.logs_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={logSearch} onChangeText={onSetLogSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {logSearch.length > 0 && (<Pressable onPress={() => onSetLogSearch('')} hitSlop={10} style={styles.clearBtn}>
+                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+              </Pressable>)}
+          </View>
+
+          <View style={styles.toolbarRight}>
+            <TouchableScale style={styles.toolbarBtn} onPress={onToggleSortOrder} hitSlop={10}>
+              <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
+            </TouchableScale>
+            <TouchableScale style={[
+            styles.toolbarBtn,
+            {
+                borderColor: 'rgba(255,46,87,0.22)',
+                backgroundColor: 'rgba(255,46,87,0.06)',
+            },
+        ]} onPress={onDeleteLogs} hitSlop={6}>
+              <WipeIcon color={AppColors.errorColor} size={15}/>
+            </TouchableScale>
+          </View>
+        </View>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        }}>
+          {(() => {
+            const active = logFilters.has('all');
+            return (<TouchableScale onPress={() => onSetLogFilters(new Set(['all']))}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.purpleShade700,
+                        backgroundColor: AppColors.purpleShade50,
+                    },
+                ]}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <LayersIcon size={12} color={active
+                    ? AppColors.purpleShade700
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.purpleShade700,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.all')} ({logCounts.all})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('user-log');
+            return (<TouchableScale onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('user-log')
+                            ? next.delete('user-log')
+                            : next.add('user-log');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.slateSubtle,
+                        backgroundColor: AppColors.slateLight,
+                    },
+                ]}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <UserIcon size={12} color={active ? AppColors.slateText : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.slateText,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.user_log')} ({logCounts['user-log']})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('info');
+            return (<TouchableScale onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('info')
+                            ? next.delete('info')
+                            : next.add('info');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.skyBlue,
+                        backgroundColor: `${AppColors.skyBlue}15`,
+                    },
+                ]}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <InfoCircleIcon size={12} color={active
+                    ? AppColors.skyBlue
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.skyBlue,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.info')} ({logCounts.info})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('warn');
+            return (<TouchableScale onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('warn')
+                            ? next.delete('warn')
+                            : next.add('warn');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.lightOrange,
+                        backgroundColor: `${AppColors.lightOrange}15`,
+                    },
+                ]}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <WarningTriangleIcon size={12} color={active
+                    ? AppColors.darkOrange
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.darkOrange,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.warn')} ({logCounts.warn})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('error');
+            return (<TouchableScale onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('error')
+                            ? next.delete('error')
+                            : next.add('error');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.errorColor,
+                        backgroundColor: `${AppColors.errorColor}15`,
+                    },
+                ]}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <ErrorCircleIcon size={12} color={active
+                    ? AppColors.errorColor
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.errorColor,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.error')} ({logCounts.error})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('analytics');
+            return (<TouchableScale onPress={() => {
+                    onSetLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('analytics')
+                            ? next.delete('analytics')
+                            : next.add('analytics');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: AppColors.purple,
+                        backgroundColor: `${AppColors.purple}15`,
+                    },
+                ]}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <AnalyticsIcon size={12} color={active
+                    ? AppColors.purple
+                    : AppColors.grayTextStrong}/>
+                    <Text numberOfLines={1} style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: AppColors.purple,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      {t('filters.analytics')} ({logCounts.analytics})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })()}
+        </ScrollView>
+      </View>
+
+      <FlatList data={filteredConsoleLogs} ListHeaderComponent={(() => {
+            const total = visibleConsoleLogs.length;
+            const filtered = filteredConsoleLogs.length;
+            const isAllSelected = logFilters.has('all') ||
+                !Array.from(logFilters).some(f => f !== 'all');
+            if (isAllSelected) {
+                return (<Text style={[
+                        styles.resultCount,
+                        { marginBottom: 4, marginTop: 12 },
+                    ]}>
+                {t('filters.showing_logs', { filtered, total })}
+              </Text>);
+            }
+            else {
+                const activeFilterNames = Array.from(logFilters)
+                    .filter(f => f !== 'all')
+                    .map(f => {
+                    if (f === 'user-log')
+                        return t('filters.user_log');
+                    if (f === 'analytics')
+                        return t('filters.analytics');
+                    return (f.charAt(0).toUpperCase() +
+                        f.slice(1));
+                });
+                return (<Text style={[
+                        styles.resultCount,
+                        { marginBottom: 4, marginTop: 12 },
+                    ]}>
+                {t('filters.filtering_logs', {
+                        filters: activeFilterNames.join(', '),
+                        filtered,
+                        total,
+                    })}
+              </Text>);
+            }
+        })()} renderItem={renderItem} keyExtractor={keyExtractor} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
+            styles.listContent,
+            filteredConsoleLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+    </View>);
+});
+export default ConsoleLogsTabView;

package/dist/esm/components/DiffViewer.js

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import React, { useMemo } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 // Helpers
@@ -6,17 +7,18 @@ 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 }]}>
-            {'{ Diff hidden }'}
+            {t('network.diffHidden')}
           </Text>
         </View>);
     }
     if (diffs.length === 0) {
         return (<View style={styles.codeBlock}>
-          <Text style={styles.codeText}>No differences from previous API.</Text>
+          <Text style={styles.codeText}>{t('network.noDiff')}</Text>
         </View>);
     }
     return (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>