react-native-live-text-view

Enabling Live Text interactions with image.

Highlights

• 🔥 Built with Expo's Module API
• 🎉 Supports both Image and expo-image.
• 🍎 iOS only (iOS 16.0+)

Preview

Installation

Expo development build

Install the library:

npx expo install react-native-live-text-view

Then rebuild your app:

npx expo prebuild -p ios --clean
npx expo run:ios

Bare React Native projects

You must ensure that you have installed and configured the expo package before continuing.

Install the library:

npm install react-native-live-text-view

Run npx pod-install

Usage

Basic

import { LiveTextView } from 'react-native-live-text-view';

<LiveTextView>
  <Image source={{ uri: imageUri }} style={{ height, width }} />
</LiveTextView>;

Example

git clone repo
cd example
npm run ios

API

Props

Name	Type	Required	Description
children	ReactNode	Yes	The image for live text interaction.
style	StyleProp<ViewStyle>	No	Container style
disabled	boolean	No	Whether to turn off the image analysis. Default value is false
liveActionButtonHidden	boolean	No	Whether to hide the live action button in the lower right corner. Default value is false
onStart	() => void	No	Called when image analysis starts.
onReady	(event: OnReadyEventData) => void	No	Called when image analysis success.
onError	(event: OnErrorEventData) => void;	No	Called when image analysis fail.
onHighlightChange	(isHighlight: boolean) => void	No	Called when recognized items in the image appear highlighted as a result of a person tapping the Live Text button.
onTextSelectionChange	(event: OnTextSelectionChangeEventData) => void	No	Called when the interaction’s text selection changes.

Types

interface OnReadyEventData {
  /*
   * Whether the analysis finds the specified types in the image.
   */
  hasResults: boolean;
  /*
   * The string that the text items in the image represent.
   */
  transcript: string;
}

interface OnErrorEventData {
  /*
   * error message
   */
  error: string;
}

interface OnTextSelectionChangeEventData {
  /*
   * Selected text, require iOS 17.0+
   */
  selectedText: string;
  /*
   * Whether has text been selected.
   */
  hasActiveTextSelection: boolean;
}

interface OnHighlightChangeEventData {
  /*
   * Whether recognized items in the image appear highlighted
   */
  isHighlight: boolean;
}