Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-native-localization-modified
Advanced tools
Simple module to localize the ReactNative interface
Class to localize the ReactNative interface.
Use react-localization if you want to share code with a React project.
I just needed a dead simple way to internationalize my first React Native app.
At the beginning I thought I'd expose the native iOS internationalization API (NSLocalizedString macro) to React Native, but then I've opted for a solution that seems, at least to me, more in the spirit of React (and I hope better performance wise).
In this implementation we can keep the localized strings in the same file of the React View in a similar way of how Styles are implemented (I don't deny that this approach could lead to some duplications in the translated strings, but it could be feasible to create a CommonJS module to use as common source of the strings, requiring it in the different views).
The Javascript library uses a native library (ReactLocalization) to get the current interface language, then it loads and displays the strings matching the current interface locale or the default language (the first one if a match is not found) if a specific localization can't be found.
It's possible to force a language different from the interface one.
The easiest way to install: use rnpm, the react native package manager. (If you don´t have it: install it via npm install rnpm -g
)
Just run rnpm install react-native-localization
inside your react-native project folder and you are ready to go. Don´t forget to restart the app / node server or you will see an error.
If you're installing for Android you should still manually execute step 4 of "Manual installation Android".
npm install --save react-native-localization
Add Files to <...>
node_modules
➜ react-native-localization
and add the ReactNativeLocalization.xcodeproj
filenpm install --save react-native-localization
In android/setting.gradle
...
include ':ReactNativeLocalization', ':app'
project(':ReactNativeLocalization').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localization/android')
In android/app/build.gradle
...
dependencies {
...
compile project(':ReactNativeLocalization')
}
register module (in MainApplication.java)
import com.babisoft.ReactNativeLocalization.ReactNativeLocalizationPackage; // <--- import
public class MainApplication extends Application implements ReactApplication {
......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactNativeLocalizationPackage()
);
}
......
}
(Thanks to @rebeccahughes for showing by example how to create an android module for React Native)
In the React class that you want to localize require the library and define the strings object passing to the constructor a simple object containing a language key (i.e. en, it, fr..) and then a list of key-value pairs with the needed localized strings.
// ES6 module syntax
import LocalizedStrings from 'react-native-localization';
// CommonJS syntax
// let LocalizedStrings = require ('react-native-localization');
let strings = new LocalizedStrings({
en:{
how:"How do you want your egg today?",
boiledEgg:"Boiled egg",
softBoiledEgg:"Soft-boiled egg",
choice:"How to choose the egg"
},
it: {
how:"Come vuoi il tuo uovo oggi?",
boiledEgg:"Uovo sodo",
softBoiledEgg:"Uovo alla coque",
choice:"Come scegliere l'uovo"
}
});
Then use the strings
object literal directly in the render method accessing the key of the localized string.
<Text style={styles.title}>
{strings.how}
</Text>
The first language is considered the default one, so if a translation is missing for the selected language, the default one is shown and a line is written to the log as a reminder.
en:{
bread:"bread",
butter:"butter",
question:"I'd like {0} and {1}, or just {0}"
}
...
strings.formatString(strings.question, strings.bread, strings.butter)
Beware: do not define a string key as formatString
or language
!
To force a particular language use something like this:
_onSetLanguageToItalian() {
strings.setLanguage('it');
this.setState({});
}
It's also possible to set the language directly in your Xcode project using the following code snippet:
[[NSUserDefaults standardUserDefaults] setObject:[NSArray arrayWithObjects:@"de", nil] forKey:@"AppleLanguages"];
Replace de
with a supported locale identifier to test.
Check out the WIKI page for additional informations.
Feel free to contact me on Twitter or open an issue.
FAQs
Simple module to localize the ReactNative interface
The npm package react-native-localization-modified receives a total of 1 weekly downloads. As such, react-native-localization-modified popularity was classified as not popular.
We found that react-native-localization-modified demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.