react-native-json-tree

React Native JSON Viewer Component, based on react-json-tree. Supports iterable objects, such as Immutable.js.

Usage

import JSONTree from 'react-native-json-tree'
// If you're using Immutable.js: `npm i --save immutable`
import { Map } from 'immutable'

// Inside a React component:
const json = {
  array: [1, 2, 3],
  bool: true,
  object: {
    foo: 'bar'
  }
  immutable: Map({ key: 'value' })
}

<JSONTree data={json} />

Result:

Check out the Example directory.

Advanced Customization

<JSONTree data={data} theme={{
  extend: theme,
  // underline keys for literal values
  valueLabel: {
    textDecoration: 'underline'
  },
  // switch key for objects to uppercase when object is expanded.
  // `nestedNodeLabel` receives additional arguments `expanded` and `keyPath`
  nestedNodeLabel: ({ style }, nodeType, expanded) => ({
    style: {
      ...style,
      textTransform: expanded ? 'uppercase' : style.textTransform
    }
  })
}} />

Customize Labels for Arrays, Objects, and Iterables

You can pass getItemString to customize the way arrays, objects, and iterable nodes are displayed (optional).

By default, it'll be:

<JSONTree getItemString={(type, data, itemType, itemString) =>
  <Text>{itemType} {itemString}</Text>}
/>

But if you pass the following:

const getItemString = (type, data, itemType, itemString) =>
  <Text>{type}</Text>;

Then the preview of child elements now look like this:

Customize Rendering

You can pass the following properties to customize rendered labels and values:

<JSONTree
  labelRenderer={raw => <Text style={{ fontWeight: 'bold' }}>{raw}</Text>}
  valueRenderer={raw => <Text style={{ fontStyle: 'italic' }}>{raw}</Text>}
/>

In this example the label and value will be rendered with bold and italic text respectively.

For labelRenderer, you can provide a full path - see this PR.

More Options

shouldExpandNode: (keyName, data, level) => boolean - determines if node should be expanded (root is expanded by default)
hideRoot: boolean - if true, the root node is hidden.
sortObjectKeys: boolean | (a, b) => number - sorts object keys with compare function (optional). Isn't applied to iterable maps like Immutable.Map.

Credits

alexkuz for react-json-tree

License

MIT

wisnuprama / react-native-json-tree