feat: add direction prop to PaperProvider and useLocale hook for RTL support

[hristototov]

Motivation

Components in react-native-paper read RTL state directly from
I18nManager.getConstants().isRTL. This has two issues:

• I18nManager is a no-op on React Native Web, so RTL breaks entirely on Web
• The value is read at module load or render time with no way to override it reactively

Solution

New: useLocale() hook

import { useLocale } from 'react-native-paper';

const { direction } = useLocale(); // 'ltr' | 'rtl'

<PaperProvider direction="rtl">
  {children}
</PaperProvider>

Defaults to I18nManager.getConstants().isRTL when not provided, so existing apps are unaffected. Setting the prop does not call I18nManager.forceRTL or modify any native state; it only tells Paper which direction to use for rendering.

Related issue

N/A
Notion link

Test plan

• Add direction="rtl" to PaperProvider in the example app and verify RTL layout renders correctly across components
  Remove the prop and verify the app falls back to I18nManager (default behaviour unchanged)
• On React Native Web, set direction="rtl" and verify RTL layout works
• All existing tests pass (yarn test)

[github-actions]

The mobile version of example app from this branch is ready! You can see it here.

[adrcotfas]

We get a new object on every render and this affects FPS and re-render counts on screens that use Paper components.
We already memoizes theme and settingsValue. Do the same for this too.

[hristototov]

updated

[callstack-bot]

Hey @hristototov, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[satya164]

Thanks for the PR. I left some comments. In addition, lets do the following:

• Export a LocaleProvider like done for ThemeProvider, so user can wrap a specific subtree in a different locale if needed. The defaults etc., can live in this component directly instead of a getDefaultDirection export
• Inherit the nearest locale in Portal.tsx as done for the theme
• Update documentation. Here is an example https://reactnavigation.org/docs/navigation-container/#direction

[satya164]

It shouldn't provide a default locale in the context itself. It must be provided when rendering the provider so it stays consistent, and components outside the tree properly throw.

The useLocale hook should throw an error when used outside the provider.

Suggested change

	export const LocaleContext = React.createContext<LocaleContextValue>({
	direction: getDefaultDirection(),
	});
	export const { Provider: LocaleProvider } = LocaleContext;
	export const useLocale = () => React.useContext(LocaleContext);
	export const LocaleContext = React.createContext<LocaleContextValue | undefined>();
	export const { Provider: LocaleProvider } = LocaleContext;
	export function useLocale() {
	const locale = React.useContext(LocaleContext);
	if (locale === undefined) {
	throw new Error("Couldn't find a locale. Is your component inside PaperProvider?");
	}
	return locale;
	}