React Native UITextView with Custom Context Menu

An enhanced fork of react-native-uitextview with custom context menu support for React Native iOS applications.

Features

• Full support for UITextView on iOS
• Customizable context menu with your own actions
• Hide system default menu items
• Easy to integrate and use
• Maintains all original functionality

Installation

yarn add @dongsuo/react-native-uitextview
# or
npm install @dongsuo/react-native-uitextview

iOS

Run the following command to install the native dependencies:

cd ios && pod install && cd ..

Usage

Basic Usage

import {UITextView} from '@dongsuo/react-native-uitextview'

// In your component
;<UITextView
  style={{height: 100, borderWidth: 1, padding: 10}}
  placeholder="Type something..."
  selectable={true}
  uiTextView={true}
/>

Custom Context Menu

import {UITextView} from '@dongsuo/react-native-uitextview'

const MyComponent = () => {
  const handleCustomMenuAction = event => {
    const {actionId, selectedText} = event.nativeEvent
    console.log(`Action: ${actionId}`, `Selected text: ${selectedText}`)

    // Handle different actions
    switch (actionId) {
      case 'translate':
        // Handle translate action
        break
      case 'share':
        // Handle share action
        break
      case 'search':
        // Handle search action
        break
    }
  }

  return (
    <UITextView
      style={{height: 100, borderWidth: 1, padding: 10}}
      placeholder="Select text to see custom menu"
      selectable={true}
      uiTextView={true}
      customMenuItems={[
        {title: 'Translate', actionId: 'translate'},
        {title: 'Share', actionId: 'share'},
        {title: 'Search', actionId: 'search'},
      ]}
      onCustomMenuAction={handleCustomMenuAction}
    />
  )
}

Props

| Prop | Type | Description | Default | | -------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- | | customMenuItems | Array<{title: string, actionId: string}> | Array of custom menu items to show when text is selected | [] | | onCustomMenuAction | (event: {nativeEvent: {actionId: string, selectedText: string}}) => void | Callback when a custom menu item is pressed | - | | ... | ... | All other props from React Native's Text component are supported | - |

License

MIT

Credits

Forked from react-native-uitextview by Hailey

React Native UITextView

The Text implementation in React Native much more closely resembles UILabel on iOS. Unfortunately, this prevents the user from being able to highlight text for selection. The only copy behavior that is possible is to copy the entire block of text.

UITextView however allows a user to highlight portions of the text block for copying, translation, or other native capabilities.

React Native UITextView takes advantage of UITextView to allow for both types of copying on iOS: highlight and copy or the current, UILabel behavior to just copy the entire block of text.

Installation

[!WARNING] The final version of this package that supports the old React Native architecture is 1.4.0. All versions 2.x and higher support only the new architecture. Unfortunately I do not have time to maintain support for both architectures. Version 1.4.0 however is stable and - aside from the still missing features from the base <Text> component, should work the same as 2.x and higher.

[!NOTE] Version 2.0.0 of react-native-uitextview is tested against and used in production with React Nave 0.79. No other versions are officially supported. As there have been a number of changes to the text layout engine in the new architecture, things may be broken if you are not using this version of React Native with this package. Generally, these problems are inside of RNUITextViewShadowNode.cpp.

yarn add react-native-uitextview
cd ios
pod install

Limitations

React Native UITextView can - for the most part - be used as a drop-in replacement for existing blocks of Text. However, there are a few limitations:

• Children of UITextView may only be other UITextView children (base Text children will be converted to UITextView children, so you only need to adjust the wrapper). This means that things like in-line images are not supported as they are in the base React Native Text component.
• A few styles have not yet been implemented, but all should be possible.

Usage

Usage of this component is the same as the base React Native Text component. It can be imported as Text from react-native-uitextview, so in most cases you only need to replace your current Text import with this one.

Aside from the few limitations above, all of the existing styles and props that you are using for Text should work. On non-iOS platforms, the base React Native Text will always be used. On iOS, the base React Native Text component will be used unless the selectable and the uiTextView props are both true.

import {UITextView as Text} from 'react-native-uitextview'

function SomeView() {
  return (
    <View style={{flex: 1}}>
      <Text
        style={{color: 'green', lineHeight: 20, fontSize: 14}}
        selectable
        uiTextView>
        This is some highlightable text! It uses UITextView
      </Text>
      <Text
        style={{color: 'blue', lineHeight: 20, fontSize: 14}}
        selectable // Note we do not add the uiTextView prop
      >
        This text still uses the base Text component. It can only be copied.
      </Text>
      <Text
        style={{color: 'red', lineHeight: 20, fontSize: 14}}
        uiTextView // Note we do not add the selectable prop
      >
        This text still uses the base Text component. It can't be highlighted or
        copied at all.
      </Text>
    </View>
  )
}

Nesting of UITextView components is supported. For example, if you have styles that should be applied only to a portion of the text, or an onPress callback to add to a link.

<Text style={{fontSize: 14}} selectable uiTextView>
  This is some text that's highlightable with{' '}
  <Text
    style={{color: 'blue', textDecorationLine: 'underline'}}
    onPress={() => Linking.openURL('https://google.com')}>
    a link
  </Text>
  .
</Text>

Contributing

Contributions are always welcome - and encouraged. Please note however that it might take time for PRs to be reviewed and merged, and they might not be merged at all. This library was created to support text selection in the Bluesky Social App. Contributions that may affect the proper functioning of the component in Bluesky will not be merged.

Some ideas for great contributions that we do not have time to properly implement:

• Full support for all RN styles
• Accessibility improvements

License

MIT

Made with create-react-native-library