@graphics-i18n/react-native

React Native renderer for LPKG localized graphics (@graphics-i18n/core), drawing via @shopify/react-native-skia. The core pipeline API (loadLocalizedGraphic, types, …) is re-exported from this package for convenience.

Installation

pnpm add @graphics-i18n/react-native @shopify/react-native-skia

Peer dependencies: react >= 18, react-native >= 0.73 and @shopify/react-native-skia >= 1.0.0.

Metro must treat packages as assets — add lpkg to resolver.assetExts in your metro.config.js:

const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('lpkg');
module.exports = config;

Usage

import { LocalizedGraphic } from '@graphics-i18n/react-native';

<LocalizedGraphic source={require('./banner.lpkg')} locale="fr" width={360} />;

See the core documentation for format and behavior details, and @graphics-i18n/react for the web renderer. A working demo lives in apps/example-react-native in the repo.

React Native-specific notes

  • Text is measured with Skia fonts (package-embedded typefaces first, then system font matching; unknown families fall back to the platform default so text always renders).
  • Images/SVGs are decoded lazily for visible nodes only and cached by asset id + hash; fonts are decoded once per package.
  • The debug prop draws node bounds on the canvas and overlays locale/patch/diagnostic info.
  • Underline/strikethrough text decorations are not drawn (Skia <Text> limitation in this renderer).