React Native Dev Console

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

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

or

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

Quick Start

import ConsoleProvider from 'react-native-dev-console'

export default class App extends Component {

  render() {
    return (
    <View>
      <ConsoleProvider />
    </View >
    )
  }
}

Display line numbers

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"]
}

Catching Logs before React render phase

Basic setup will not display logs that are called before React render phase. In order to cover that scenario in App entry file include:

import { LogService } from 'react-native-dev-console'

LogService.start()

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

License

MIT License. © Željko Marković 2018