fix: dont try and update unmounted component (#38)

* fix: dont try and update unmounted network logs

* refactor: cleanup display logic

example/src/App.tsx

@@ -6,7 +6,6 @@ import {
   Platform,
   View,
   Text,
-  Alert,
   TouchableOpacity,
 } from 'react-native';
 import NetworkLogger, {
@@ -41,12 +40,23 @@ export default function App() {
 
   const styles = themedStyles(theme === 'dark');
 
-  const goBack = () => {
-    Alert.alert('Going back');
-  };
+  const goBack = () => setUnmountNetworkLogger(true);
+
+  const [unmountNetworkLogger, setUnmountNetworkLogger] = useState(false);
 
   const backHandler = getBackHandler(goBack);
 
+  const remountButton = (
+    <View>
+      <Button
+        title={'Re-open the network logger'}
+        onPress={() => setUnmountNetworkLogger(false)}
+      >
+        Re-open network logger
+      </Button>
+    </View>
+  );
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
@@ -62,7 +72,9 @@ export default function App() {
         </Text>
         <View style={styles.navButton} />
       </View>
-      <NetworkLogger theme={theme} />
+      {(unmountNetworkLogger && remountButton) || (
+        <NetworkLogger theme={theme} />
+      )}
       <View style={styles.bottomView}>
         <Button
           title="Toggle Theme"

src/components/NetworkLogger.tsx

@@ -42,6 +42,11 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
     });
 
     logger.enableXHRInterception();
+
+    return () => {
+      // no-op if component is unmounted
+      logger.setCallback(() => {});
+    };
   }, [sort]);
 
   useEffect(() => {