How Can I Change The Language & Navigate To Another Page Simultaneously? - react-native

Question

Having developed a redux responsible for selecting the application's language, I am facing some difficulties in changing the language and navigating to another page within one click. Two clicks are needed: First Click: Language Update - Second Click: Navigation Process. Getting a quick hand would be highly valued. Here is the source code:
languageActionTypes.tsx
export const SET_ENGLISH = 'SET_ENGLISH';
export const SET_ARABIC = 'SET_ARABIC';
export const SET_ESPANOL = 'SET_ESPANOL';
languageActionCreator.tsx
import * as languageActionTypes from '../ActionTypes/languageActionTypes';
export const setEnglish = () => {
const action = {
type: languageActionTypes.SET_ENGLISH,
};
return action;
};
export const setArabic = () => {
const action = {
type: languageActionTypes.SET_ARABIC,
};
return action;
};
export const setEspanol = () => {
const action = {
type: languageActionTypes.SET_ESPANOL,
};
return action;
};
languageReducer.tsx
import {SET_ENGLISH, SET_ARABIC, SET_ESPANOL} from '../ActionTypes/languageActionTypes';
const initialState = {language: 'en'};
const LanguageReducer = (state = initialState, action: any) => {
switch (action.type) {
case SET_ENGLISH:
return {language: 'en'};
case SET_ARABIC:
return {language: 'ar'};
case SET_ESPANOL:
return {language: 'sp'};
default:
return state;
}
};
export default LanguageReducer;
LanguageSelector.tsx
import React from 'react';
import {SafeAreaView, ImageBackground, Image, Text, View, TouchableOpacity} from 'react-native';
import * as Animatable from 'react-native-animatable';
import {images} from '../../constants';
import styles from './LanguageSelectorStyle';
import {connect} from 'react-redux';
import {setEnglish, setArabic, setEspanol} from '../../store/Actions/languageActionCreator.tsx';
import '../../assets/i18n/i18n';
import {useTranslation} from 'react-i18next';
const LanguageSelector = ({navigation, language, makeEnglish, makeArabic, makeEspanol}: any) => {
const {i18n} = useTranslation();
const transEnglish = () => {
i18n
.changeLanguage(language)
.then(() => {
makeEnglish();
language === 'en' && navigation.navigate('RegistrationLogin');
})
.catch(err => console.log(err));
};
const transArabic = () => {
i18n
.changeLanguage(language)
.then(() => {
makeArabic();
language === 'ar' && navigation.navigate('RegistrationLogin');
})
.catch(err => console.log(err));
};
const transEspanol = () => {
i18n
.changeLanguage(language)
.then(() => {
makeEspanol();
language === 'sp' && navigation.navigate('RegistrationLogin');
})
.catch(err => console.log(err));
};
return (
<SafeAreaView>
<ImageBackground style={styles.backgroundImage} source={images.backgroundImage} resizeMode="cover">
<View style={styles.content}>
<Image style={styles.appLogo} source={images.fullDTTLogo} resizeMode="contain" />
<View style={styles.actionView}>
<Animatable.View
animation="bounceInUp"
iterationCount={1}
iterationDelay={500}
direction="alternate">
<TouchableOpacity
style={styles.actionBtn}
onPress={() => {transEnglish()}}>
<Text style={styles.actionTxtBtn}>English</Text>
</TouchableOpacity>
</Animatable.View>
<Animatable.View
animation="bounceInUp"
iterationCount={1}
iterationDelay={1000}
direction="alternate">
<TouchableOpacity
style={styles.actionBtn}
onPress={() => {transArabic()}}>
<Text style={styles.actionTxtBtn}>Arabic</Text>
</TouchableOpacity>
</Animatable.View>
<Animatable.View
animation="bounceInUp"
iterationCount={1}
iterationDelay={1500}
direction="alternate">
<TouchableOpacity
style={styles.actionBtn}
onPress={() => {transEspanol()}}>
<Text style={styles.actionTxtBtn}>Espanol</Text>
</TouchableOpacity>
</Animatable.View>
</View>
</View>
</ImageBackground>
{console.log('Language:', language)}
</SafeAreaView>
);
};
const mapStateToProps = (state: any) => {
return {
language: state.LanguageReducer.language,
};
};
const mapDispatchToProps = (dispatch: any) => ({
makeEnglish: () => dispatch(setEnglish()),
makeArabic: () => dispatch(setArabic()),
makeEspanol: () => dispatch(setEspanol()),
});
export default connect(mapStateToProps, mapDispatchToProps)(LanguageSelector);

Answer 1

If I understand your requirement correctly, can you expand the translation functions to include a navigate call?
Instead of
onPress={() => {transArabic()}}>
You could try
onPress={() => {
transArabic();
navigation.navigate('someScreen');
}}>