React Native Debugger

A react native debugger with Built in UI and Remote Debugging options.

Installation

React Native Debugger requires React Native 0.35 or later.

NPM Module

npm install react-native-debugger

Setup

React Native Debugger contains 5 core modules. These modules are responsible to maintain the module correct behaviour.

• createDebugger
• debuggerReducer
• Debugger
• DebuggerUI
• actions

These are the available named exports of this module.

---

createDebugger

This module is responsible to set up the debugger and connect it to the Redux architecture.

Installation

Add createDebugger to your compose function.

createStore(rootReducer, compose(
    createDebugger(),
    applyMiddleware(...middlewares)
));

Parameters

• isVisible (Boolean|Required) - if true the debugger UI will be visible by default
• allowServerLogging (Boolean|Required) - if true the debugger will send the events to your debugger-server.
• serverUrl (String|Required) - debugger server url (see debugger-server)
• authorization (String|Required) Base auth hash, see details: How to generate auth hash
• eventTypes (Array|Required) - array of Event Objects you want to trigger

Events

IMPORTANT:
The mudule will display only the listed events!

• TYPE (String|Required) - event type (e.g NETWORK_REQUEST)
• CATEGORY_NAME (String|Required) - long category name to be displayed on the Debugger UI.
• EVENT_NAME (String|Required) - short category name to be displayed on the Debugger UI.

Example setup

createDebugger({
    isVisible:  true,
    allowServerLogging:  true,
    serverUrl:  'http://mydomain.com/log',
  authorization: 'YWRtaW46U2VjcmV0MTIz', <--- DEFAULT HASH
    eventTypes: [
        {
            TYPE: 'NETWORK_REQUEST',
            CATEGORY_NAME: 'Network request logging',
            EVENT_NAME: 'Net. Request',
        },
    ]
})

---

debuggerReducer

Add debuggerReducer to your combineReducers.

IMPORTANT:

Name debuggerReducer as debugger in your store!

combineReducers({
    debugger: debuggerReducer,
    ...otherReducers,
})

---

Debugger

This api is responsible for event triggering. Use this pice of code anywhere in your application to capture React Native Events.

Debugger.logAction({
    label: 'My event', 
    type: 'NETWORK_REQUEST',
    logType: 'SUCCESS',
    data: myCustomData <-- Supported types: String, Array, Object
});

Debugger.EVENT_TYPES

• NONE use this type for neutral events
• ERROR use this type for error events
• WARNING use this type for warning events
• SUCCESS use this type for success events

DebuggerUI

UI implementation of React Native Debugger. Insert it in your main application container, on the top of your content!

<SafeView>
    <StatusBar hidden />
    <RenderScreen route={route} />
    <Header />
    <Tabbar />
    <RenderOverlay />
    <DebuggerUI /> <-- IT SHOULD BE ON THE TOP OF THE SCREEN
</SafeView>

actions

Public Redux actions.

• showDebugger
• hideDebugger

Screenshots