{"id":21678699,"url":"https://github.com/nsisodiya/react-native-state-viewer","last_synced_at":"2026-03-07T23:31:56.315Z","repository":{"id":142533935,"uuid":"92842215","full_name":"nsisodiya/react-native-state-viewer","owner":"nsisodiya","description":"View component State in tabular format. Simple debugger tool for React Native. Can be used any kind of App (Mobile/Desktop).","archived":false,"fork":false,"pushed_at":"2017-06-01T09:07:15.000Z","size":266,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T05:37:08.018Z","etag":null,"topics":["debugging-tool","json","react-native","reactjs","state"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nsisodiya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-30T14:34:35.000Z","updated_at":"2024-01-02T03:01:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba3ac492-df9c-4e83-831e-3f6635733774","html_url":"https://github.com/nsisodiya/react-native-state-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nsisodiya/react-native-state-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsisodiya%2Freact-native-state-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsisodiya%2Freact-native-state-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsisodiya%2Freact-native-state-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsisodiya%2Freact-native-state-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nsisodiya","download_url":"https://codeload.github.com/nsisodiya/react-native-state-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsisodiya%2Freact-native-state-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30237329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T23:24:20.706Z","status":"ssl_error","status_checked_at":"2026-03-07T23:21:10.486Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debugging-tool","json","react-native","reactjs","state"],"created_at":"2024-11-25T14:40:14.302Z","updated_at":"2026-03-07T23:31:56.270Z","avatar_url":"https://github.com/nsisodiya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-state-viewer\nThis is a debugger tool designed for debug react native apps. But It can be used to debug \"State\" of any kind app.\nYes, Any kind of app/project (desktop/mobile) etc.\n# What exactly is this?\n\nCheck the following image. Image show debugging (viewing) state of a component of a react-native app.\n\n![https://media.giphy.com/media/l0IykD4Qlupu1FxpC/giphy.gif](https://media.giphy.com/media/l0IykD4Qlupu1FxpC/giphy.gif)\n\nBasically, Whenever your component \"re-render\", It will send current \"this.state\" to this server. which will convert this JSON into a tabular format.\n\nThis is a sample usecase, This tool can be used in various ways.\n# How to use this project\n## Start State Viewer\n```\ngit clone https://github.com/nsisodiya/react-native-state-viewer.git\ncd react-native-state-viewer\nyarn install\ncd client\nyarn install\ncd ..\nyarn start\n```\n\nNow open `http://localhost:12473/`\nYou can now send State (basically JSON) from anywhere.\n## Post State from command line\n\nOpen terminal and run following command.\n```\ncurl -H \"Content-Type: application/json\" -X POST -d '{\"count\":\"30\",\"city\":\"London\"}' http://localhost:12473/stateUpdate\ncurl -H \"Content-Type: application/json\" -X POST -d '{\"count\":\"40\",\"city\":\"Delhi\"}' http://localhost:12473/stateUpdate\n```\n\n## Post State from ReactNative App\n\nCopy paste following code.\nCreate a file called postStateUpdate.js\n```\nexport default function postStateUpdate(target, name, descriptor) {\n  const oldFunction = descriptor.value;\n  descriptor.value = function propsInjectorFunction() {\n    try {\n      fetch(\"http://192.168.1.3:12473/stateUpdate\", {\n        credentials: \"include\",\n        method: \"POST\",\n        body: JSON.stringify({\n          state: this.state\n        }),\n        headers: {\n          Accept: \"application/json\",\n          \"Content-Type\": \"application/json\"\n        }\n      }).then(response =\u003e {\n        return response.json();\n      });\n    } catch (err) {\n      /*No need to do anything*/\n    }\n\n    return oldFunction.bind(this)(this.props);\n  };\n  return descriptor;\n}\n```\n\nNow go to react component and add following decorator.\n\n```\nimport React, { Component } from 'react';\nimport { AppRegistry, Text } from 'react-native';\nimport postStateUpdate from './postStateUpdate';\n\nclass HelloWorldApp extends Component {\n  state = {\n    lang: \"JavaScript\",\n    message: \"Hello World\",\n    counter: 10\n  };\n  render() {\n    @postStateUpdate\n    return (\n      \u003cText\u003eHello world!\u003c/Text\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent('HelloWorldApp', () =\u003e HelloWorldApp);\n```\n\n# RoadMap\n\n* I have created this tool in just 1 day. I wanted to debug React Native mobile app.\n* Please fill bugs/improments/ideas.\n* Right now, We are not sending Component Name with StateUpdate. we can modify this tool to have per component State Viewing. Rightnow, It just dump any state update on UI.\n* This can also be used to measure frequency of render function and May be we can store State to have navigation between different states.\n* We can also prepare a Docker image so that installation can be done without headache.\n* This is just a idea. Need community support to enhance it.\n\n# Send Pull Request\n![https://media.giphy.com/media/nlRYDrPQF5cI0/giphy.gif](https://media.giphy.com/media/nlRYDrPQF5cI0/giphy.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsisodiya%2Freact-native-state-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnsisodiya%2Freact-native-state-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsisodiya%2Freact-native-state-viewer/lists"}