Multi language done easily in React Native (2020)

hello everybody and welcome to another video today I will show you how you can really easily add multiple languages to your application in react native and yeah I'm the patient just gonna get started to show how how that can potentially be done so the first thing you want to do is to add a package and we only just already need one package and that's gonna be react native localize so let's start off by adding that one and then as soon as we're done we can go to iOS and then you Polly install if you're an Android I believe we already done we don't need to do it anything else but if we on iOS we need to do this additional step when that's done you can see the back into our app and call react native on iOS just to recompile things and while that's happening I'm gonna do a little change to my coat so the code I have here is just a static code you get when you start on your project with the react native CLI so yeah let me just add a source folder here because I don't like to have my JavaScript stuff in the root with all the configuration so move it in here make sure we go inside index here and update that to source that app cool now the approach I'm gonna use to translate this app into different languages is to have a global context provider that has the responsibility of doing this so instead of østfold I'm gonna create a context folder and alongside that context for concept Poland was gonna be a length older here I'm gonna have my JSON files for the language it's like context I'm gonna create a new file I'm just gonna call it blank context and yeah one note here I'm using typescript but the coding about to write is very similar no matter if you are in typescript that JavaScript doesn't matter too much so let's jump into the language that context file so here is where we will define our context provider and also at the end to find a hook so we can grab that language context from any file alright but the first thing first let's create our component here and I'm gonna modify it a little bit the default one here so first of all I'm gonna make this into a named export so export Const language context then I'm gonna add provider at the end here just emphasize that the provider and then I'm gonna define the context I'm just gonna call it language context and I'm gonna use the react object and then call create create context context yeah ok cool now now in my provider I can go here grab the language context then access to provider it has any value and in here I can rent out children for example so whatever we nest inside this component will be rendered out here okay that's looking good we haven't defined value yet so let's just define that to an empty object for now all right perfect so now what's the next step so first of all we need our some files basically that represent what we're trying to translate so for that I'm gonna open up my door here then create new folder called lang and inside here I'm gonna create my two files so in my app I want to support English so I'm gonna make an en done Jason and also I'm gonna support Chinese and that's gonna be seen HG now I'm gonna put a translation in yeah I'm just gonna put in one since I'm not gonna transfer ate a whole bunch of string so I'm just gonna show you how it works and the string I want to translate is hello so I'm gonna copy whatever is inside my Ian - Jason into my set HR Jason and then I'm just gonna do the translation he has the key so I'm trying to translate the word hello and in Chinese just gonna be me huh like that okay save that now I can jump back into this file and then import my to Anchorage Jason's here so we do that in typescript with just a non important so we can do import en from like he and adjacent and also for my Chinese file I'm gonna import set age from oh sorry press the debug key vines Lang all right those are my two language files so if you're doing this for the first time in typescript you might get an error here not this air about another error the complaints about oh sorry yeah that complains about this time imports with doing an adjacent import in order to solve that you can go to your TS config and in here you can see it resolved JSON module to true after setting this to true you should not get that error anymore and you should also be getting order complain so if I do Ian dot I can see that inside this JSON file and have a Hello key so that's working pretty sweet alright next step is I'm going to define a variable in here and that's gonna be an object just gonna call it language object and here I'm gonna define two keys and these two keys are gonna be the language code of the different languages on the phone and I've done some pre-work so speak so I know how they look so for English it's gonna be en pretty straightforward and I'm going to put the value to the English Dishman here and for Chinese if you want to use simplified Mandarin Chinese the language code is ch hands us okay like this and I'm gonna show you later how you can figure this out okay so this I'm gonna sign that this eh that would be my Chinese fire okay perfect perfect we destroy again so we have our two languages here in my language object now we can jump into the component again and create our first bit of state here so I'm gonna create a state called selected language and that's basically gonna be in the language we're currently using and I'm gonna set that to default en okay now next step is we need to create a user fact and inside this use effect we are gonna basically do the core of this provider and it's not too much so have a look here so here's effect just to find that let's put in a function and then in the dependency list it's just put an empty array alright looking good now in the function body I want to first of all I want to grab the language of the phone let's do that I'm gonna use my package the package we edit in the beginning so I'm gonna find it a variable called current language I'm gonna go up here and import my localized package so import everything as RM localized from react native localize okay when I got this objects I can call the method on it called fine best available language all right zoom a little bit so this fine best available language will try and find the best language on the phone according to the languages that we support in our case we support English and Chinese so we want to pass in an array of strings with these two values and since we have an object here we can call object that keys on it and in this way we get just this value yen and this value so we have that we get that array of supported languages now what's what this function is gonna do is it's gonna look at the current language of the phone and then see if it can match any of these and then it's just gonna return that language code so currently my phone is in English so if we were join yen okay and just a quick look here if we hover over find best available language we can see that it actually returns an object here with a language tag and then is our TL boolean value and the language tag will be the one we're interested in for setting the selected language here so we can do set selected language and then do current language dot language tag and then you can see tack script automatically added this question mark and the reason is that there is a chance that find best available language might be undefined you might not get any available language so we're gonna create a fallback here with the pipe and the fallback is just gonna be English okay cool we're pretty far almost done actually now we just need to define this value down here and the value is basically gonna be all our translations so if I want to grab the translation of hello I can just yeah get that value directly now nesting by anything so in order to do that we're gonna need to use this but operator here on our language object here and then we are gonna jump into this language object on one of these spots even either en or CH hands us and for that I'm going to use selected language so whatever language we have are using currently save that here you're gonna get an error in typescript and that's because selected language is just said - it can be any string and then station is expecting you know the hello oh sorry it's expecting a selected language to be one of these two keys here to fix that error you can do an else here and then just type them out so as M or CH and US and actually fixed errors here we're just setting typescript mad we're sure that this is like the language it's gonna be one of these two and that's gonna remove the error okay cool beans I think we are looking pretty neat just one last thing so in case you're wondering how I this is language code here all I did was just console.log are in localized and then you can do get locals this is gonna print all the different locals on the phone okay that's pretty simple now our plan is basically set up here now I'm gonna just create a bear at one line here basically a function and that's gonna allow us to grab our translations in all of our different components so that looks like this use translation and here I can define an function and inside my function you know to use context and then point at my context which is language context so the one we defined up here okay we exporting these two two things looking good now now I kind of want to add this language context to my app so currently I'm just using the boilerplate here from the rig native in it CLI so how can I add this comp language contact provider to this app so there's one way I could do it and I'll just add it directly here but then I wouldn't be able to use my use translation inside this file because I will have to provider in one file together with my use context and that doesn't work so I need to kind of go one level able to utilize this hook down here okay so what I can do is instead of children here I can put in my app so import that app and then just put it here okay now what we need to do next is to go to index at Jason and instead of AB we're just gonna put the language context provider here as the most outer layer make sense and yeah now we should basically be able to jump into our AB GS f GS x even and then let's try to grab a translation so I'm gonna use translation here and I'm gonna get some auto import going on click that and you can see I started with some square brackets here I'm expecting maybe two guys all come in here but no not autocomplete and the reason for this is inside my language context I did not provide an interface here you can also see I'm getting an error so I can add an interface here in case I want some very cool autocomplete and I really want that so I'm just going to quickly add an interface or a type even color language context type and well what do I have inside this JSON file just have hello that's the only thing I can translate so far so I'm gonna add that here so remember down here we did use the spread over in here so we had all our different keys in one level so that's why we assign hollom here as our type now let's add that to a context the language context type and yeah that should be it now into passing the default value because now we define that type and I'm just gonna put an empty object in here and then just use the ass here to basically avoid that error I don't want to put a null value here cuz then get a bunch of question marks every acosta - what if the language context is known but in this app it won't be known so that's why I'm doing this sometimes I script that I know what I'm doing so don't worry about it okay cool if you jump back to excuse X now I should be able to control space and I'll get that sweet sweet water coming here so now I can try to output some text so if you jump down here so instead of step one let's try to output hello oh it says hello that's good if I go in here and change it up it's updating that's working now let's try to close this app and jump into the settings now let's go into general I think general yeah and then language and let me choose since your iPhone language here - Chinese Chinese okay adding that now the phone will restart real quick and let's try to open up the app again and there you go guys there is the Chinese translation so basically what happened is this use effect ran it found the best available language we told we told this function that we have en and we have a Chinese available and it picked up on the fact that we are currently currently have the app in Chinese so it picked that language and now we are loading up this file okay hope this was useful in any way and I'll see you in the next one

Channel: Jonas Grøndahl

Views: 9,948

Rating: 4.8805971 out of 5

Keywords: react native, multi language, i18n, multilingual, typescript, typesafe context, react context type, react context, react hooks, support multiple languages, react native language, react native localize, chinese react native

Id: UD6WkO8-QQo

Length: 20min 28sec (1228 seconds)

Published: Wed Jun 03 2020