i18n with solito

[peelmicro]

Has anybody integrated any i18n library with solito?

I'm trying to make it work with https://github.com/i18next/i18next but there are many issues on both Next and Expo sides.

I think maybe https://github.com/i18next/next-i18next must be used for the Next part but I'm not sure how to make it work for Expo as well.

[SushritPasupuleti]

You can refer to this repo I put together that allows you to work with i18n on both next and expo, and share components.

[peelmicro]

Wow, thanks for sharing it, I appreciate it a lot. I'll take a look at it.

[enesozturk]

@SushritPasupuleti, In the repo you shared, you have three different /locales folders and both the Next app and Expo app use different folders for internalization. Won't it be hard to keep the localization files syched?

[SushritPasupuleti]

@SushritPasupuleti, In the repo you shared, you have three different /locales folders and both the Next app and Expo app use different folders for internalization. Won't it be hard to keep the localization files syched?

It could be done with symlinks, I tried it the other way it was a bit too messy. your approach below is quite detailed thanks!

[enesozturk]

Here is how I set up the internalization for Solito:

In /app/utils/localization folder:

- /locales
  - en
     - common.json
  - tr
     - common.json
- index.js
- index.web.js

Setup Files

/packages/app/utils/localization/index.ts (mobile)

import * as Localization from 'expo-localization'
import { I18n } from 'i18n-js'

import en from './locales/en/common.json'
import tr from './locales/tr/common.json'

export const i18n = new I18n({
  en: en,
  ja: tr,
})

i18n.locale = Localization.locale
i18n.defaultLocale = 'en'
i18n.enableFallback = true

export const useTranslation = (file: string) => {
  const changeLanguage = () => {
    // TODO
  }

  return {
    t: i18n.t,
    i18n,
    language: i18n.locale,
    changeLanguage,
  }
}

/packages/app/utils/localization/index.web.ts (web)

import { i18n, useTranslation as useNextTranslation } from 'next-i18next'
import { useRouter as useNextRouter } from 'next/router'
import { useRouter } from 'solito/router'

export const useTranslation = (file: string) => {
  const { push } = useRouter()
  const { t, i18n } = useNextTranslation(file)
  const { pathname, asPath } = useNextRouter()
  const changeTo = i18n.language === 'en' ? '' : 'en'

  const changeLanguage = () => {
    push(`/${changeTo}${pathname}`, `/${changeTo}${asPath}`, {
      locale: false,
    })
  }

  return {
    t,
    i18n: i18n,
    language: i18n.language,
    changeLanguage,
  }
}

Configs

/app/next/next-i18next.config

const path = require('path')

module.exports = {
  i18n: {
    defaultLocale: 'tr',
    locales: ['en', 'tr'],
    localeDetection: false,
    localePath: path.resolve('../../packages/app/utils/localization/locales'),
  },
}

/app/next/next.config.js

const { i18n } = require('./next-i18next.config')

/** @type {import('next').NexConfig} */
const nextConfig = {
  // 👇🏼
  i18n,
  reactStrictMode: true,
  swcMinify: true,
  typescript: {
    ignoreBuildErrors: true,
  },
  webpack5: true
}

const { withExpo } = require('@expo/next-adapter')
const withFonts = require('next-fonts')
const withImages = require('next-images')
const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')([
  'app',
  'solito',
  'dripsy',
  '@dripsy/core',
  'nativewind',
  'zeego',
])

module.exports = withPlugins(
  [withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],
  nextConfig
)

Info

They both doing the same thing but;

• Mobile app uses expo-localization and i18n-js
• Web app uses next-i18next (which is uses react-i18n on the background)

⚠️ Usage for Next.js

For the Next pages, you should use the getServerSideProps to be able to work with internalization.

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import { LandingScreen } from 'app/features/landing-page/screen'

export default LandingScreen

export const getServerSideProps = async ({ locale }: { locale: string }) => ({
  props: { ...(await serverSideTranslations(locale, ['common'])) },
})

More

For more, you can checkout the following links:

• https://github.com/i18next/next-i18next
• https://docs.expo.dev/versions/latest/sdk/localization/

[felippewick]

How would you add a date formatted?

format: function (value, format, lang) { if (value instanceof Date) { console.log('value in formatter ', value) return moment(value).format('MMMM YYYY') } return value },

[nickreese]

@enesozturk Hey! Thanks for sharing this. Any more learnings since implementing this?

What was the reasoning for using different libraries? Purely app size? The feature set doesn't seem to be the same.

[enesozturk]

Hey @nickreese, sorry for the late response. The way of working of the two packages is different. next-i18next is have server-side implementations and is a kind of must-use for Next.js and expo-localization doesn't do that. So we have to use them separately.

The feature set is actually mostly same, when you see the files that I provided, same hooks are used for localization.

[clayrisser]

How do I use solito to change routes with i18n. I'm using next-i18next