How do I make my i18n-js text is render properly when imported from json files?

Question

I've developed an app in React Native and Expo managed workflow. I want the app to be available in other languages, so I integrated i18n-js into the app. I followed a tutorial online explaining how to integrate i18n-js into my app, but the way the words are being imported, requires me to Ctrl+S when navigating between pages, otherwise it'll come up as:

[missing "en-US.word" translation]

Has anyone encountered this issue?

Below is how I set up translations, and imported them into files:

1. Created a folder called "locales" that lives in the same spot as my files (so it's a direct './' import.

2. Created 2 files in the folder called "en.json" and "fr.json"

   Translations in this file are set up like so:

 {

   "sentence" : "This is a sentence.",

   "sentence2" : "This is another sentence",
 
 }

3. Created a file in the same folder called "index.js"

   index.js is set up like so:

import i18n from 'i18n-js'
import * as Localization  from 'expo-localization'

import en from './en.json'
import fr from './fr.json'

i18n.translations = {
    en,
    fr
}

const getLanguage = async() => {
    try{
        const choice = await Localization.locale
        i18n.locale = choice.substr(0,2)
        i18n.initAsync()
    }catch (error){
    console.log("Unable to locate")
    }
}

getLanguage()

export function t(name){
    return i18n.t()
}

4. Import the translations into a given file:

import { t } from './locales'

i18n.locale = Localization.locale;
i18n.fallbacks = true

...

<Text style = {styles.text}> {i18n.t('sentence')}</Text>

...