{"id":18927508,"url":"https://github.com/jakemmarsh/react-native-diff-view","last_synced_at":"2025-06-17T11:39:31.625Z","repository":{"id":41766804,"uuid":"213674303","full_name":"jakemmarsh/react-native-diff-view","owner":"jakemmarsh","description":"A React Native module for parsing and displaying git diffs.","archived":false,"fork":false,"pushed_at":"2022-12-10T04:57:30.000Z","size":1099,"stargazers_count":16,"open_issues_count":17,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-24T11:28:19.019Z","etag":null,"topics":["git","git-diff","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/jakemmarsh.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}},"created_at":"2019-10-08T14:58:02.000Z","updated_at":"2024-03-20T08:03:20.000Z","dependencies_parsed_at":"2023-01-25T20:45:31.274Z","dependency_job_id":null,"html_url":"https://github.com/jakemmarsh/react-native-diff-view","commit_stats":null,"previous_names":["monolist/react-native-diff-view"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jakemmarsh/react-native-diff-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakemmarsh%2Freact-native-diff-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakemmarsh%2Freact-native-diff-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakemmarsh%2Freact-native-diff-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakemmarsh%2Freact-native-diff-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jakemmarsh","download_url":"https://codeload.github.com/jakemmarsh/react-native-diff-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakemmarsh%2Freact-native-diff-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260350617,"owners_count":22995780,"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":["git","git-diff","react","react-native"],"created_at":"2024-11-08T11:19:23.204Z","updated_at":"2025-06-17T11:39:26.615Z","avatar_url":"https://github.com/jakemmarsh.png","language":"TypeScript","readme":"# react-native-diff-view [![Build Status](https://travis-ci.org/jakemmarsh/react-native-diff-view.svg?branch=master)](https://travis-ci.org/jakemmarsh/react-native-diff-view) ![David](https://img.shields.io/david/jakemmarsh/react-native-diff-view)\n\nA React Native module for parsing and displaying git diffs. This library was heavily inspired by, and borrows code from, [react-diff-view](https://github.com/otakustay/react-diff-view).\n\n## Overview\n\nThe purpose of this library is to parse and render a unified diff view for any provided diff(s). The flexible widget system also allows for rendering of custom elements on a per-line (or \"change\") basis. The end result will look something like this:\n\n![Example diff with a comment widget](./example.png)\n\n## Getting Started\n\n`npm install --save react-native-diff-view`\n\n## Usage\n\n### Parsing Diffs\n\nThe top-level `parseDiff(diff: string): IFile[]` export is a wrapper around [gitdiff-parser](https://www.npmjs.com/package/gitdiff-parser), but strongly typed\nand with some extra options:\n\n- `nearbySequence: 'zip' | undefined` \u0026mdash; the action to take when nearby sequences are encountered.\n\n### Rendering Diff Hunks\n\nThe top-level `Diff` export is a component to be used for rendering a single diff. Here's a simple example:\n\n```tsx\nimport React from 'react';\nimport { View, ScrollView } from 'react-native';\nimport { parseDiff, Diff, Hunk } from 'react-native-diff-view';\n\nconst App = ({ diffText }) =\u003e {\n    const files = parseDiff(diffText);\n\n    const renderFile = ({ oldRevision, newRevision, type, hunks }) =\u003e (\n      \u003cScrollView key={oldRevision + '-' + newRevision} horizontal={true} bounces={false}\u003e\n        \u003cDiff diffType={type} hunks={hunks}\u003e\n            {(hunks) =\u003e hunks.map((hunk) =\u003e \u003cHunk key={hunk.content} hunk={hunk} /\u003e)}\n        \u003c/Diff\u003e\n      \u003c/ScrollView\u003e\n    );\n\n    return (\n      \u003cView\u003e\n        {files.map(renderFile)}\n      \u003c/View\u003e\n    );\n};\n```\n\n`props.children`, in this case, is a function that takes an array of `IHunk` and returns the rendered element(s). This is optional,\nand if not provided the hunks will be rendered as default `\u003cHunk/ \u003e` components.\n\n### Wrapping Hunks in Decorations\n\nA decoration is a way to wrap a `\u003cHunk /\u003e` component with customized content.\n\nA `\u003cDecoration /\u003e` component is a simple passthrough of `props.children`, which can be either a single element or an array of two:\n\n- A single element: this will be rendered in the entire row.\n- An array containing two elements: The first element will be rendered in gutter position, the second will be rendered in code position.\n\nA very simple use case of `Decoration` is to provide a summary infomation of hunk:\n\n```tsx\nimport React from 'react';\nimport { Diff, Hunk, Decoration } from 'react-native-diff-view';\n\nconst renderHunk = (hunk) =\u003e [\n  \u003cDecoration key={'decoration-' + hunk.content}\u003e\n      {hunk.content}\n  \u003c/Decoration\u003e,\n  \u003cHunk key={'hunk-' + hunk.content}\u003e hunk={hunk} /\u003e,\n];\n\nconst DiffFile = ({ diffType, hunks }) =\u003e (\n  \u003cDiff diffType={diffType}\u003e\n      {hunks.map(renderHunk)}\n  \u003c/Diff\u003e\n);\n```\n\n### Rendering Widgets\n\nAs mentioned above, widgets can be used to render custom element(s) on a per-change, or per-line, basis. These will be rendered\nimmediately below their corresponding line. Only the first match will be rendered.\n\nHere's a basic example that adds a warning on long lines:\n\n```tsx\nimport React from 'react';\nimport { Text } from 'react-native';\nimport { parseDiff, getChangeKey, Diff } from 'react-native-diff-view';\n\nconst getWidgets = (hunks) =\u003e {\n    const changes = hunks.reduce((result, {changes}) =\u003e [...result, ...changes], []);\n    const longLines = changes.filter(({content}) =\u003e content.length \u003e 120);\n\n    return longLines.reduce(\n      (widgets, change) =\u003e {\n        const changeKey = getChangeKey(change);\n\n        return {\n          ...widgets,\n          [changeKey]: \u003cText\u003eLine too long\u003c/Text\u003e\n        };\n      },\n      {},\n    );\n};\n\nconst App = ({diffText}) =\u003e {\n    const files = parseDiff(diffText);\n\n    return (\n        \u003cdiv\u003e\n            {files.map(({hunks}, i) =\u003e \u003cDiff key={i} hunks={hunks} widgets={getWidgets(hunks)} viewType=\"split\" /\u003e)}\n        \u003c/div\u003e\n    );\n};\n```\n\n### Styling\n\nThe following props are supported but optional on the top-level `\u003cDiff /\u003e` component:\n\n- `style: ViewStyle` \u0026mdash; styling to be applied to the top-level `Diff` view.\n- `lineStyle: ViewStyle` \u0026mdash; styling to be applied on each individual change line.\n- `gutterStyle: ViewStyle` \u0026mdash; styling to be applied on the gutter of each individual change.\n- `contentStyle: ViewStyle` \u0026mdash; styling to be applied to the code content of each individual change.\n\n### Events\n\nThe following events are supported but optional on the top-level `\u003cDiff /\u003e` component:\n\n- `onChangePress(change: IChange) =\u003e any` \u0026mdash; if provided, this will be triggered any time a user presses on a specific\nline or change in a diff.\n\n## Contributing\n\n🎊 Thanks for considering contributing! Issue reports and pull requests are always welcome.\n\nTo get started:\n\n1. `git clone https://github.com/jakemmarsh/react-native-diff-view.git`\n2. `cd react-native-diff-view`\n3. `npm install`\n\nTo test your changes before opening a PR:\n\n`npm test`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakemmarsh%2Freact-native-diff-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakemmarsh%2Freact-native-diff-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakemmarsh%2Freact-native-diff-view/lists"}