https://github.com/huextrat/react-native-ios-translate-sheet
SwiftUI Translate Sheet on React Native
https://github.com/huextrat/react-native-ios-translate-sheet
ios react-native swiftui translate
Last synced: 5 months ago
JSON representation
SwiftUI Translate Sheet on React Native
- Host: GitHub
- URL: https://github.com/huextrat/react-native-ios-translate-sheet
- Owner: huextrat
- License: mit
- Created: 2025-02-27T19:32:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-27T23:10:54.000Z (over 1 year ago)
- Last Synced: 2025-02-28T02:14:30.260Z (over 1 year ago)
- Topics: ios, react-native, swiftui, translate
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-ios-translate-sheet
- Size: 5.53 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 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](https://github.com/huextrat/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](https://developer.apple.com/documentation/swiftui/view/translationpresentation(ispresented:text:attachmentanchor:arrowedge:replacementaction:)) 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 (
);
}
```
### 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`:
```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 (
);
}
```
### 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`:
```tsx
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:
```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](CONTRIBUTING.md) for more details.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Support
If you like this project, please consider supporting it by giving it a ⭐️ on GitHub!