React Native Diffs

Diff library for React Native, powered by MarkdownView.

Installation

npm install react-native-diffs react-native-nitro-modules

Usage

import { DiffsView } from 'react-native-diffs';

const diff = `\`\`\`diff
@@ -11,7 +11,7 @@ export default function Home() {
 <div>
-  <h2>Design Engineer</h2>
+  <h2>Designer</h2>
 </div>
\`\`\``;

export default function App() {
  return (
    <DiffsView
      content={diff}
      colorScheme="dark"
      style={{ flex: 1 }}
    />
  );
}

Diff formats

Content can be a fenced ```diff ``` or ```patch ``` code block, or a raw unified diff string — MarkdownView auto-detects and renders it as a styled diff view with hunk headers, line numbers, and inline change highlighting.

You can also include multiple fenced diff blocks in a single content string to render them all in one scrollable view.

Examples

Custom dark theme

import { DiffsView, type Theme } from 'react-native-diffs';

const theme: Theme = {
  fonts: {
    codeSize: 15,
  },
  colors: {
    body: '#E1E2E5',
    code: '#D4D4D8',
    codeBackground: '#18181B',
    highlight: '#60A5FA',
    emphasis: '#A1A1AA',
    selectionTint: '#34D399',
  },
  diff: {
    displayMode: 'unified',
    changeHighlightStyle: 'both',
    backgroundColor: '#000000',
    gutterBackground: '#0A0A0A',
    gutterText: '#52525B',
    addedLineBackground: '#22C55E33',
    removedLineBackground: '#DC262620',
    addedHighlightBackground: '#4ADE8066',
    removedHighlightBackground: '#DC262650',
    hunkHeaderBackground: '#27272A',
    hunkHeaderText: '#71717A',
    separatorColor: '#27272A',
    borderWidth: 0,
  },
};

<DiffsView
  content={diff}
  colorScheme="dark"
  showsBlockHeaders={false}
  theme={theme}
  style={{ flex: 1, backgroundColor: '#000000' }}
/>

Props

Prop	Type	Required	Description
`content`	`string`	Yes	Markdown or diff content to render
`colorScheme`	`string`	Yes	Color scheme (`"dark"` or `"light"`)
`contentInset`	`ContentInset`	No	Scroll view content inset `{ top, bottom }`
`showsBlockHeaders`	`boolean`	No	Show code/diff block headers with copy button (default `true`)
`theme`	`Theme`	No	Custom theme configuration
`customMenuItems`	`CustomMenuItem[]`	No	Extra items appended to the text-selection menu on code/diff blocks
`onCustomMenuAction`	`(event: CustomMenuEvent) => void`	No	Fires when a custom menu item is tapped. Must be wrapped as `{ f: handler }` (see below)
`onLineSelection`	`(info?: LineSelectionInfo) => void`	No	Enables line selection mode; fires continuously as the user drags. Wrap as `{ f: handler }`
`onLineSelectionEnd`	`(info?: LineSelectionInfo) => void`	No	Fires once when the selection gesture settles (tap release / drag release). Wrap as `{ f: handler }`. Setting only this still enables line selection.

Callback wrapping

Nitro view-prop callbacks cross the bridge as a reference-tracked wrapper, so functions must be passed as { f: handler } rather than bare functions:

<DiffsView
  onCustomMenuAction={{ f: (event) => console.log(event) }}
  onLineSelectionEnd={{ f: (info) => console.log(info) }}
/>

Custom menu items

Long-press a code or diff block to bring up the text-selection menu. Items in customMenuItems are appended after the system actions (Copy, Select All, Share). systemImage accepts any SF Symbol name.

<DiffsView
  content={content}
  customMenuItems={[
    { id: 'explain', title: 'Explain', systemImage: 'lightbulb' },
    { id: 'apply', title: 'Apply', systemImage: 'checkmark.circle' },
  ]}
  onCustomMenuAction={{
    f: ({ itemId, text, startLine, endLine }) => {
      console.log(itemId, text, startLine, endLine);
    },
  }}
/>

Line selection

Providing onLineSelection or onLineSelectionEnd switches code and diff blocks from text selection to line selection: tap to select a single line, or long-press-and-drag to select a range.

