Multi-language Text with React Native & React Context

Photo from: pixabay.com

We have been waiting for reacts’ official Context support since the dawn of man kind.

— Sir Charles Darwin

1. Creating Our Context

export const LanguageContext = React.createContext({
language: 'swahili', // default language is Swahili
changeLanguage: () => null
});
export class LanguageProvider extends Component {
constructor(props) {
super(props);
this.state = { language: 'swahili' }
this.changeLanguage = this.changeLanguage.bind(this);
}
changeLanguage() {
this.setState({
language: this.state.language === "swahili" ? "english":"swahili"
});
}
render() {
return (
<LanguageContext.Provider
value={{
language: this.state.language,
changeLanguage: this.changeLanguage
}}>
{this.props.children}
</LanguageContext.Provider>
)
}
}

2. Creating Our Custom Text Element

import React, { Component } from 'react';
import { Text } from 'react-native';
import {
LanguageProvider,
LanguageConsumer
} from './LanguageContext';
export default function CustomText (textArray) {
return (
<LanguageProvider>
<LanguageConsumer>
{
({ language })=> (
<Text>
{
language === 'swahili' ?
textArray[0] : textArray[1]
}
</Text>
)
}
</LanguageConsumer>
</LanguageProvider>
)
}

3. Using Our Text Element

import React, { Component } from 'react';
import CustomText from './CustomText.js';
export default class ExampleClass extends Component {
render() {
return (
<CustomText text={["Mambo Dunia", "Hello World"]} />
)
}
}

Full Source Code:

import React from 'react'export const LanguageContext = React.createContext({
language: 'swahili', // default language is Swahili
changeLanguage: () => null
});
export class LanguageProvider extends Component {
constructor(props) {
super(props);
this.state = { language: 'swahili' }
this.changeLanguage = this.changeLanguage.bind(this);
}
changeLanguage() {
this.setState({
language: this.state.language === "swahili" ? "english":"swahili"
});
}
render() {
return (
<LanguageContext.Provider
value={{
language: this.state.language,
changeLanguage: this.changeLanguage
}}>
{this.props.children}
</LanguageContext.Provider>
)
}
}
import React, { Component } from 'react';
import { Text } from 'react-native';
import {
LanguageProvider,
LanguageConsumer
} from './LanguageContext';
export default function CustomText (textArray) {
return (
<LanguageProvider>
<LanguageConsumer>
{
({ language }) => (
<Text>
{
language === 'swahili' ?
textArray[0] : textArray[1]
}
</Text>
)
}
</LanguageConsumer>
</LanguageProvider>
)
}
import React, { Component } from 'react';
import CustomText from './CustomText.js';
export default class ExampleClass extends Component {
render() {
return (
<CustomText text={["Mambo Dunia", "Hello World"]} />
)
}
}

Bonus: Toggling the Current Language

class AnotherClass extends Component {
render() {
return (
<LanguageProvider>
<LanguageConsumer>
{
({ changeLanguage }) => (
<TouchableOpacity
onPress={changeLanguage}
>
<CustomText
text={[
"Badilisha Lugha",
"Change Language"
]} />
</TouchableOpacity>
)
}
</LanguageConsumer>
</LanguageProvider>
)
}
}

--

--

--

Working at the intersection of technology and impact. Love for anything technology, passionate about anything Africa.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Node JS interview Quesions

How To Make Twitter Follow Bot in DevTools Console

Simplifying Web Architecture for Beginners

https://en.wikipedia.org/wiki/Client%E2%80%93server_model

Variables in JavaScript

Realtime chat app with laravel 5.4 and vuejs 2

How to Create Installer for JxBrowser Application

Angular 13: Noteworthy Add-ons, Enhancements, and Modifications!

An approach to better quality performant front end code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ally Salim

Ally Salim

Working at the intersection of technology and impact. Love for anything technology, passionate about anything Africa.

More from Medium

ReactJS VS React Native: Key Differences

Shrink.media | Made with React JS

React Parent-Child Components

Performance Optimizations using Redux Reselect