{"id":16715146,"url":"https://github.com/dean177/react-native-json-tree","last_synced_at":"2025-04-08T09:06:40.653Z","repository":{"id":51342369,"uuid":"65620125","full_name":"Dean177/react-native-json-tree","owner":"Dean177","description":"React Native JSON Viewer Component, based on react-json-tree","archived":false,"fork":false,"pushed_at":"2025-02-04T23:23:27.000Z","size":342,"stargazers_count":120,"open_issues_count":0,"forks_count":32,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-01T07:46:02.470Z","etag":null,"topics":["iterables","json","json-viewer","react","react-native","theme"],"latest_commit_sha":null,"homepage":null,"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/Dean177.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2016-08-13T14:05:37.000Z","updated_at":"2025-02-24T13:52:00.000Z","dependencies_parsed_at":"2024-10-26T21:10:42.457Z","dependency_job_id":"b0baa9e5-17c5-48da-8be3-a1f26377e4e0","html_url":"https://github.com/Dean177/react-native-json-tree","commit_stats":{"total_commits":42,"total_committers":12,"mean_commits":3.5,"dds":0.6190476190476191,"last_synced_commit":"1a766fdcc8c8ef8c96f75fec3fa092ad9c8cfaa1"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Freact-native-json-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Freact-native-json-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Freact-native-json-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Freact-native-json-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dean177","download_url":"https://codeload.github.com/Dean177/react-native-json-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["iterables","json","json-viewer","react","react-native","theme"],"created_at":"2024-10-12T21:08:30.052Z","updated_at":"2025-04-08T09:06:40.632Z","avatar_url":"https://github.com/Dean177.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-json-tree\n\nReact Native JSON Viewer Component, based on [react-json-tree](https://github.com/alexkuz/react-json-tree). Supports [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable) objects, such as [Immutable.js](https://facebook.github.io/immutable-js/).\n\n![](https://img.shields.io/npm/v/react-native-json-tree.svg)\n\n### Usage\n\n```jsx\nimport JSONTree from 'react-native-json-tree'\n// If you're using Immutable.js: `npm i --save immutable`\nimport { Map } from 'immutable'\n\n// Inside a React component:\nconst json = {\n  array: [1, 2, 3],\n  bool: true,\n  object: {\n    foo: 'bar'\n  }\n  immutable: Map({ key: 'value' })\n}\n\n\u003cJSONTree data={json} /\u003e\n```\n\n#### Result:\n\n![](http://cl.ly/image/3f2C2k2t3D0o/screenshot%202015-08-26%20at%2010.24.12%20AM.png)\n\nCheck out the [Example](Example) directory.\n\n### Theming\n\nThis component now uses [react-base16-styling](https://github.com/alexkuz/react-base16-styling) module, which allows to customize component via `theme` property, which can be the following:\n- [base16](http://chriskempson.github.io/base16) theme data. [The example theme data can be found here](https://github.com/gaearon/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes).\n- object that contains style objects, strings (that treated as classnames) or functions. A function is used to extend its first argument `{ style, className }` and should return an object with the same structure. Other arguments depend on particular context (and should be described here). See [createStylingFromTheme.js](https://github.com/alexkuz/react-json-tree/blob/feature-refactor-styling/src/createStylingFromTheme.js) for the list of styling object keys. Also, this object can extend `base16` theme via `extend` property.\n\nEvery theme has a light version, which is enabled with `invertTheme` prop.\n\n```jsx\nconst theme = {\n  scheme: 'monokai',\n  author: 'wimer hazenberg (http://www.monokai.nl)',\n  base00: '#272822',\n  base01: '#383830',\n  base02: '#49483e',\n  base03: '#75715e',\n  base04: '#a59f85',\n  base05: '#f8f8f2',\n  base06: '#f5f4f1',\n  base07: '#f9f8f5',\n  base08: '#f92672',\n  base09: '#fd971f',\n  base0A: '#f4bf75',\n  base0B: '#a6e22e',\n  base0C: '#a1efe4',\n  base0D: '#66d9ef',\n  base0E: '#ae81ff',\n  base0F: '#cc6633'\n};\n\n\u003cJSONTree data={data} theme={theme} invertTheme={false} /\u003e\n\n```\n\n#### Result (Monokai theme, dark background):\n\n![](http://cl.ly/image/330o2L1J3V0h/screenshot%202015-08-26%20at%2010.48.24%20AM.png)\n\n#### Advanced Customization\n\n```jsx\n\u003cJSONTree data={data} theme={{\n  extend: theme,\n  // underline keys for literal values\n  valueLabel: {\n    textDecoration: 'underline'\n  },\n  // switch key for objects to uppercase when object is expanded.\n  // `nestedNodeLabel` receives additional arguments `expanded` and `keyPath`\n  nestedNodeLabel: ({ style }, nodeType, expanded) =\u003e ({\n    style: {\n      ...style,\n      textTransform: expanded ? 'uppercase' : style.textTransform\n    }\n  })\n}} /\u003e\n```\n\n#### Customize Labels for Arrays, Objects, and Iterables\n\nYou can pass `getItemString` to customize the way arrays, objects, and iterable nodes are displayed (optional).\n\nBy default, it'll be:\n\n```jsx\n\u003cJSONTree getItemString={(type, data, itemType, itemString) =\u003e\n  \u003cText\u003e{itemType} {itemString}\u003c/Text\u003e}\n/\u003e\n```\n\nBut if you pass the following:\n\n```jsx\nconst getItemString = (type, data, itemType, itemString) =\u003e\n  \u003cText\u003e{type}\u003c/Text\u003e;\n```\n\nThen the preview of child elements now look like this:\n\n![](http://cl.ly/image/1J1a0b0T0K3c/screenshot%202015-10-07%20at%203.44.31%20PM.png)\n\n#### Customize Rendering\n\nYou can pass the following properties to customize rendered labels and values:\n\n```jsx\n\u003cJSONTree\n  labelRenderer={raw =\u003e \u003cText style={{ fontWeight: 'bold' }}\u003e{raw}\u003c/Text\u003e}\n  valueRenderer={raw =\u003e \u003cText style={{ fontStyle: 'italic' }}\u003e{raw}\u003c/Text\u003e}\n/\u003e\n```\n\nIn this example the label and value will be rendered with bold and italic text respectively.\n\nFor `labelRenderer`, you can provide a full path - [see this PR](https://github.com/alexkuz/react-json-tree/pull/32).\n\n#### More Options\n\n- `shouldExpandNode: (keyName, data, level) =\u003e boolean` - determines if node should be expanded (root is expanded by default)\n- `hideRoot: boolean` - if `true`, the root node is hidden.\n- `sortObjectKeys: boolean | (a, b) =\u003e number` - sorts object keys with compare function (optional). Isn't applied to iterable maps like `Immutable.Map`.\n\n### Credits\n\n- [alexkuz](https://github.com/alexkuz/) for [react-json-tree](https://github.com/alexkuz/react-json-tree)\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean177%2Freact-native-json-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdean177%2Freact-native-json-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean177%2Freact-native-json-tree/lists"}