https://github.com/colorfy-software/localify
🌍 Localization for React Native made simple.
https://github.com/colorfy-software/localify
android i18n ios localization react-native
Last synced: 2 months ago
JSON representation
🌍 Localization for React Native made simple.
- Host: GitHub
- URL: https://github.com/colorfy-software/localify
- Owner: colorfy-software
- License: mit
- Created: 2022-09-21T12:10:07.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-02T09:17:04.000Z (over 2 years ago)
- Last Synced: 2025-09-30T09:33:26.676Z (9 months ago)
- Topics: android, i18n, ios, localization, react-native
- Language: Java
- Homepage: https://www.npmjs.org/package/@colorfy-software/localify
- Size: 456 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
🌍 Localify
Localization for React Native made simple.
## 🎯 Purpose
Localify helps you handle localization in your React Native apps with first class Typescript support: simply autocomplete your way through your translation files.
## 🏗️ Installation
```sh
yarn add @colorfy-software/localify react-native-localize i18n-js
npx pod-install ios --yes
```
## 💻 Usage
### Setup
#### App
```ts
// ./index.tsx
import { AppRegistry } from 'react-native'
import Localify from '@colorfy-software/localify'
import App from './src/App'
const translations = {
en: require('./src/locales/en.ts'),
de: require('./src/locales/de.ts'),
} as const
Localify.init({
// mandatory
translations,
// optional
defaultSeparator: '.',
// optional
fallback: { languageTag: 'en', isRTL: false },
})
AppRegistry.registerComponent('main', () => App)
```
#### Jest
```js
// ./jest.setup.js
// (or wherever you have your Jest config's setupFiles file)
process.env.JEST = true // add this line
```
### With TypeScript & autocomplete
See steps
```ts
// ./src/locales/index.ts
import Localify, { ValueMapType, currentLocale, currentLocaleCode } from '@colorfy-software/localify'
// Example of what en.ts has to look like:
// export default {
// general: {
// activity: 'Activity',
// home: 'Home',
// settings: 'Settings',
// tips: 'Tips',
// logout: 'Log out',
// },
// errors: {
// requiredField: 'This field is required',
// passwordTooLong: 'Password needs to be less than **{{maxLengthValue}}** characters long.',
// invalidEmail:
// "Sorry, **{{email}}** is not a valid email address. Please double check the email you've entered and try again.",
// passwordRules:
// 'Your password must be **at least 8 characters long**, with at least three of the following kinds of characters: **uppercase, lowercase, number, and/or symbols**.',
// },
// } as const
// 👆 notice the `as const`.
import type en from './en'
type ContextType = keyof typeof en
const getLocalizedString = <
C extends ContextType,
K extends keyof typeof en[C],
V extends ValueMapType,
R extends typeof en[C][K],
>(
context: C,
key: K,
...values: keyof V extends never ? [never?] : [V]
): R => Localify.getLocalizedString(context, key, values)
export { currentLocale, currentLocaleCode, getLocalizedString }
```
This is required so that you can define your preferred language for the TypeScript-powered autocompletion. Now, you'd have to import everything from `./src/locales/index.ts` instead of the library, `getLocalizedString()` being the
most important here:
```ts
// ./src/App.tsx
import * as React from 'react'
import { StyleSheet, SafeAreaView, Text } from 'react-native'
import { currentLocale, getLocalizedString } from './locales'
export default function App() {
return (
{currentLocale()}
{getLocalizedString('general', 'home')}
{getLocalizedString('errors', 'invalidEmail', { email: 'info@colorfy.me' })}
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
})
```
### Without TypeScript/autocomplete
See steps
```ts
// ./src/App.tsx
import * as React from 'react'
import Localify from '@colorfy-software/localify'
import { StyleSheet, SafeAreaView, Text } from 'react-native'
export default function App() {
return (
{Localify.currentLocale()}
{Localify.getLocalizedString('general', 'settings')}
{Localify.getLocalizedString('errors', 'passwordTooLong', { maxLengthValue: '50' })}
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
})
```
## 🤝 Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## 💖 Code of Conduct
This library has adopted a Code of Conduct that we expect project participants to adhere to. Please read the [full text](https://github.com/colorfy-software/localify/blob/main/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
## 📰 License
localify is licensed under the [MIT License](https://github.com/colorfy-software/localify/blob/main/LICENSE).