Hello, Transifex Community! It’s me, Carlos from the Customer Success Team!! 
. Today, I’m thrilled to share another post for our “Did You Know?” series—your ultimate guide for insider tips and tricks to maximize your experience on our platform.
Today we are talking about how to manage plurals in React Native SDK.
Many JavaScript frameworks, such as React, make use of JSON (JavaScript Object Notation) for data representation, including translation handling. In JSON, each key is associated with a value, which could be a translation string, a nested list, or even a nested JSON document. This structure allows for efficient management of both simple and complex translations.
Take this example:
{
"join": "Join",
"nest": {
"split": "Split",
"another_nest": {
"split": "Split"
},
"list": ["List", "Values", {"JSON": {"Embedded": "Document"}}]
},
"files": "{count, plural, one {{count} file.} other {{count} files.}}"
}
The Importance of Complete Sentences in Plural Forms
When working with pluralization in frameworks like React, it’s crucial to always provide complete sentences for both the singular and plural forms. This ensures that the translation makes sense no matter the context. For instance, a sentence with one file should differ from a sentence with multiple files, both grammatically and logically.
Transifex supports pluralization using ICU message format rules. Here’s an example in React, showing how plural rules can be implemented for different scenarios:
import { StyleSheet, Text, View } from 'react-native';
import { tx } from '@transifex/native';
import { T } from '@transifex/react';
tx.init({
token: '<token>',
});
export default function App() {
return (
<View style={styles.container}>
<Text><T _str="Hello world" /></Text>
<T _str="Hello username" />
{/* Proper plural handling for messages */}
<T
_str="{cnt, plural, one {You have {count} message} other {You have {count} messages}}"
cnt={number}
/>
{/* Pluralized notifications */}
<T
_str="{cnt, plural, one {You have {count} notification.} other {You have {count} notifications.}}"
count={5}
/>
{/* Example with animals */}
<T
_str="{cnt, plural, one {RSVP: {count} duck swimming} other {RSVP: {count} ducks swimming in a pond}}"
count={10}
/>
{/* Another variation */}
<T
_str="{count, plural, one {RSVP: 1 dog swimming} other {RSVP: {count} dogs swimming in a pond}}"
count={10}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
In this example, each pluralized entry has a complete sentence for both the singular and plural forms, ensuring the translation fits regardless of the count. This approach is vital for maintaining clarity and grammatical correctness in different languages.
Always remember: each plural form should include a fully thought-out sentence—one for singular and one for plural—ensuring that your translations read naturally in every context!
Are You Excited For This? We can’t wait to hear your thoughts and see how you implement this changes in your projects!
Join the Conversation: Thank you for reading! If you have any questions or want to share your experience with Plurals In React Native, join us in the comments below or in our forum. And don’t forget to stay tune in next week for another exciting “Did You Know?” Tip!