@thiagobueno/rn-selectable-text 1.0.6 → 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
@@ -29,8 +38,6 @@ using namespace facebook::react;
 
 - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
 {
-    // FIX: Remove hardcoded YES. We delegate entirely to the parent logic
-    // to allow complete suppression of the menu in Custom Mode.
     if (self.parentSelectableTextView) {
         return [self.parentSelectableTextView canPerformAction:action withSender:sender];
     }
@@ -232,18 +239,24 @@ using namespace facebook::react;
 #pragma mark - UITextViewDelegate
 
 // ====================================================================
-// REAL-TIME CUSTOM MODE TRACKING
+// REAL-TIME CUSTOM MODE TRACKING (With Crash Prevention bounds check)
 // ====================================================================
 - (void)textViewDidChangeSelection:(UITextView *)textView
 {
-    if (textView.selectedRange.length > 0) {
+    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) {
-            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])
+                    .chosenOption = "CUSTOM_MODE",
+                    .highlightedText = safeStdString(selectedText)
                 };
                 eventEmitter->onSelection(selectionEvent);
             }
@@ -265,8 +278,8 @@ using namespace facebook::react;
         if (_menuOptions.count == 0) {
              if (auto eventEmitter = std::static_pointer_cast<const SelectableTextViewEventEmitter>(_eventEmitter)) {
                 SelectableTextViewEventEmitter::OnSelection selectionEvent = {
-                    .chosenOption = std::string("CUSTOM_MODE"),
-                    .highlightedText = std::string("")
+                    .chosenOption = "CUSTOM_MODE",
+                    .highlightedText = ""
                 };
                 eventEmitter->onSelection(selectionEvent);
             }
@@ -280,10 +293,23 @@ using namespace facebook::react;
 - (UIMenu *)textView:(UITextView *)textView editMenuForTextInRange:(NSRange)range suggestedActions:(NSArray<UIMenuElement *> *)suggestedActions API_AVAILABLE(ios(16.0)) {
     
     if (_menuOptions.count == 0) {
+        // 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 = "CUSTOM_MODE",
+                    .highlightedText = safeStdString(selectedText)
+                };
+                eventEmitter->onSelection(selectionEvent);
+            }
+        }
         return [UIMenu menuWithTitle:@"" children:@[]];
     }
-    
-    [textView becomeFirstResponder];
 
     NSMutableArray<UIMenuElement *> *customActions = [[NSMutableArray alloc] init];
 
@@ -323,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];
     }
@@ -339,7 +366,6 @@ using namespace facebook::react;
 // ====================================================================
 - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
 {
-    // 100% INVISIBLE MODE: iOS is forbidden to render any bubble menu
     if (_menuOptions.count == 0) {
         return NO;
     }
@@ -370,22 +396,25 @@ 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)];
             
-            if ([testSelectorName isEqualToString:cleanedOption]) {
-                originalOption = option;
-                break;
+            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 (originalOption) {
+                [self handleMenuSelection:originalOption];
             }
-        }
-        
-        if (originalOption) {
-            [self handleMenuSelection:originalOption];
         }
     } else {
         [super forwardInvocation:anInvocation];
@@ -397,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];
     }
     
@@ -406,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.6",
+    "version": "1.0.7",
     "type": "module",
     "description": "A library for custom text selection menus",
     "main": "./lib/module/index.js",