nativesh / react-native-console-panel

simple react native console component

React Native Console Panel

A Simple debug panel component to view console message right inside the app.
This will be helpful during your react native development. This is a pure react native component ,you can use it in both ios and android .

Xcode / Android Studio is not a must for React Native app development.
RN developers can simplify tool chain with this component when coding javascript only.
You don't have to open any of Xcode , Android Studio or Chrome dev console for viewing js console message. A javascript editor and a emulator/device are all you need.

Usage

Install from npm :

npm install --save react-native-console-panel

Integrate into your app:

//import the component
var ConsolePanel = require('react-native-console-panel').displayWhenDev();
...
render:function(){
	return (
		<View style={styles.container}>
        	...
        	<TouchableHighlight style={styles.btn} onPress={this._onPressButton}>
          	<Text>
            Hit me!
          	</Text>
        	</TouchableHighlight>
        
        	//Panel will float above your content
        	//use top,left to control panel's position 
        	{ConsolePanel}
      </View>
      );

• displayWhenDev() will return the component or null accroding __DEV__ flag
• displayIgnoreDevVariable() ignore __DEV__ variable

Yellowbox

The react-native add a 'Yellowbox' in v0.16(not release yet) for showing warn/error messages.This module disable that by default. If you want to keep both yellowbox and console ,you should import like this require('react-native-console-panel/keep-yellowbox').

Now, when you use 'console' to print something , it will be like this:

Avaiable props:

	propTypes:{
        limit:React.PropTypes.number,//message limit number
        open:React.PropTypes.bool,//is open when mounted
    }

TO-DOs

• Count unread log when panel is closing
• 'clear' button
• System infomation shapshot
• Better looking?
• ...

I'm new to Javascript .So any pull request is welcomed!

react-native-console-panel's Issues

Can't find variable 'v'

I installed the module and added:

var ConsolePanel = require('react-native-console-panel').displayIgnoreDevVariable();

also tried

var ConsolePanel = require('react-native-console-panel'). displayWhenDev();

removing the line removes the error.

Error: Naming collision detected:

Hi, I've got another error below.
It works after deleting react-** folders under the react-native-console-panel/node_modules folder.
Dependency definition in console-panel's package.json file may cause this problem.
Would you solve this? Some other react-native libraries have the same problem :(

Error: Naming collision detected: /Users/james/Dropbox/Development/react/Builder/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/Array.prototype.es6.js collides with /Users/james/Dropbox/Development/react/Builder/node_modules/react-native-console-panel/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/Array.prototype.es6.js

No messages displayed

Hi!

I'm having problems getting the console messages to display in the ConsolePanel. When debugging it seems that "this.waiting" is always true in the index.js:

    ConsoleStack.prototype.notifyListeners = function () {
        if (this.waiting) {
            return;
        }
        this.timeout = setTimeout(()=> {
            this.listeners.forEach((callback)=>{
                callback();
                clearTimeout(this.timeout);
                this.waiting = false;
            });
        }, 500);
        this.waiting = true;
    }

After adding this.waiting = false in the "bindUpdateListener" it stared to work.

    ConsoleStack.prototype.bindUpdateListener = function (callback) {
        this.waiting = false;
        this.listeners.push(callback);
    }

Is there something I'm doing wrong?

I have just added the following line in the top of my component

    var ConsolePanel = require('react-native-console-panel').displayIgnoreDevVariable();

and this in the render method (as the example states)

    {ConsolePanel}

Thanks for sharing this component, I really like the functionality!

Invalid prop 'color' supplied to 'Stylesheet warn': peachPuff

Hi there,

Just installed this module, and I ran into this issue "Invalid prop 'color' supplied to 'StyleSheet want': peachPuff". Here is the screenshot :

Tried to run it on my Nexus 6 using react-native 0.20.0.

Unexpected token name «of», expected punc «;»

Hi,

I can build react-native-console-panel on genymotion,
but building with my android device(with option displayIgnoreDevVariable) is failed.
react-native device build(./android/gradlew installRelease) does not allow to use [for..of] syntax..

facebook/react-native#1499

Can you change [for .. of] to forEach or [for .. in]?

Thank you