React Native iOS Translate Sheet

A React Native library that brings the native iOS 17.4+ Translation Sheet to your React Native applications.

Note: If you need to perform multiple translations and retrieve the translated text to display within your app, consider using react-native-ios-translate-tasks instead. This library is focused on providing the native iOS translation sheet UI experience.

Features

• 🔄 Seamless integration with iOS native translation capabilities
• 🌐 Access to all languages supported by iOS translation
• 📱 Native iOS UI and interactions
• 🏗️ Supports old & new arch on RN 0.76+
• ⚙️ Powered by SwiftUI's translationPresentation API under the hood

Platform Compatibility

This library is designed specifically for iOS 17.4 and above. It can be safely installed in your React Native project regardless of your target iOS version or if you're developing for Android. However, please note:

• On iOS versions below 17.4, the translation sheet will not appear and the translate function will silently do nothing
• On Android devices, the translation functionality is not available and the translate function will silently do nothing

Installation

yarn add react-native-ios-translate-sheet

or

npm install react-native-ios-translate-sheet

Then, install the native dependencies:

cd ios && pod install

Usage

1. First, wrap your app (or the part where you want to use the translation sheet) with the IOSTranslateSheetProvider:

import { IOSTranslateSheetProvider } from 'react-native-ios-translate-sheet';

function App() {
  return (
    <IOSTranslateSheetProvider>
      {/* Your app content */}
    </IOSTranslateSheetProvider>
  );
}

2. Then, use the useIOSTranslateSheet hook in any component where you want to trigger the translation sheet:

import { useIOSTranslateSheet } from 'react-native-ios-translate-sheet';

function MyComponent() {
  const { presentIOSTranslateSheet } = useIOSTranslateSheet();

  const handleTranslate = () => {
    presentIOSTranslateSheet({
      text: 'Text to translate',
    });
  };

  return (
    <Button
      title="Translate"
      onPress={handleTranslate}
    />
  );
}

iPad

On iPad, the translation sheet needs an anchor point to display correctly (it's optional, and by default the sheet will be displayed at the bottom of the screen). You can specify the position where the sheet should appear by providing a gesture event to presentIOSTranslateSheet:

import type { GestureResponderEvent } from "react-native";
import { useIOSTranslateSheet } from 'react-native-ios-translate-sheet';

function MyComponent() {
  const { presentIOSTranslateSheet } = useIOSTranslateSheet();

  const handleTranslate = (event: GestureResponderEvent) => {
    presentIOSTranslateSheet({
      text: 'Text to translate',
      gestureEvent: event,
    });
  };

  return (
    <Button
      title="Translate"
      onPress={handleTranslate}
    />
  );
}

Replacement Action

The Replacement Action feature allows you to capture and handle the translated text after a user completes a translation. This is particularly useful for:

• Saving translations for later use
• Updating UI elements with translated content
• Implementing "translate and replace" functionality
• Storing translations in your app's state or database

Basic Usage

To handle translated text, provide a callback function as the second parameter to presentIOSTranslateSheet:

const { presentIOSTranslateSheet } = useIOSTranslateSheet();

const handleTranslate = () => {
  presentIOSTranslateSheet({
    text: 'Hello, how are you?',
    replacementAction: (translatedText) => {
      // Handle the translated text here
      setTranslatedContent(translatedText);
    },
  });
};

Checking Platform Support

The useIOSTranslateSheet hook provides an isSupported boolean that you can use to check if the translation functionality is available on the current device:

const { isSupported } = useIOSTranslateSheet();

Note: The translation sheet will only appear on iOS devices running version 17.4 or later. On other platforms or iOS versions below 17.4, the presentIOSTranslateSheet function will do nothing.

Example

Contributing

We welcome contributions! Please see our Contributing Guide for more details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you like this project, please consider supporting it by giving it a ⭐️ on GitHub!