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

React Hooks

Cat Humor Kittens and Cats are our Life | Top 10 Cats Compilation

day 15 of my #1000daysofcoding

9 Ways to Manipulate and Work With Components in React

React/Rails Full Auth From Scratch using (JWT) Part I

Tech I Used Last Week => React Hooks

How Chrome Extension simplified part of my tasks

The Call Stack, Web APIs, and Event Loop

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

Difference Between React and React Native — Geekstrick

ReactJS VS React Native: Key Differences

Benefits of using React for Business