├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── demo.gif ├── example ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── demo.js ├── index.android.js ├── index.ios.js └── package.json ├── index.js ├── keep-yellowbox └── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | .idea 28 | .gradle 29 | local.properties 30 | 31 | # node.js 32 | # 33 | node_modules/ 34 | npm-debug.log 35 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 20 | .grunt 21 | 22 | # node-waf configuration 23 | .lock-wscript 24 | 25 | # Compiled binary addons (http://nodejs.org/api/addons.html) 26 | build/Release 27 | 28 | # Dependency directory 29 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 30 | node_modules 31 | example 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | 294 | Copyright (C) 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | , 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Console Panel 2 | A Simple debug panel component to view console message right inside the app. 3 | This will be helpful during your react native development. 4 | This is a pure react native component ,you can use it in both ios and android . 5 | 6 | **Xcode / Android Studio is not a must for React Native app development.** 7 | RN developers can simplify tool chain with this component when coding javascript only. 8 | 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. 9 | 10 | ## Usage 11 | ### Install from npm : 12 | `npm install --save react-native-console-panel` 13 | 14 | ### Integrate into your app: 15 | 16 | ```javascript 17 | //import the component 18 | var ConsolePanel = require('react-native-console-panel').displayWhenDev(); 19 | ... 20 | render:function(){ 21 | return ( 22 | 23 | ... 24 | 25 | 26 | Hit me! 27 | 28 | 29 | 30 | //Panel will float above your content 31 | //use top,left to control panel's position 32 | {ConsolePanel} 33 | 34 | ); 35 | ``` 36 | * `displayWhenDev()` will return the component or null accroding `__DEV__` flag 37 | * `displayIgnoreDevVariable()` ignore `__DEV__` variable 38 | 39 | ### Yellowbox 40 | The react-native add a 'Yellowbox' in **v0.16(not release yet)** for showing warn/error messages.**This module disable that by default**. 41 | If you want to keep both yellowbox and console ,you should import like this `require('react-native-console-panel/keep-yellowbox')`. 42 | 43 | Now, when you use 'console' to print something , it will be like this: 44 | ![screenshot](https://github.com/sospartan/react-native-console-panel/raw/master/demo.gif ) 45 | 46 | ### Avaiable props: 47 | 48 | ```javascript 49 | propTypes:{ 50 | limit:React.PropTypes.number,//message limit number 51 | open:React.PropTypes.bool,//is open when mounted 52 | } 53 | ``` 54 | 55 | ## TO-DOs 56 | * Count unread log when panel is closing 57 | * 'clear' button 58 | * System infomation shapshot 59 | * Better looking? 60 | * ... 61 | 62 | **I'm new to Javascript .So any pull request is welcomed!** 63 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeSH/react-native-console-panel/c1535512cc64e3a98aaed8ba3bcf51816b06f604/demo.gif -------------------------------------------------------------------------------- /example/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.web.js 5 | .*/*.android.js 6 | 7 | # Some modules have their own node_modules with overlap 8 | .*/node_modules/node-haste/.* 9 | 10 | # Ignore react-tools where there are overlaps, but don't ignore anything that 11 | # react-native relies on 12 | .*/node_modules/react-tools/src/React.js 13 | .*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js 14 | .*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js 15 | .*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js 16 | 17 | # Ignore commoner tests 18 | .*/node_modules/commoner/test/.* 19 | 20 | # See https://github.com/facebook/flow/issues/442 21 | .*/react-tools/node_modules/commoner/lib/reader.js 22 | 23 | # Ignore jest 24 | .*/node_modules/jest-cli/.* 25 | 26 | # Ignore Website 27 | .*/website/.* 28 | 29 | [include] 30 | 31 | [libs] 32 | node_modules/react-native/Libraries/react-native/react-native-interface.js 33 | 34 | [options] 35 | module.system=haste 36 | 37 | munge_underscores=true 38 | 39 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 40 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub' 41 | 42 | suppress_type=$FlowIssue 43 | suppress_type=$FlowFixMe 44 | suppress_type=$FixMe 45 | 46 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-7]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 47 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-7]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+ 48 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 49 | 50 | [version] 51 | 0.17.0 52 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | .idea 28 | .gradle 29 | local.properties 30 | 31 | # node.js 32 | # 33 | node_modules/ 34 | npm-debug.log 35 | 36 | #no need for native project 37 | android 38 | ios 39 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Base On Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | TouchableHighlight, 14 | } = React; 15 | 16 | var ConsolePanel = require('react-native-console-panel').displayWhenDev(); 17 | 18 | 19 | var consolepanel = React.createClass({ 20 | componentWillMount:()=>{ 21 | console.log('componentWillMount'); 22 | }, 23 | _onPressButton:()=>{ 24 | var r = Math.round(Math.random()*10/2); 25 | switch(r){ 26 | case 0: 27 | console.log('Button Hit!'); 28 | break; 29 | case 1: 30 | console.warn('Button Hit!'); 31 | break; 32 | case 2: 33 | console.error('Button Hit!'); 34 | break; 35 | default: 36 | console.info('Button Hit!'); 37 | break; 38 | } 39 | }, 40 | render: function() { 41 | return ( 42 | 43 | 44 | Welcome to React Native! 45 | 46 | 47 | To get started, edit index.android.js 48 | 49 | 50 | Shake or press menu button for dev menu 51 | 52 | 53 | 54 | Hit me! 55 | 56 | 57 | {ConsolePanel} 58 | 59 | ); 60 | } 61 | }); 62 | 63 | var styles = StyleSheet.create({ 64 | container: { 65 | flex: 1, 66 | justifyContent: 'center', 67 | alignItems: 'center', 68 | backgroundColor: '#F5FCFF', 69 | }, 70 | welcome: { 71 | fontSize: 20, 72 | textAlign: 'center', 73 | margin: 10, 74 | }, 75 | instructions: { 76 | textAlign: 'center', 77 | color: '#333333', 78 | marginBottom: 5, 79 | }, 80 | btn:{ 81 | width:100, 82 | height:50, 83 | backgroundColor:'grey', 84 | alignItems:'center', 85 | justifyContent:'center' 86 | } 87 | }); 88 | 89 | AppRegistry.registerComponent('consolepanel', () => consolepanel); 90 | -------------------------------------------------------------------------------- /example/index.android.js: -------------------------------------------------------------------------------- 1 | require('./demo'); -------------------------------------------------------------------------------- /example/index.ios.js: -------------------------------------------------------------------------------- 1 | require('./demo.js') -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "console-panel-example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node_modules/react-native/packager/packager.sh" 7 | }, 8 | "dependencies": { 9 | "react-native": "^0.14.2", 10 | "react-native-console-panel": "file:.." 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * index.js 3 | * Copyright (c) 2015 Alibaba Group Holding Limited 4 | * Authors: 5 | * sospartan (https://github.com/sospartan) 6 | * 7 | * This file is part of react native console panel. 8 | * 9 | * react native console panel is free software: you can redistribute it and/or modify 10 | * it under the terms of the GNU General Public License as published by 11 | * the Free Software Foundation, either version 3 of the License, or 12 | * (at your option) any later version. 13 | * 14 | * react native console panel is distributed in the hope that it will be useful, 15 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 16 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 17 | * GNU General Public License for more details. 18 | * 19 | * You should have received a copy of the GNU General Public License 20 | * along with react native console panel. If not, see . 21 | */ 22 | 23 | /** 24 | * Created by sospartan on 11/18/15. 25 | */ 26 | 27 | 'use strict'; 28 | 29 | var React = require("react"); 30 | var ReactNative = require("react-native"); 31 | var createReactClass = require('create-react-class'); 32 | var PropTypes = require('prop-types'); 33 | var { 34 | View, 35 | Text, 36 | StyleSheet, 37 | PanResponder, 38 | TouchableWithoutFeedback, 39 | Dimensions 40 | } = ReactNative; 41 | 42 | const PANEL_BACKGROUND = 'rgba(51,72,94,0.7)'; 43 | const PANEL_BACKGROUND_SELECTED = 'rgba(51,72,94,0.95)'; 44 | 45 | 46 | var styles = StyleSheet.create({ 47 | container:{ 48 | top: 23, 49 | left: 0, 50 | right: 0, 51 | width: Dimensions.get('window').width, 52 | position:'absolute', 53 | backgroundColor:PANEL_BACKGROUND, 54 | }, 55 | bar:{ 56 | backgroundColor:'rgba(128,128,128,0.4)', 57 | }, 58 | barText:{ 59 | fontSize:12, 60 | color:'white', 61 | marginLeft:6, 62 | }, 63 | bottomBarBtnText:{ 64 | color:'white', 65 | fontSize:10, 66 | alignSelf:'flex-end', 67 | }, 68 | btn:{ 69 | position:'absolute', 70 | right:0, 71 | top:0, 72 | backgroundColor:'black', 73 | }, 74 | btnText:{ 75 | fontSize:12, 76 | color:'white', 77 | }, 78 | content:{ 79 | padding:2, 80 | }, 81 | contentText:{ 82 | fontSize:11 83 | }, 84 | log:{ 85 | color:'lime', 86 | }, 87 | info:{ 88 | color:'white' 89 | }, 90 | warn:{ 91 | color:'#ffdab9', 92 | }, 93 | error:{ 94 | color:'tomato', 95 | }, 96 | touchOverlay:{ 97 | position:'absolute', 98 | top:0, 99 | bottom:0, 100 | left:0, 101 | right:0, 102 | backgroundColor:'transparent' 103 | } 104 | }); 105 | 106 | var ConsolePanel = createReactClass({ 107 | propTypes:{ 108 | limit:PropTypes.number, 109 | open:PropTypes.bool, 110 | }, 111 | getDefaultProps:()=>{ 112 | return { 113 | limit:10, 114 | open:true, 115 | }; 116 | }, 117 | getInitialState:function(){ 118 | return { 119 | dataSource:[], 120 | isOpen:this.props.open, 121 | unreadCount:0, 122 | }; 123 | }, 124 | _pickStyle:(level)=>{ 125 | switch(level){ 126 | case 'warn': 127 | return styles.warn; 128 | case 'error': 129 | return styles.error; 130 | case 'info': 131 | return styles.info; 132 | case 'log': 133 | return styles.log; 134 | default: 135 | return null; 136 | } 137 | }, 138 | _panResponder:{}, 139 | panel:null, 140 | panelStyle:{left:0,top:0}, 141 | _onStartShouldSetPanResponder: function(evt,gestureState){ 142 | return true; 143 | }, 144 | _onMoveShouldSetPanResponder: function(evt,gestureState){ 145 | return true; 146 | }, 147 | _onPanResponderGrant: function(evt,gestureState){ 148 | this.panel.setNativeProps({style:{backgroundColor:PANEL_BACKGROUND_SELECTED}}); 149 | }, 150 | _onPanResponderMove: function(evt,gestureState){ 151 | this.panel.setNativeProps({style:{left:this.panelStyle.left+gestureState.dx,top:this.panelStyle.top+gestureState.dy}}); 152 | }, 153 | _resetPosition:function(){ 154 | this.panelStyle.left = 0; 155 | this.panelStyle.top = 0; 156 | this.panel.setNativeProps({style:{left:0,top:0}}); 157 | }, 158 | _onPanResponderEnd:function(evt,gestureState){ 159 | this.panelStyle.left += gestureState.dx; 160 | this.panelStyle.top += gestureState.dy; 161 | this.panel.setNativeProps({style:{backgroundColor:PANEL_BACKGROUND}}); 162 | }, 163 | componentWillMount:function(){ 164 | if(!global.consolePanelStack){ 165 | _setup(global,false); 166 | } 167 | 168 | this._panResponder = PanResponder.create({ 169 | onStartShouldSetPanResponder: this._onStartShouldSetPanResponder, 170 | onMoveShouldSetPanResponder: this._onMoveShouldSetPanResponder, 171 | onPanResponderGrant: this._onPanResponderGrant, 172 | onPanResponderMove: this._onPanResponderMove, 173 | onPanResponderRelease: this._onPanResponderEnd, 174 | onPanResponderTerminate: this._onPanResponderEnd, 175 | }); 176 | }, 177 | componentDidMount:function(){ 178 | consolePanelStack.bindUpdateListener(()=>{ 179 | this.setState({ 180 | dataSource:consolePanelStack.getData(this.props.limit), 181 | unreadCount:consolePanelStack.getUnreadCount() 182 | }); 183 | }); 184 | this.panelStyle.left = (this.panel.props && this.panel.props.style[1]) ? this.panel.props.style[1].left : 10; 185 | this.panelStyle.top = (this.panel.props && this.panel.props.style[1]) ? this.panel.props.style[1].top : 10; 186 | }, 187 | _clearAll:function(){ 188 | consolePanelStack.clear(); 189 | if(this.panelStyle.left<0||this.panelStyle.top<0){ 190 | this._resetPosition(); 191 | } 192 | }, 193 | render:function(){ 194 | var content = []; 195 | if(this.state.isOpen) { 196 | this.state.dataSource.forEach((row,i)=>{ 197 | content.push({row.text}); 198 | }); 199 | if (this.state.dataSource.length < 3) { 200 | content.push({String('\n'.repeat(3 - this.state.dataSource.length))}); 202 | } 203 | } 204 | return ( 205 | this.panel=ref} 207 | {...this.props} style={[styles.container,this.props.style]} > 208 | 209 | Console{this.state.unreadCount>0?'('+this.state.unreadCount+')':null} 210 | 211 | {this.state.isOpen? 212 | 213 | {content} 214 | :null} 215 | 216 | {this.state.isOpen? 217 | 218 | clear 219 | 220 | :null} 221 | 222 | { 223 | consolePanelStack.enableUnreadCount(this.state.isOpen); 224 | consolePanelStack.resetUnreadCount(); 225 | this.setState({ 226 | isOpen:!this.state.isOpen, 227 | unreadCount:0 228 | }); 229 | } 230 | }> 231 | {this.state.isOpen?'close':' open'} 232 | 233 | 234 | 235 | ); 236 | } 237 | }); 238 | 239 | 240 | var _setup = function(_global,_keepYellowBox) { 241 | (function (global, keepYellowBox) { 242 | var ConsoleStack = function (limit:number) { 243 | this.limit = limit; 244 | this.data = []; 245 | this.listeners = []; 246 | this.waiting = false; 247 | this.unreadEnabled = false; 248 | this.unreadCount = 0; 249 | } 250 | 251 | function formatter(len){ 252 | return (input)=> { 253 | var str = String(input); 254 | var strLen = str.length; 255 | return '0'.repeat(len - strLen) + input; 256 | } 257 | } 258 | 259 | function timestamp() { 260 | var d = new Date(); 261 | let f2 = formatter(2); 262 | return f2(d.getHours()) 263 | + ':' + f2(d.getMinutes()) 264 | + ':' + f2(d.getSeconds()) 265 | + '.' + formatter(3)(d.getMilliseconds()); 266 | } 267 | 268 | ConsoleStack.prototype.clear = function () { 269 | this.data.splice(0, this.data.length); 270 | this.notifyListeners(); 271 | } 272 | 273 | ConsoleStack.prototype.notifyListeners = function () { 274 | if (this.waiting) { 275 | return; 276 | } 277 | this.timeout = setTimeout(()=> { 278 | this.listeners.forEach((callback)=>{ 279 | callback(); 280 | clearTimeout(this.timeout); 281 | this.waiting = false; 282 | }); 283 | }, 500); 284 | this.waiting = true; 285 | } 286 | 287 | ConsoleStack.prototype.add = function (type, obj) { 288 | var raw = timestamp() + '(' + type.substr(0, 1).toUpperCase() + '):' + limitString(formatToString(obj),2,150); 289 | if (this.data.unshift({level: type, text: raw}) > this.limit) { 290 | this.data.pop; 291 | } 292 | this.notifyListeners(); 293 | if (this.unreadEnabled) { 294 | this.unreadCount++; 295 | } 296 | } 297 | 298 | ConsoleStack.prototype.toString = function () { 299 | return formatToString(this.data); 300 | } 301 | 302 | ConsoleStack.prototype.getData = function (limit) { 303 | return this.data.slice(0, limit); 304 | } 305 | 306 | ConsoleStack.prototype.bindUpdateListener = function (callback) { 307 | this.listeners.push(callback); 308 | } 309 | 310 | ConsoleStack.prototype.getUnreadCount = function () { 311 | return this.unreadCount; 312 | } 313 | 314 | ConsoleStack.prototype.enableUnreadCount = function (enable) { 315 | this.unreadEnabled = enable; 316 | } 317 | 318 | ConsoleStack.prototype.resetUnreadCount = function () { 319 | this.unreadCount = 0; 320 | } 321 | 322 | function limitString(input,lineLimit,charLimit){ 323 | let changed = input.length>charLimit; 324 | input = input.substr(0,charLimit); 325 | let lines = input.split('\n'); 326 | if(lines.length>lineLimit){ 327 | changed = true; 328 | lines.splice(lineLimit,lines.length-lineLimit); 329 | } 330 | let newContent = lines.join('\n'); 331 | return newContent+(changed?'...':''); 332 | } 333 | 334 | 335 | function formatToString(obj) { 336 | 337 | if (obj === null || obj === undefined || typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || typeof obj === 'function') { 338 | return '"' + String(obj) + '"'; 339 | } else if (obj instanceof Date) { 340 | return 'Date(' + obj.toISOString() + ')'; 341 | } else if (Array.isArray(obj)) { 342 | return 'Array(' + obj.length + ')[' + obj.map((elem)=>formatToString(elem)) + ']'; 343 | } else if (obj.toString) { 344 | return 'object{' + obj.toString() + '}'; 345 | } else { 346 | return 'unknown data'; 347 | } 348 | } 349 | 350 | 351 | function proxyStockConsole(console, consoleStack, keepYellow) { 352 | //disable yellowbox added in v0.16 353 | if (keepYellow === false ) { 354 | console.disableYellowBox = true; 355 | } 356 | 357 | const methods = ['log','error','warn','info']; 358 | methods.forEach((method)=>{ 359 | var f = console[method]; 360 | console['_'+method] = f; 361 | console[method] = function(){ 362 | consoleStack.add(method, arguments[0]); 363 | f.apply(console, arguments) 364 | } 365 | }); 366 | } 367 | 368 | if (!global.consolePanelStack) { 369 | let consolePanelStack = new ConsoleStack(50); 370 | global.consolePanelStack = consolePanelStack; 371 | proxyStockConsole(global.console, consolePanelStack, keepYellowBox); 372 | } 373 | })(_global, _keepYellowBox); 374 | }; 375 | 376 | 377 | 378 | 379 | module.exports = { 380 | keepYellowbox:()=>{ 381 | _setup(window,true); 382 | return { 383 | Panel:ConsolePanel, 384 | displayWhenDev:()=>__DEV__?:null, 385 | displayIgnoreDevVariable:()=> 386 | }; 387 | }, 388 | Panel:ConsolePanel, 389 | displayWhenDev:()=>{ 390 | _setup(window,false); 391 | return __DEV__?:null; 392 | }, 393 | displayIgnoreDevVariable:()=>{ 394 | _setup(window,false); 395 | return 396 | }, 397 | }; 398 | -------------------------------------------------------------------------------- /keep-yellowbox/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by sospartan on 11/24/15. 3 | */ 4 | 5 | 'use strict'; 6 | 7 | module.exports = require("../").keepYellowbox(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-console-panel", 3 | "version": "0.1.0", 4 | "description": "react native component for display console messages. ", 5 | "main": "index.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/NativeSH/react-native-console-panel" 12 | }, 13 | "keywords": [ 14 | "react-component", 15 | "react-native", 16 | "ios", 17 | "android", 18 | "console", 19 | "debug panel" 20 | ], 21 | "author": "sospartan@gmail.com", 22 | "license": "GPLv2", 23 | "dependencies": { 24 | "create-react-class": "^15.6.3", 25 | "prop-types": "^15.7.2" 26 | } 27 | } 28 | --------------------------------------------------------------------------------