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

``sh
yarn add react-native-ios-translate-sheet
`
or
`sh
npm install react-native-ios-translate-sheet
`

Then, install the native dependencies:

`sh
cd ios && pod install
`

Usage

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

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

function App() {
return (

{/ Your app content /}

);
}
`

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

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

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

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

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

$3

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:

`tsx
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 (
title="Translate"
onPress={handleTranslate}
/>
);
}
`

$3

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:

`tsx
const { presentIOSTranslateSheet } = useIOSTranslateSheet();

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

$3

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

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