5.1 Internationalisation

Internationalisation is a big part of modern apps. BlueBase has built-in support for translations and right-to-left (RTL) text support.

Go you the Settings app, and select a language. If the language needs RTL, BlueBase will change orientation automatically.

Changing content direction on native requires app to be restarted.

iOS

Web

You can add support for any language you desire. Here are the steps on how to do this:

Step 1: Adding Language to the system

We support English and Urdu languages by default. If you need to add support for any other language just pass them to the locale.options object in your configs file, where the key of the object is the language code, and value is the language name.

configs.ts

export const configs = {

	'locale.options': {
		en: 'English',
		fr: 'French',
		ur: 'اُردُو',
	},

	// ... Other configs
};

Step 2: Provide Translations

Next, we have to create a dictionary, that the system can refer to when attempting to translate a string. The dictionary is an object where where original string is the key, and the translated version is the value.

src/lang/ur.ts

import { IntlMessages } from '@bluebase/core';

export const ur = (messages: IntlMessages) => ({
	...messages,

	'Title': 'عنوان',
	'Description': 'تفصیل',
	'Pending': 'زیر التواء',
	'Completed': 'مکمل',

	'Tasks': 'کام',
	'My Tasks': 'میری ٹاسکس',
	'No tasks': 'کوئی کام نہیں',
	'Start by creating a new task': 'ایک نیا کام بنا کر شروع کریں۔',
	'Create Task': 'ٹاسک بنائیں',
	'Edit Task': 'ٹاسک ترمیم کریں',
	'Update Task': 'ٹاسک تدوین کریں',
});

export default ur;

The way to do it is, we create a function that takes a dictionary as input, and we return that dictionary by appending our own translations to it. This is because the translations feature in BlueBase is built upon its Filters feature.

src/lang/index.ts

import { ur } from './ur';

export const lang = {
	'bluebase.intl.messages.ur': ur,
};

The filter key for format to add translations is: bluebase.intl.messages.${language_code}. So for french language it would be bluebase.intl.messages.fr.

When we have all our language filters setup, we just need to add them to the filters object in the plugin.

src/index.ts

import { createPlugin } from '@bluebase/core';

import { ToDoAppIcon } from './components/ToDoAppIcon';
import { lang } from './lang';
import { routes } from './routes';
import { screens } from './screens';

export default createPlugin({
	key: 'tasks',
	name: 'Tasks',
	description: 'A todo app made with BlueBase framework.',

	filters: {
		...lang,
	},
	
	// ... other plugin properties
});

Step 3: Translating Strings

While we attempt to give built in conversion support for our official plugins, you may still need to do one additional step to convert your string to the current locale.

We'll take example of our TaskListEmptyState component. When you select a language different than English, you will note that the text is still not translated. Let's change that.

iOS

Web

Go to your component and change to code to the following:

src/components/TaskListEmptyState/TaskListEmptyState.tsx

import { ComponentState, ComponentStateProps } from '@bluebase/components';
import { useIntl, useNavigation } from '@bluebase/core';
import React, { useCallback } from 'react';

export interface TaskListEmptyStateProps extends ComponentStateProps {}

export const TaskListEmptyState = (props: TaskListEmptyStateProps) => {
	const { __ } = useIntl();
	const { navigate } = useNavigation();

	const goToCreate = useCallback(() => navigate('CreateTask'), []);

	return (
		<ComponentState
			title={__('No tasks')}
			description={__('Start by creating a new task')}
			actionTitle={__('Create Task')}
			imageProps={{ resizeMode: 'contain' }}
			actionOnPress={goToCreate}
			actionProps={{ size: 'small', color: 'success', variant: 'outlined' }}
			{...props}
		/>
	);
};

TaskListEmptyState.displayName = 'TaskListEmptyState';

You will note that:

• Line 2: We import useIntl hook from @bluebase/core.

• Line 9: We extract the __ function from the useIntl() hook.

• Line 15-17: We use the __ function to translate strings.

That's all! Since we have already provided translations to these strings in previous step, when you refresh the app you will now observe the text to be converted.

iOS

Web