From 24fe68495101c163f3081a0e8357d78d3584e8b6 Mon Sep 17 00:00:00 2001
From: Leslie Owusu-Appiah <leslie@localhost.international>
Date: Fri, 8 May 2026 11:05:24 +0200
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20lineNumbers=20prop=20=E2=80=94=20ru?=
 =?UTF-8?q?ntime-toggleable=20gutter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

STTextView (UIKit + AppKit) exposes the same `showsLineNumbers` Bool;
both impls toggle the gutter view in place when flipped, so we just
forward the codegen prop straight through. No remount, no reload.

Surface:
- Fabric spec gains `lineNumbers?: boolean`
- Public `SourceEditorProps` + lower-level `SourceEditorViewProps` both
  accept it; `SourceEditor` defaults to `false`
- ios/SourceEditor.mm forwards prop diffs to RNSESourceEditorImpl
- iOS + macOS Swift impls both call `textView.showsLineNumbers = value`
  (macOS branch ships now even though the example app can't exercise
  it until #27 lands the Obj-C++ port)

Example app gets a glass-effect Toggle in the toolbar (SF Symbol
`number`) so the prop is demonstrably runtime-togglable.

Closes #10
---
 README.md                              |  4 ++--
 docs/usage.md                          |  1 +
 example/ios-app/App.tsx                | 18 ++++++++++++++++++
 ios/SourceEditor.mm                    |  3 +++
 ios/SourceEditorImpl.swift             | 14 ++++++++++++++
 src/SourceEditor.tsx                   |  2 ++
 src/SourceEditor.types.ts              |  2 ++
 src/SourceEditorViewNativeComponent.ts |  1 +
 8 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6d3ff28..c7e74f2 100644
--- a/README.md
+++ b/README.md
@@ -66,9 +66,9 @@ Bare-RN hosts: see [docs/installation.md](docs/installation.md) for the manual `
 
 ## Roadmap
 
-- **v0.x (now)** — bare RN Fabric library, iOS shipping. JS API: text, selection, font, theme, language (markdown / json / js / ts / html), `contentInsets`, imperative `focus`/`blur`.
+- **v0.x (now)** — bare RN Fabric library, iOS shipping. JS API: text, selection, font, theme, language (markdown / json / js / ts / html), `lineNumbers` gutter toggle, `contentInsets`, imperative `focus`/`blur`.
 - **v0.x next** — macOS via Obj-C++ port ([#27](https://github.com/workspace-sh/react-native-source-editor/issues/27)). Unblocks the `example/macos-app/` target and re-adds `:osx` to the podspec.
-- **v1.0** — line number gutter ([#10](https://github.com/workspace-sh/react-native-source-editor/issues/10)), expanded font customisation, npm publish under `@workspace-sh/react-native-source-editor`.
+- **v1.0** — expanded font customisation, npm publish under `@workspace-sh/react-native-source-editor`.
 - **Post-1.0** — iPadOS polish, Android (TextKit alternative), Windows, Linux, Web.
 
 ## Contributing
diff --git a/docs/usage.md b/docs/usage.md
index 8ae2ca9..27a82cc 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -36,6 +36,7 @@ export default function Editor() {
 | `font` | `{ family?: string; size?: number }` | system mono @ 14 | Falls back to monospaced system font if `family` is missing or unresolvable. |
 | `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | `auto` follows system appearance. |
 | `language` | `'plaintext' \| 'markdown' \| 'json' \| 'javascript' \| 'typescript' \| 'html'` | `'plaintext'` | Syntax highlighting via attributed text. `html` highlights nested CSS (in `<style>`) and JS (in `<script>`). Colours respect `theme` and adapt to system semantic colours. |
+| `lineNumbers` | `boolean` | `false` | Toggles STTextView's line-number gutter. Runtime-settable — flipping the prop adds/removes the gutter view in place without remounting. Default off so the editor is gutter-less unless explicitly opted in. |
 | `contentInsets` | `{ top?, bottom?, left?, right? }` (numbers) | `0` | Padding inside the text container. Use to keep first/last lines clear of floating UI like translucent headers/footers. |
 | `onChangeText` | `(text: string) => void` | — | Fires on every text change. |
 | `onSelectionChange` | `(selection: { start: number; end: number }) => void` | — | Fires on selection updates. |
diff --git a/example/ios-app/App.tsx b/example/ios-app/App.tsx
index 716f9d6..03a9b10 100644
--- a/example/ios-app/App.tsx
+++ b/example/ios-app/App.tsx
@@ -14,6 +14,7 @@ import {
   Host,
   Picker,
   Text,
+  Toggle,
 } from '@expo/ui/swift-ui';
 import {
   controlSize,
@@ -163,6 +164,7 @@ function Demo() {
   const [language, setLanguage] = useState<DemoLanguage>('markdown');
   const [viewMode, setViewMode] = useState<ViewMode>('source');
   const [content, setContent] = useState(SAMPLES.markdown);
+  const [lineNumbers, setLineNumbers] = useState(false);
   const [bottomBarHeight, setBottomBarHeight] = useState(0);
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const editorRef = useRef<SourceEditorRef>(null);
@@ -234,6 +236,7 @@ function Demo() {
           value={content}
           editable
           language={language}
+          lineNumbers={lineNumbers}
           font={{ size: 13 }}
           theme="auto"
           contentInsets={{
@@ -293,6 +296,21 @@ function Demo() {
                 <Text modifiers={[tag('html')]}>{LANGUAGE_LABEL.html}</Text>
               </Picker>
 
+              {!showPreview && (
+                <Toggle
+                  modifiers={[
+                    controlSize('large'),
+                    glassEffect({
+                      shape: 'capsule',
+                      glass: { variant: 'regular', interactive: true },
+                    }),
+                  ]}
+                  isOn={lineNumbers}
+                  systemImage="number"
+                  onIsOnChange={setLineNumbers}
+                />
+              )}
+
               {isPreviewable && (
                 <Picker
                   modifiers={[
diff --git a/ios/SourceEditor.mm b/ios/SourceEditor.mm
index 55caea1..0c2d066 100644
--- a/ios/SourceEditor.mm
+++ b/ios/SourceEditor.mm
@@ -74,6 +74,9 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   if (oldViewProps.language != newViewProps.language) {
     [_impl setLanguage:RCTNSStringFromString(newViewProps.language)];
   }
+  if (oldViewProps.lineNumbers != newViewProps.lineNumbers) {
+    [_impl setLineNumbers:newViewProps.lineNumbers];
+  }
   // Codegen structs don't auto-generate operator==; compare fields directly.
   if (oldViewProps.font.family != newViewProps.font.family ||
       oldViewProps.font.size != newViewProps.font.size) {
diff --git a/ios/SourceEditorImpl.swift b/ios/SourceEditorImpl.swift
index 089bec0..638032c 100644
--- a/ios/SourceEditorImpl.swift
+++ b/ios/SourceEditorImpl.swift
@@ -102,6 +102,13 @@ public class SourceEditorImpl: UIView {
     scheduleReHighlight()
   }
 
+  @objc public func setLineNumbers(_ value: Bool) {
+    // STTextView (UIKit + AppKit) exposes the same `showsLineNumbers`
+    // property; toggling at runtime adds/removes the gutter view in
+    // place — no remount required.
+    textView.showsLineNumbers = value
+  }
+
   private func scheduleReHighlight() {
     if isReHighlighting || reHighlightScheduled { return }
     reHighlightScheduled = true
@@ -262,6 +269,13 @@ public class SourceEditorImpl: NSView {
     scheduleReHighlight()
   }
 
+  @objc public func setLineNumbers(_ value: Bool) {
+    // STTextView (UIKit + AppKit) exposes the same `showsLineNumbers`
+    // property; toggling at runtime adds/removes the gutter view in
+    // place — no remount required.
+    textView.showsLineNumbers = value
+  }
+
   private func scheduleReHighlight() {
     if isReHighlighting || reHighlightScheduled { return }
     reHighlightScheduled = true
diff --git a/src/SourceEditor.tsx b/src/SourceEditor.tsx
index 48e2c49..6dca612 100644
--- a/src/SourceEditor.tsx
+++ b/src/SourceEditor.tsx
@@ -16,6 +16,7 @@ const SourceEditor = React.forwardRef<SourceEditorRef, SourceEditorProps>(
       font,
       theme = 'auto',
       language = 'plaintext',
+      lineNumbers = false,
       contentInsets,
       onChangeText,
       onSelectionChange,
@@ -54,6 +55,7 @@ const SourceEditor = React.forwardRef<SourceEditorRef, SourceEditorProps>(
         font={font}
         theme={theme}
         language={language}
+        lineNumbers={lineNumbers}
         contentInsets={contentInsets}
         style={style}
         onChangeText={(event) => {
diff --git a/src/SourceEditor.types.ts b/src/SourceEditor.types.ts
index 674c891..ee5d638 100644
--- a/src/SourceEditor.types.ts
+++ b/src/SourceEditor.types.ts
@@ -39,6 +39,7 @@ export type SourceEditorViewProps = {
   font?: FontConfig;
   theme?: Theme;
   language?: Language;
+  lineNumbers?: boolean;
   contentInsets?: ContentInsets;
   onChangeText?: (event: { nativeEvent: ChangeTextEventPayload }) => void;
   onSelectionChange?: (event: { nativeEvent: SelectionChangeEventPayload }) => void;
@@ -52,6 +53,7 @@ export type SourceEditorProps = {
   font?: FontConfig;
   theme?: Theme;
   language?: Language;
+  lineNumbers?: boolean;
   contentInsets?: ContentInsets;
   onChangeText?: (text: string) => void;
   onSelectionChange?: (selection: Selection) => void;
diff --git a/src/SourceEditorViewNativeComponent.ts b/src/SourceEditorViewNativeComponent.ts
index 70468cb..db0ef7b 100644
--- a/src/SourceEditorViewNativeComponent.ts
+++ b/src/SourceEditorViewNativeComponent.ts
@@ -33,6 +33,7 @@ export interface NativeProps extends ViewProps {
   font?: FontConfig;
   theme?: string;
   language?: string;
+  lineNumbers?: boolean;
   contentInsets?: ContentInsets;
 
   onChangeText?: DirectEventHandler<ChangeTextEvent>;

From 031a45ad6bcc5c02e3278450ae8f4dd68f9de322 Mon Sep 17 00:00:00 2001
From: Leslie Owusu-Appiah <leslie@localhost.international>
Date: Fri, 8 May 2026 11:08:57 +0200
Subject: [PATCH 2/2] fix(example): line-numbers toggle as glass button, not
 iOS Switch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Default Toggle style rendered as the wide UISwitch pill — visually
clashes with the glass-effect language picker / segmented Source-Preview
on either side. Apply toggleStyle('button') + labelsHidden so the
gutter toggle reads as a small SF Symbol button matching the rest of
the toolbar.
---
 example/ios-app/App.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/example/ios-app/App.tsx b/example/ios-app/App.tsx
index 03a9b10..f367c8c 100644
--- a/example/ios-app/App.tsx
+++ b/example/ios-app/App.tsx
@@ -19,8 +19,10 @@ import {
 import {
   controlSize,
   glassEffect,
+  labelsHidden,
   pickerStyle,
   tag,
+  toggleStyle,
 } from '@expo/ui/swift-ui/modifiers';
 import { WebView } from 'react-native-webview';
 import { marked } from 'marked';
@@ -299,7 +301,9 @@ function Demo() {
               {!showPreview && (
                 <Toggle
                   modifiers={[
+                    toggleStyle('button'),
                     controlSize('large'),
+                    labelsHidden(),
                     glassEffect({
                       shape: 'capsule',
                       glass: { variant: 'regular', interactive: true },