npm package: @jeongshin/react-native-uitextview
Description: Enhanced UITextView for React Native with improved selection capabilities
Author: jeongshin
Latest version: 1.4.1

# @jeongshin/react-native-uitextview

This package is a fork of [react-native-uitextview](https://github.com/bluesky-social/react-native-uitextview) created by [Hailey](https://github.com/haileyok) for the [Bluesky Social App](https://github.com/bluesky-social/social-app).

## About This Fork

This fork was created to implement custom modifications and improvements while maintaining the core functionality of the original library. All original credit goes to the creators and contributors of the original repository.

> [!WARNING]  
> This fork is based on react-native-uitextview [v1.4.0](https://github.com/bluesky-social/react-native-uitextview/releases/tag/v1.4.0)
> therefore does not support React Native New Architecture.

### Note about support for this library

This library was made for the
[Bluesky Social App](https://github.com/bluesky-social/social-app). Support for this library
is very much dependent on two factors:

1. Do we have time to implement a feature or fix an issue?
2. How important is the feature to Bluesky or does it fix an issue present in Bluesky?

If there are features that you want to see in this library that don't already exist and
likely (or definitely) do not greatly improve the experience in Bluesky, please feel free
to submit a PR! Of course, you should also feel free to make feature suggestions or
bug reports as well, and whenever free time is available the might be worked on. Just know
it might take some time.

Thank you!

# React Native UITextView

The `Text` implementation in React Native uses `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

```sh
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`.

```tsx
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.

```tsx
<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](https://github.com/bluesky-social/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
- Fabric support
- Accessibility improvements

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)