Skip to content

feat: Add onSelectionChange event for native text selection detection#41

Open
yacinebaroudi wants to merge 4 commits into
bluesky-social:mainfrom
yacinebaroudi:feature/add-selection-change-event
Open

feat: Add onSelectionChange event for native text selection detection#41
yacinebaroudi wants to merge 4 commits into
bluesky-social:mainfrom
yacinebaroudi:feature/add-selection-change-event

Conversation

@yacinebaroudi
Copy link
Copy Markdown

Summary

Adds native onSelectionChange event to UITextView component, enabling real-time text selection detection without polling.

Motivation

React Native's default Text component doesn't support text selection on iOS. The UITextView component provides native selection UI, but there was no way to detect when selection changes. This feature enables:

  • Real-time selection detection
  • Instant UI updates when text is selected
  • Elimination of polling overhead (500ms intervals → instant events)
  • Better performance and user experience

Changes

Native (iOS)

  • Conformed RNUITextView to UITextViewDelegate protocol
  • Implemented textViewDidChangeSelection: delegate method
  • Emits onSelectionChange events via React Native event emitter
  • Added error handling and debug logging

TypeScript

  • Added SelectionChangeEvent interface to RNUITextViewNativeComponent.ts
  • Added onSelectionChange prop to NativeProps
  • Wrapped event handler in useCallback in Text.tsx for performance
  • Added comprehensive JSDoc documentation

Documentation

  • Updated CHANGELOG.md with feature description
  • Added usage examples in README.md

Testing

  • ✅ Tested in production app
  • ✅ Verified with Arabic (RTL) text (multibyte characters)
  • ✅ Tested rapid selection changes
  • ✅ Confirmed no performance regressions
  • ✅ Verified error handling works correctly
## Usage Example

import { UITextView } from 'react-native-uitextview';

function MyComponent() {
  const handleSelectionChange = (event: {
    nativeEvent: { target: number; start: number; end: number }
  }) => {
    const { start, end } = event.nativeEvent;
    console.log(`Selection: ${start}-${end}`);
  };

  return (
    <UITextView
      uiTextView={true}
      selectable={true}
      onSelectionChange={handleSelectionChange}
    >
      Selectable text content
    </UITextView>
  );
}

Breaking Changes

None. This is a purely additive feature.

- Add onSelectionChange event to RNUITextViewNativeComponent
- Implement UITextViewDelegate in RNUITextView.mm
- Add textViewDidChangeSelection delegate method with event emission
- Add comprehensive NSLog debugging for selection changes
- Update Text.tsx to support onSelectionChange prop with useCallback
- Add JSDoc documentation for SelectionChangeEvent interface

This replaces polling-based selection detection with real-time native events,
providing instant selection change notifications and eliminating CPU overhead.
__DEV__ is not available in Objective-C++ context. Use standard
Objective-C preprocessor directive #if DEBUG instead.
Temporarily use source files instead of built lib files to enable
local development without requiring build step.
@dr-contributor
Copy link
Copy Markdown

will this feature be added to the library?
will this functionality be extended to android as well?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants