@thiagobueno/rn-selectable-text 1.0.5 → 1.0.7

package/README.md

@@ -39,29 +39,117 @@ import { SelectableTextView } from '@thiagobueno/rn-selectable-text';
 
 export default function App() {
 
-  const handleSelection = (event) => {
-    const { chosenOption, highlightedText } = event;
-    Alert.alert(
-      'Selection Event',
-      `Option: ${chosenOption}\nSelected Text: ${highlightedText}`
+    const handleSelection = (event) => {
+        const { chosenOption, highlightedText } = event;
+        Alert.alert(
+            'Selection Event',
+            `Option: ${chosenOption}\nSelected Text: ${highlightedText}`
+        );
+    };
+
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
+            <SelectableTextView
+                menuOptions={['Save', 'Share', 'Copy']}
+                onSelection={handleSelection}
+            >
+                <Text style={{ fontSize: 18, color: '#333' }}>
+                    Highlight this text to see the custom native menu!
+                </Text>
+            </SelectableTextView>
+        </View>
     );
-  };
-
-  return (
-    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
-      <SelectableTextView
-        menuOptions={['Save', 'Share', 'Copy']}
-        onSelection={handleSelection}
-      >
-        <Text style={{ fontSize: 18, color: '#333' }}>
-          Highlight this text to see the custom native menu!
-        </Text>
-      </SelectableTextView>
-    </View>
-  );
 }
 ```
 
+### Invisible Custom Mode (ActionSheet & Bottom Sheet Integration)
+
+If you want to use modern UIs like Apple's native `ActionSheetIOS` or a custom React Native Bottom Sheet, you can bypass the default horizontal bubble menu entirely. 
+
+By passing an **empty array (`[]`)** to `menuOptions`, the library enters **Invisible Mode**. It completely suppresses the native iOS/Android bubble menus while still tracking text selection in real-time and emitting the `CUSTOM_MODE` event.
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text, Platform, ActionSheetIOS, Modal, Button, StyleSheet } from 'react-native';
+import { SelectableTextView } from '@thiagobueno/rn-selectable-text';
+
+export default function InvisibleModeApp() {
+    const [androidMenuVisible, setAndroidMenuVisible] = useState(false);
+    const [selectedText, setSelectedText] = useState('');
+
+    const handleSelection = ({ chosenOption, highlightedText }) => {
+        // 1. Hide menus if the user taps away and clears the selection
+        if (highlightedText.length === 0) {
+            setAndroidMenuVisible(false);
+            return;
+        }
+
+        // 2. Invisible Mode triggers the "CUSTOM_MODE" option
+        if (chosenOption === 'CUSTOM_MODE') {
+            setSelectedText(highlightedText);
+
+            if (Platform.OS === 'ios') {
+                // Open Apple's Native Bottom Sheet
+                ActionSheetIOS.showActionSheetWithOptions(
+                    {
+                        title: 'Text Actions',
+                        options: ['Cancel', 'Share to WhatsApp', 'Save'],
+                        cancelButtonIndex: 0,
+                    },
+                    (buttonIndex) => {
+                        if (buttonIndex === 1) console.log('WhatsApp:', highlightedText);
+                        if (buttonIndex === 2) console.log('Save:', highlightedText);
+                    }
+                );
+            } else {
+                // Open Custom React Native Bottom Sheet for Android
+                setAndroidMenuVisible(true);
+            }
+        }
+    };
+
+    return (
+        <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
+            <SelectableTextView
+                menuOptions={[]} // The empty array is the magic key for Invisible Mode
+                onSelection={handleSelection}
+            >
+                <Text style={{ fontSize: 18, color: '#333' }}>
+                    Select this text. The native bubble menu is suppressed, allowing you
+                    to render a beautiful Action Sheet or custom Modal instead!
+                </Text>
+            </SelectableTextView>
+
+            {Platform.OS === 'android' && (
+                <Modal visible={androidMenuVisible} transparent animationType="slide">
+                    <View style={styles.modalOverlay}>
+                        <View style={styles.bottomSheet}>
+                            <Text style={{ marginBottom: 15 }}>Selected: {selectedText}</Text>
+                            <Button title="Save" onPress={() => setAndroidMenuVisible(false)} />
+                            <Button title="Close" color="red" onPress={() => setAndroidMenuVisible(false)} />
+                        </View>
+                    </View>
+                </Modal>
+            )}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    },
+    bottomSheet: {
+        backgroundColor: 'white',
+        padding: 20,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20
+    }
+});
+```
+
 ### Advanced Example (Nested Text & Index Mapping)
 
 When dealing with internationalization (i18n) or dynamic menus, it's highly recommended to map your selections by index rather than relying on the translated string.
