react-native-debug-toolkit/lib/DebugToolKit.js

A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development

import React from 'react'
import { BackHandler, Pressable, Text } from 'react-native'
import RootSiblings from 'react-native-root-siblings'
import FloatPanelView from './views/FloatPanelView'
import NativeDebugLibs from './NativeDebugLibs'

export default class DebugToolKit {
  static instance = null

  constructor(config = {}) {
    if (DebugToolKit.instance) {
      return DebugToolKit.instance
    }

    // Set the debug mode flag directly from NativeDebugLibs
    // this.isDebugMode = NativeDebugLibs.isDebugBuild()
    this.isDebugMode = true

    this.floatPanel = null
    this.features = []
    this.isPanelVisible = false

    const featuresToLoad = config.features || []

    // Only load features in debug mode
    if (this.isDebugMode) {
      featuresToLoad.forEach(featureOrCreator => {
        const feature = typeof featureOrCreator === 'function'
          ? featureOrCreator()
          : featureOrCreator
        this.addFeature(feature)
      })

      if (config.autoShow) {
        this.showDebugPanel()
      }

      BackHandler.addEventListener('hardwareBackPress', () => true)
    } else {
      console.log('[DebugToolKit] Not initializing features - not in debug mode')
    }
    
    DebugToolKit.instance = this
  }

  addFeature(feature) {
    if (!this.isDebugMode) return this;
    
    if (feature && typeof feature.name === 'string') {
      this.features.push(feature)
      feature.setup?.()
    } else {
      console.warn('[DebugToolKit] Invalid feature added:', feature)
    }
    return this
  }


  clearAll = () => {
    // Clear all logs from all features
    this.features.forEach((feature) => {
      if (typeof feature.cleanup === 'function') {
        feature.cleanup();
      }
      // Re-setup the feature to initialize it again
      if (typeof feature.setup === 'function') {
        feature.setup();
      }
    });
    
  }

  showDebugPanel = () => {
    if (!this.isDebugMode) {
      return
    }

    if (!this.floatPanel) {
      this.floatPanel = new RootSiblings(
        <FloatPanelView 
          features={this.features} 
          close={this.hideDebugPanel} 
          clearAll={this.clearAll}
        />,
      )
    }
    this.isPanelVisible = true
  }

  hideDebugPanel = () => {
    if (this.floatPanel) {
      this.floatPanel.destroy()
      this.floatPanel = null
    }
  }

  updateDebugPanel() {
    if (this.floatPanel) {
      this.floatPanel.update(
        <FloatPanelView 
          features={this.features} 
          close={this.hideDebugPanel} 
          clearAll={this.clearAll}
        />,
      )
    }
  }

  destroy() {
    this.hideDebugPanel()

    if (this.restartModal) {
      this.restartModal.destroy()
      this.restartModal = null
    }

    this.features.forEach((feature) => {
      if (typeof feature.cleanup === 'function') {
        feature.cleanup()
      }
    })

    this.features = []
    BackHandler.removeEventListener('hardwareBackPress')
  }
}