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 componentvar ConsolePanel = ;...{ return <View style=stylescontainer> ... <TouchableHighlight style=stylesbtn 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__
flagdisplayIgnoreDevVariable()
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:ReactPropTypesnumber//message limit number open:ReactPropTypesbool//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!