react-native-network-logger

import { startNetworkLogging } from 'react-native-network-logger'; import NetworkLogger from 'react-native-network-logger'; import React, { useEffect, useState } from 'react'; import { View, Button, Modal, Text, StyleSheet } from 'react-native'; // Start logging as early as possible in your app's entry point. // For demonstration, it's shown here, but typically placed in index.js or App.js. startNetworkLogging({ maxRequests: 500, // Retain a maximum of 500 requests // Example: ignore specific URLs or patterns ignoredUrls: [/^https:\/\/example\.com\/health/, /localhost\:\d+\/__/], }); const App = () => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { // In a real app, you might trigger the logger visibility via a debug menu // or a specific gesture in development builds. }, []); return ( <View style={styles.container}> <Text style={styles.title}>React Native Network Logger Demo</Text> <Button title="Show Network Logger" onPress={() => setIsVisible(true)} /> <Modal animationType="slide" transparent={false} visible={isVisible} onRequestClose={() => setIsVisible(false)} > <NetworkLogger theme="dark" // Optional: specify 'dark' or 'light' // Or provide a custom theme object: { backgroundColor: '#222', textColor: '#eee', ... } /> <Button title="Close Logger" onPress={() => setIsVisible(false)} /> </Modal> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, title: { fontSize: 20, textAlign: 'center', margin: 10, }, }); export default App;