From 973abbec77fc4e70953432b624a3cf8e2fb4758a Mon Sep 17 00:00:00 2001 From: Alex Lonsky Date: Thu, 1 Aug 2024 21:27:05 +0300 Subject: [PATCH] feat(localization): add localizations support re #183 --- README.md | 1 + docs/localization.md | 122 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+) create mode 100644 docs/localization.md diff --git a/README.md b/README.md index 1a0233c..28aad1b 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ Facebook, Slack, Instagram, and more – with just a few lines of code. - [GIPHY Animated Text Creation](docs/animated.md) - [Example App](https://github.com/Giphy/giphy-react-native-sdk/tree/main/example) - [How to mock the Giphy dependency in Jest](docs/testing-jest.md) +- [How to localize the Giphy SDK](docs/localization.md) ### [API Reference](docs/api.md) diff --git a/docs/localization.md b/docs/localization.md new file mode 100644 index 0000000..effa2f7 --- /dev/null +++ b/docs/localization.md @@ -0,0 +1,122 @@ +## GIPHY SDK Localization + +To enable localization for the SDK in your application, follow the steps outlined below for both iOS and Android platforms. This guide will also cover how to add support for additional languages. Note that our SDK is now based on the device language, not on an app-basis, ensuring that your app will display content in the language set by the user's device. + +### iOS Localization + +#### Adding Localization Files + +1. Create Localizable.strings file: + - In your Xcode project, create/navigate to the `Localization` folder. + - Right-click on the folder and select `New File....` + - Choose `Strings File` from the templates and name it `Localizable.strings`. + - Add the file to all the targets in your project. +2. Localize `Localizable.strings` File: + - Select the `Localizable.strings` file in the Project Navigator. + - In the File Inspector (right-hand pane), find the `Localization` section. + - Click the `Localize...` button and choose your development language. + - In the `Localizable.strings` file, add key-value pairs for the strings you want to localize. + +#### Example Localizable.strings + +``` +"no_gifs_found" = "No GIFs found"; +"no_stickers_found" = "No stickers found"; +"no_text_found" = "No text found"; +"no_clips_found" = "No clips found"; +"search_giphy" = "Search GIPHY"; +"something_went_wrong" = "Something went wrong. Please try again later."; +"gifs" = "GIFs"; +"stickers" = "Stickers"; +"text" = "Text"; +"emoji" = "Emoji"; +"recents" = "Recents"; +"clips" = "Clips"; +"select" = "Select"; +"select_gif" = "Select GIF"; +"select_sticker" = "Select Sticker"; +"select_clip" = "Select Clip"; +"select_emoji" = "Select Emoji"; +"more_from" = "More from %@"; +"remove_from_recents" = "Remove from recents"; +"back" = "Back"; +"information" = "Information"; +``` + +#### Adding More Languages +1. Add a New Language: + - In Xcode, select your project. + - Go to the `Info` tab and click the `+` button under `Localizations`. + - Select the new language you want to add. +2. Localize `Localizable.strings` File: + - Xcode will prompt you to localize `Localizable.strings` for the new language. + - Add translations for your strings in the newly created `Localizable.strings` file. + + +### Android Localization + +#### Adding Localization Files + +1. Create strings.xml file if it's not available: + - In your Android project, navigate to the `res/values` folder. + - Right-click on the values folder and select `New` > `Value Resource File`. + - Name the file `strings.xml` and click OK. +2. Adding Strings:: + - Open `strings.xml` and add your string resources. + +#### Example strings.xml + +``` + + GiphyReactNativeSdk Example + Retry + Oh NO! Something Went Wrong. + Search GIPHY + GIFs + Clips + Stickers + Select + Select GIF + Select Clip + Select Sticker + Select Emoji + Back + Back + View on GIPHY + Copy Link + More by @%1$s + Text + Emoji + Recents + No GIFs found + No stickers found + No text found + No recents found + No clips found + Remove + More by You + The clip is currently unavailable + Clear search + Information + +``` + +#### Adding More Languages +1. Create New Values Folder: + - To add a new language, create a new values folder with the language code. For example, for French, create a folder named `values-fr`. + - Right-click on the `res` folder, select `New` > `Directory`, and name it `values-fr`. +2. Create strings.xml File: + - Inside the newly created `values-fr` folder, right-click and select `New` > `Value Resource File`. + - Name the file `strings.xml`. +3. Add Translations: + - Open the newly created `strings.xml` file and add your translations. + + +### Device-Based Language Setting + +Our SDK now bases its localization on the device's language settings rather than on an app-basis. This means that your app will automatically adapt to the language configured on the user's device, providing a seamless and intuitive user experience. + +#### Benefits of Device-Based Localization: +- Consistency: Users experience the app in their preferred language without needing to configure language settings within the app. +- Simplicity: Developers don't need to implement additional logic to handle language selection within the app. +- User Experience: Enhances the user experience by ensuring the app language matches the device's language settings. \ No newline at end of file