react-native-json-view

react-native-json-view

Simple, pure JavaScript formatted JSON view component for React Native.

Installation

npm install react-native-json-view

or

yarn add react-native-json-view

Usage

import JsonView, { JsonThemeName } from 'react-native-json-view';

const sampleData = {
  name: 'John Doe',
  age: 30,
  active: true,
  hobbies: ['reading', 'coding'],
  address: {
    street: '123 Main St',
    city: 'Anytown',
    zip: '12345',
  },
};

export default function App() {
  return (
    <JsonView
      data={sampleData}
      themeName={JsonThemeName.Default}
      fontSize={16}
    />
  );
}

Props

Prop	Type	Default	Description
data	unknown	-	The JSON data to display
themeName	JsonThemeName	-	Predefined theme name (mutually exclusive with theme)
theme	JsonColorTheme	-	Custom color theme (mutually exclusive with themeName)
collapsed	boolean	false	Whether to collapse all nodes by default
onlyCollapseRoot	boolean	false	Whether to only allow collapsing the root node
fontSize	number	14	Font size for the JSON text
indent	number	2	Number of spaces for indentation

All other ScrollView props are also supported.

Themes

The component comes with several built-in themes:

• JsonThemeName.Default - Clean default theme
• JsonThemeName.Monokai - Monokai editor theme
• JsonThemeName.Solarized - Solarized color scheme
• JsonThemeName.Github - GitHub's syntax highlighting
• JsonThemeName.Nord - Nord color palette
• JsonThemeName.Dracula - Dracula theme
• JsonThemeName.OneDark - One Dark Pro theme
• JsonThemeName.Catppuccin - Catppuccin theme
• JsonThemeName.TokyoNight - Tokyo Night theme

Each theme supports both light and dark variants.

Custom Theme

You can also provide a custom theme:

const customTheme = {
  light: {
    null: '#ff0000',
    boolean: '#00ff00',
    number: '#0000ff',
    string: '#ff00ff',
    key: '#00ffff',
    bracket: '#888888',
    meta: '#aaaaaa',
    undefined: '#cccccc',
    background: '#ffffff',
  },
  dark: {
    // ... dark variant
  },
};

<JsonView data={data} theme={customTheme} />;

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library