onLineSelection fires on every range change — use it for live visual feedback.
onLineSelectionEnd fires exactly once per interaction, when the user lifts their finger — use it for actions like showing a contextual button. You can set it on its own.

Customize the highlight with theme.colors.lineSelectionBackground.

<DiffsView
  content={content}
  theme={{ colors: { lineSelectionBackground: '#60A5FA33' } }}
  onLineSelectionEnd={{
    f: (info) => {
      if (!info) return;
      console.log(`lines ${info.startLine}-${info.endLine}`, info.contents);
    },
  }}
/>

Theming

Pass a theme prop to customize the appearance. All fields are optional — only override what you need. Colors are hex strings with optional alpha (e.g. "#FF0000" or "#FF000080"). Colors are rendered in the Display P3 color space for wider gamut on supported devices.

Theme Structure

`ThemeFonts`

Property	Type	Description
`bodySize`	`number`	Body text font size
`codeSize`	`number`	Code block font size
`codeInlineSize`	`number`	Inline code font size
`titleSize`	`number`	Title font size
`largeTitleSize`	`number`	Large title font size
`footnoteSize`	`number`	Footnote font size

`ThemeColors`

Property	Type	Description
`body`	`string`	Main text color
`highlight`	`string`	Highlight/accent color
`emphasis`	`string`	Emphasis color
`code`	`string`	Code text color
`codeBackground`	`string`	Code block background color
`selectionTint`	`string`	Text selection tint color
`selectionBackground`	`string`	Text selection fill. Defaults to `selectionTint` at 20% alpha
`lineSelectionBackground`	`string`	Highlight color used in line selection mode

`ThemeSpacings`

Property	Type	Description
`final`	`number`	Final spacing (default `16`)
`general`	`number`	General inter-block spacing (default `8`)
`list`	`number`	List item spacing (default `8`)
`cell`	`number`	Cell spacing (default `32`)

`ThemeSizes`

Property	Type	Description
`bullet`	`number`	Bullet point size (default `4`)

`ThemeTable`

Property	Type	Description
`cornerRadius`	`number`	Table corner radius (default `8`)
`borderWidth`	`number`	Table border width (default `1`)
`borderColor`	`string`	Border color
`headerBackgroundColor`	`string`	Table header background
`cellBackgroundColor`	`string`	Cell background
`stripeCellBackgroundColor`	`string`	Alternating row background

`ThemeImage`

Property	Type	Description
`cornerRadius`	`number`	Image corner radius (default `4`)
`maxWidthFraction`	`number`	Max width as fraction of container (default `1.0`)
`placeholderColor`	`string`	Loading placeholder color

`ThemeDiff`

Property	Type	Description
`displayMode`	`DiffDisplayMode`	`'unified'` or `'sideBySide'`
`scrollBehavior`	`DiffScrollBehavior`	`'horizontalOnly'` or `'bothAxes'`
`changeHighlightStyle`	`DiffChangeHighlightStyle`	`'lineOnly'`, `'inlineOnly'`, or `'both'`
`lineNumberStyle`	`DiffLineNumberStyle`	`'dual'` (separate old/new columns, default) or `'single'` (unified column). Unified mode only
`showsChangeMarkers`	`boolean`	Show the `+`/`−` gutter column (default `true`). Combine `'single'` + `false` for a minimal gutter
`contextCollapseThreshold`	`number`	Lines before context is collapsed (default `8`)
`visibleContextLines`	`number`	Visible context lines around changes (default `2`)
`gutterBackground`	`string`	Gutter background color
`gutterText`	`string`	Gutter text color
`backgroundColor`	`string`	Overall diff background
`addedLineBackground`	`string`	Added line row color
`removedLineBackground`	`string`	Removed line row color
`addedHighlightBackground`	`string`	Word-level added highlight
`removedHighlightBackground`	`string`	Word-level removed highlight
`hunkHeaderBackground`	`string`	Hunk header background
`hunkHeaderText`	`string`	Hunk header text color
`fileHeaderBackground`	`string`	File header background
`fileHeaderText`	`string`	File header text color
`fileMetadataText`	`string`	File metadata text color
`separatorColor`	`string`	Separator color
`borderWidth`	`number`	Diff border width (set `0` to remove)
`borderColor`	`string`	Diff border color

Contributing

License

MIT

vercel-labs/react-native-diffs

README