React Native Dev Console

React Native Dev Console is small package designed to help debug apps in non debug mode

react-native-dev-console

Why

Debuging React native apps in debug mode is slow and error prone. With this package user is able to debug app without activating debug mode and being tied to computer.

Installation

Since the package is a JS-based solution, to install the latest version of react-native-dev-console you only need to run:

yarn add react-native-dev-console

npm install --save react-native-dev-console

Babel plugin

This package comes with babel plugin included. Babel plugin role is to add meta information needed for debuging. For example, file line number.

To enable plugin add entry to .babelrc file:

{
  "plugins": ["./node_modules/react-native-dev-console/src/babel-plugin.js"]
}

Quick Start

 
import ConsoleProvider from 'react-native-dev-console'
 
export default class App extends Component {
 
  render() {
    return (
    <View>
      <ConsoleProvider />
    </View >
    )
  }
}

Props

key	type	Value	Description
containerStyle	Style	-	Full screen mode container style
statusViewContainerStyle	Style	-	Status View container style
disableRNWarnings	boolean	true	Disable displaying of RN warnings
disableYellowBox	boolean	true	Disable displaying of RN YellowBox
isActive	boolean	true	Plugin is active
logEntryStyle	Style	-	Console log entry style
menuContainerStyle	Style	-	Bottom menu container style
passtrough	boolean	trye	Call original console log
render	Function	-	Override render function

TODO

status view move logic
support more logs types
group logs
docs how to add custom entry
docs how to start log service before react render phase
switch to FlatList instead ScrollView(performance issues)

react-native-dev-console

React Native Dev Console