A native code editor for React Native. It runs its own engine in Kotlin on Android and Swift on iOS, with tree-sitter highlighting and no WebView.

Features

• Tree-sitter highlighting with one npm package per language, fifteen to pick from
• Selection handles, the edit menu, undo and redo, auto indent and auto closing brackets
• Find and replace with literal or regular expression queries and every match painted
• Hardware keyboards, a toolbar API and three themes keyed by capture name
• An editor that follows the keyboard animation frame by frame
• The same engine and the same test vectors on both platforms

Installation

npm install react-native-codepad react-native-nitro-modules react-native-codepad-lang-javascript
cd ios && pod install

Requirements:

• React Native 0.81+ with the New Architecture
• iOS 17+, with platform :ios, '17.0' in the Podfile
• Android 7.0+ (API 24)
• Expo: a development build or npx expo prebuild (Expo Go isn't supported)
• One react-native-codepad-lang-* package for each language you highlight

Usage

import { useRef } from 'react';
import { CodeEditor, type CodeEditorRef, githubDark } from 'react-native-codepad';

const INITIAL = 'export const answer = 42;\n';

export function Screen() {
  const editor = useRef<CodeEditorRef>(null);
  return (
    <CodeEditor
      ref={editor}
      style={{ flex: 1 }}
      initialValue={INITIAL}
      language="javascript"
      theme={githubDark}
      onReady={() => console.log('lines', editor.current?.getLineCount())}
      onChange={(e) => console.log(e.origin, e.start, e.end, e.text)}
    />
  );
}

API

CodeEditor takes the usual View props, plus the ones below. The reference lists every prop, method, event and type.

Props

Prop	Type	Default	Description
initialValue	string	''	Sets the initial text. It is read once, so use setText() to replace the document later.
language	string	undefined	The id of an installed language package. Without it the editor shows plain text.
theme	Theme	githubLight	The colors. githubDark and oneDark ship too, and a theme is a plain object you can write yourself.
fontSize	number	14	In dp on Android and points on iOS.
softWrap	boolean	false	Wraps long lines. Off means horizontal scrolling.
lineNumbers	boolean	true	Shows the line number gutter.
readOnly	boolean	false	Hides the keyboard and refuses edits. Selection and copy keep working.
autoCloseBrackets	boolean	true	Closes pairs as you type and skips over a closer you type yourself.
tabSize	number	4	The width of one indentation level.
avoidKeyboard	boolean	false	Adds the keyboard overlap to the bottom inset on every frame of the keyboard animation.
onChange	(event) => void		Called after every edit with the replaced range, the new text and its origin.
onSelectionChange	(selection) => void		Called when the caret or the selection moves.

Methods

Method	Description
getText(), getSelection(), getLineCount()	Read the document synchronously on the JS thread.
setText(text), replaceRange(range, text), insertText(text)	Change the document. Each resolves once the edit is applied.
setSelection(selection), selectAll(), scrollToLine(line), revealSelection()	Move the selection and the viewport.
undo(), redo(), indent(), outdent(), cut(), copy(), paste()	The edit menu, from JavaScript.
moveCaret(direction), typeText(text), deleteBackward(), deleteForward()	The toolbar API. Each goes through the same path as the keyboard.
setSearch(query), findNext(), findPrevious(), replaceCurrent(text), replaceAll(text)	Search, with the match count and the painted matches.
focus(), blur()	Show or hide the keyboard.

Coding agents

The CodePad skill gives coding agents such as Claude Code, Codex and Cursor the API and its pitfalls:

npx skills add SectionTN/react-native-codepad

The docs are also available as plain text in llms-full.txt. The AI coding agents guide has the details.

Roadmap

• 0.1: Android and iOS, fifteen languages, search, themes, the keyboard follower
• Autocomplete and an LSP client
• Code folding and a minimap
• Multiple cursors, diagnostics, font ligatures and bidi editing
• Web
• 1.0: First stable release

Contributing

See the contributing guide. Questions and ideas go to Issues.

License

MIT. Each language package includes the license of its grammar and its queries.

---

Made by SectionTN