How to implement localization in Swift UI

There is a thing you can do wrong that's not made very clear in any explanation I've seen. It turns out that Text("hello") is only interpreted as a localization key if you pass it a literal. If you pass a variable of type String, this doesn't happen. The answer is instead to declare the variable as type LocalizedStringKey.

  Text("hello") //-> implicitly treats string literal as a key; looks up and displays "Hello World!"
  let cap1:String = "hello"
  Text(cap1)   //-> no lookup for explicit String variable; just displays "hello"
  let cap2:LocalizedStringKey = "hello"
  Text(cap2)   //-> looks up explicit LocalizedStringKey value; displays "Hello World!"

For swift UI file, you just need to insert string key from localization .strings file

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("selectLanguage")
            Text("languagesList")
        }
        
        
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.locale, .init(identifier: "en"))
    }
}

and this is an example from .strings file

"selectLanguage" = "Select language";
"languagesList" = "Languages list";

result is here:

When you look at documentation for Text you can see that it takes LocalizedStringKey not a String into its initializer:

init(_ key: LocalizedStringKey, tableName: String? = nil, bundle: Bundle? = nil, comment: StaticString? = nil)

It makes localizing very straightforward. All you have to do is:

• create a new file of type "Strings File", call it Localizable.strings
• select the new file and navigate to File Inspector in the right hand side panel and click Localize...
• go to your project file to the Localizations section and add another language to the list - Xcode will create localization files for you

When you select you Localizable.strings you will see that it contains files for the original language and the language you have just added. That's where you put your translations, i.e. key - localized text pairs.

If you have a text like this is your app:

Text("Hello World!")

You have to now add to your Localizable.strings your translations:

for your base language:

"Hello World!" = "Hello World!";

and for your second language (in this case German):

"Hello World!" = "Hallo Welt!";

To see your previews localised you can define them like this:

struct ContentViewView_Previews: PreviewProvider {

    static var previews: some View {
        ForEach(["en", "de"], id: \.self) { id in
            ContentView()
                .environment(\.locale, .init(identifier: id))
        }
    }
}