@@ -75,38 +163,38 @@ const MENU_OPTIONS = ['Save Note', 'Edit Text', 'Highlight Content'];
 
 export default function AdvancedApp() {
 
-  const handleSelection = ({ chosenOption, highlightedText }) => {
-    const actionIndex = MENU_OPTIONS.indexOf(chosenOption);
-    
-    switch(actionIndex) {
-      case 0:
-        console.log('Action: Save Note - Text:', highlightedText);
-        break;
-      case 1:
-        console.log('Action: Edit Text - Text:', highlightedText);
-        break;
-      case 2:
-        console.log('Action: Highlight Content - Text:', highlightedText);
-        break;
-    }
-  };
-
-  return (
-    <View style={{ padding: 20 }}>
-      <SelectableTextView
-        menuOptions={MENU_OPTIONS}
-        onSelection={handleSelection}
-      >
-        <Text style={{ color: 'black', fontSize: 16 }}>
-          This text is black, but{' '}
-          <Text style={{ fontWeight: 'bold', color: 'blue' }}>
-            this part is bold and blue
-          </Text>{' '}
-          and this is black again. The entire block is selectable!
-        </Text>
-      </SelectableTextView>
-    </View>
-  );
+    const handleSelection = ({ chosenOption, highlightedText }) => {
+        const actionIndex = MENU_OPTIONS.indexOf(chosenOption);
+
+        switch (actionIndex) {
+            case 0:
+                console.log('Action: Save Note - Text:', highlightedText);
+                break;
+            case 1:
+                console.log('Action: Edit Text - Text:', highlightedText);
+                break;
+            case 2:
+                console.log('Action: Highlight Content - Text:', highlightedText);
+                break;
+        }
+    };
+
+    return (
+        <View style={{ padding: 20 }}>
+            <SelectableTextView
+                menuOptions={MENU_OPTIONS}
+                onSelection={handleSelection}
+            >
+                <Text style={{ color: 'black', fontSize: 16 }}>
+                    This text is black, but{' '}
+                    <Text style={{ fontWeight: 'bold', color: 'blue' }}>
+                        this part is bold and blue
+                    </Text>{' '}
+                    and this is black again. The entire block is selectable!
+                </Text>
+            </SelectableTextView>
+        </View>
+    );
 }
 ```
 
@@ -127,8 +215,8 @@ The `onSelection` callback receives an event object with:
 
 ```typescript
 interface SelectionEvent {
-  chosenOption: string;    // The exact string of the menu option selected
-  highlightedText: string; // The specific text highlighted by the user
+    chosenOption: string;    // The exact string of the menu option selected
+    highlightedText: string; // The specific text highlighted by the user
 }
 ```
 

package/ios/SelectableTextView.mm

@@ -12,6 +12,15 @@ using namespace facebook::react;
 
 @class SelectableTextView;
 
+// ====================================================================
+// CRASH PREVENTION: Safe C++ String Conversion
+// ====================================================================
+static std::string safeStdString(NSString *str) {
+    if (!str) return "";
+    const char *utf8 = [str UTF8String];
+    return utf8 ? std::string(utf8) : "";
+}
+
 @interface SelectableUITextView : UITextView
 @property (nonatomic, weak) SelectableTextView *parentSelectableTextView;
 @end
@@ -20,8 +29,6 @@ using namespace facebook::react;
 
 - (void)didMoveToWindow {
     [super didMoveToWindow];
-    // FIX: iOS 16+ text selection bug after navigation.
-    // When returning to the screen, we force iOS to re-evaluate the interaction state.
     if (self.window) {
         BOOL wasSelectable = self.selectable;
         self.selectable = NO;
@@ -31,12 +38,6 @@ using namespace facebook::react;
 
 - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
 {
-    // FIX: We explicitly tell iOS that we can perform standard actions.
-    // This prevents the "[UIKitCore] The edit menu did not have performable commands" warning.
-    if (action == @selector(copy:) || action == @selector(selectAll:)) {
-        return YES;
-    }
-    
     if (self.parentSelectableTextView) {
         return [self.parentSelectableTextView canPerformAction:action withSender:sender];
     }
@@ -63,7 +64,6 @@ using namespace facebook::react;
     }
 }
 
-// Intercepts physical keyboard "Copy" and nullifies the action to keep it custom
 - (void)copy:(id)sender
 {
     // Silently blocked
@@ -142,7 +142,6 @@ using namespace facebook::react;
 - (void)prepareForRecycle {
     [super prepareForRecycle];
     
-    // FIX: Force drop focus when leaving screen
     [_customTextView resignFirstResponder];
     
     [[UIMenuController sharedMenuController] hideMenuFromView:_customTextView];
@@ -151,7 +150,6 @@ using namespace facebook::react;
     _customTextView.text = nil;
     _customTextView.selectedTextRange = nil;
     
-    // CRITICAL FIX: Do NOT clear _menuOptions here. Fabric's prop diffing will handle updates.
     [self unhideAllViews:self];
 }
 
@@ -240,29 +238,76 @@ using namespace facebook::react;
 
 #pragma mark - UITextViewDelegate
 
+// ====================================================================
+// REAL-TIME CUSTOM MODE TRACKING (With Crash Prevention bounds check)
+// ====================================================================
+- (void)textViewDidChangeSelection:(UITextView *)textView
+{
+    if (textView.selectedRange.location != NSNotFound && textView.selectedRange.length > 0) {
+        
+        // SAFE BOUNDS CHECK: Prevents iOS 15/17/18 out-of-bounds crash
+        NSString *selectedText = @"";
+        if (textView.selectedRange.location + textView.selectedRange.length <= textView.text.length) {
+            selectedText = [textView.text substringWithRange:textView.selectedRange];
+        }
+        
+        // INVISIBLE MODE (ALL IOS VERSIONS)
+        if (_menuOptions.count == 0) {
+            if (auto eventEmitter = std::static_pointer_cast<const SelectableTextViewEventEmitter>(_eventEmitter)) {
+                SelectableTextViewEventEmitter::OnSelection selectionEvent = {
+                    .chosenOption = "CUSTOM_MODE",
+                    .highlightedText = safeStdString(selectedText)
+                };
+                eventEmitter->onSelection(selectionEvent);
+            }
+            return;
+        }
+        
+        // STANDARD MODE
+        if (@available(iOS 16.0, *)) {
+            return;
+        } else {
+            dispatch_async(dispatch_get_main_queue(), ^{
+                [self showCustomMenu];
+            });
+        }
+    } else {
+        [[UIMenuController sharedMenuController] hideMenuFromView:_customTextView];
+        
+        // IF SELECTION IS CLEARED, NOTIFY JS TO HIDE THE BOTTOM SHEET
+        if (_menuOptions.count == 0) {
+             if (auto eventEmitter = std::static_pointer_cast<const SelectableTextViewEventEmitter>(_eventEmitter)) {
+                SelectableTextViewEventEmitter::OnSelection selectionEvent = {
+                    .chosenOption = "CUSTOM_MODE",
+                    .highlightedText = ""
+                };
+                eventEmitter->onSelection(selectionEvent);
+            }
+        }
+    }
+}
+
 // ====================================================================
 // THE NEW IOS 16+ API
 // ====================================================================
 - (UIMenu *)textView:(UITextView *)textView editMenuForTextInRange:(NSRange)range suggestedActions:(NSArray<UIMenuElement *> *)suggestedActions API_AVAILABLE(ios(16.0)) {
     
-    // FORCING THE FOCUS: ensures the system doesn't dismiss our menu unexpectedly
-    [textView becomeFirstResponder];
-    
-    // ====================================================================
-    // CUSTOM INVISIBLE MODE: Suppress native menu if array is empty
-    // ====================================================================
     if (_menuOptions.count == 0) {
-        NSString *selectedText = [textView.text substringWithRange:range];
+        // SAFE BOUNDS CHECK
+        NSString *selectedText = @"";
+        if (range.location != NSNotFound && range.location + range.length <= textView.text.length) {
+            selectedText = [textView.text substringWithRange:range];
+        }
+        
         if (selectedText.length > 0) {
             if (auto eventEmitter = std::static_pointer_cast<const SelectableTextViewEventEmitter>(_eventEmitter)) {
                 SelectableTextViewEventEmitter::OnSelection selectionEvent = {
-                    .chosenOption = std::string("CUSTOM_MODE"),
-                    .highlightedText = std::string([selectedText UTF8String])
+                    .chosenOption = "CUSTOM_MODE",
+                    .highlightedText = safeStdString(selectedText)
                 };
                 eventEmitter->onSelection(selectionEvent);
             }
         }
-        // Returns an empty menu, effectively hiding the native UI
         return [UIMenu menuWithTitle:@"" children:@[]];
     }
 
@@ -278,36 +323,6 @@ using namespace facebook::react;
     return [UIMenu menuWithTitle:@"" children:customActions];
 }
 
-- (void)textViewDidChangeSelection:(UITextView *)textView
-{
-    if (@available(iOS 16.0, *)) {
-        return;
-    } else {
-        if (textView.selectedRange.length > 0) {
-            
-            // CUSTOM INVISIBLE MODE FOR IOS < 16
-            if (_menuOptions.count == 0) {
-                NSString *selectedText = [textView.text substringWithRange:textView.selectedRange];
-                if (auto eventEmitter = std::static_pointer_cast<const SelectableTextViewEventEmitter>(_eventEmitter)) {
-                    SelectableTextViewEventEmitter::OnSelection selectionEvent = {
-                        .chosenOption = std::string("CUSTOM_MODE"),
-                        .highlightedText = std::string([selectedText UTF8String])
-                    };
-                    eventEmitter->onSelection(selectionEvent);
-                }
-                [[UIMenuController sharedMenuController] hideMenuFromView:_customTextView];
-                return;
-            }
-            
-            dispatch_async(dispatch_get_main_queue(), ^{
-                [self showCustomMenu];
-            });
-        } else {
-            [[UIMenuController sharedMenuController] hideMenuFromView:_customTextView];
-        }
-    }
-}
-
 - (void)showCustomMenu
 {
     if (![_customTextView canBecomeFirstResponder]) return;
@@ -334,7 +349,8 @@ using namespace facebook::react;
     
     CGRect selectedRect = [_customTextView firstRectForRange:_customTextView.selectedTextRange];
     
-    if (!CGRectIsEmpty(selectedRect)) {
+    // CRASH PREVENTION: Validate rect before showing menu (iOS 15 safety)
+    if (!CGRectIsEmpty(selectedRect) && !CGRectIsNull(selectedRect) && !CGRectIsInfinite(selectedRect)) {
         CGRect targetRect = [_customTextView convertRect:selectedRect toView:_customTextView];
         [menuController showMenuFromView:_customTextView rect:targetRect];
     }
@@ -346,17 +362,19 @@ using namespace facebook::react;
 }
 
 // ====================================================================
-// THE TRICK TO FORCE THE MENU TO OPEN AND PREVENT UIKIT WARNINGS
+// SUPPRESS SYSTEM MENU IN CUSTOM MODE
 // ====================================================================
 - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
 {
+    if (_menuOptions.count == 0) {
+        return NO;
+    }
+    
     NSString *selectorName = NSStringFromSelector(action);
     if ([selectorName hasPrefix:@"customAction_"] && [selectorName hasSuffix:@":"]) {
         return YES;
     }
     
-    // We tell iOS that we can perform standard actions. 
-    // This convinces the system not to abort the menu rendering.
     if (action == @selector(copy:) || action == @selector(selectAll:)) {
         return YES;
     }
@@ -378,23 +396,26 @@ using namespace facebook::react;
     NSString *selectorName = NSStringFromSelector(anInvocation.selector);
     
     if ([selectorName hasPrefix:@"customAction_"] && [selectorName hasSuffix:@":"]) {
-        NSString *cleanedOption = [selectorName substringWithRange:NSMakeRange(13, selectorName.length - 14)];
-        
-        NSString *originalOption = nil;
-        for (NSString *option in _menuOptions) {
-            NSString *clean1 = [option stringByReplacingOccurrencesOfString:@" " withString:@"_"];
-            NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"[^a-zA-Z0-9_]" options:0 error:nil];
-            NSString *testSelectorName = [regex stringByReplacingMatchesInString:clean1 options:0 range:NSMakeRange(0, clean1.length) withTemplate:@"_"];
+        // CRASH PREVENTION: Validate selector length before cutting string
+        if (selectorName.length > 14) {
+            NSString *cleanedOption = [selectorName substringWithRange:NSMakeRange(13, selectorName.length - 14)];
+            
+            NSString *originalOption = nil;
+            for (NSString *option in _menuOptions) {
+                NSString *clean1 = [option stringByReplacingOccurrencesOfString:@" " withString:@"_"];
+                NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"[^a-zA-Z0-9_]" options:0 error:nil];
+                NSString *testSelectorName = [regex stringByReplacingMatchesInString:clean1 options:0 range:NSMakeRange(0, clean1.length) withTemplate:@"_"];
+                
+                if ([testSelectorName isEqualToString:cleanedOption]) {
+                    originalOption = option;
+                    break;
+                }
+            }
             
-            if ([testSelectorName isEqualToString:cleanedOption]) {
-                originalOption = option;
-                break;
+            if (originalOption) {
+                [self handleMenuSelection:originalOption];
             }
         }
-        
-        if (originalOption) {
-            [self handleMenuSelection:originalOption];
-        }
     } else {
         [super forwardInvocation:anInvocation];
     }
@@ -405,7 +426,8 @@ using namespace facebook::react;
     NSRange selectedRange = _customTextView.selectedRange;
     NSString *selectedText = @"";
     
-    if (selectedRange.location != NSNotFound && selectedRange.length > 0) {
+    // SAFE BOUNDS CHECK
+    if (selectedRange.location != NSNotFound && selectedRange.length > 0 && (selectedRange.location + selectedRange.length <= _customTextView.text.length)) {
         selectedText = [_customTextView.text substringWithRange:selectedRange];
     }
     
@@ -414,8 +436,8 @@ using namespace facebook::react;
     
     if (auto eventEmitter = std::static_pointer_cast<const SelectableTextViewEventEmitter>(_eventEmitter)) {
         SelectableTextViewEventEmitter::OnSelection selectionEvent = {
-            .chosenOption = std::string([selectedOption UTF8String]),
-            .highlightedText = std::string([selectedText UTF8String])
+            .chosenOption = safeStdString(selectedOption),
+            .highlightedText = safeStdString(selectedText)
         };
         eventEmitter->onSelection(selectionEvent);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thiagobueno/rn-selectable-text",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "type": "module",
     "description": "A library for custom text selection menus",
     "main": "./lib/module/index.js",