@ledgerhq/native-ui

@ledgerhq/native-ui

Status: DEPRECATED — Deprecated. Migrate to @ledgerhq/lumen-ui-rnative.

Design and interface resources for React Native

This package contains React Native components and styles built on top of our design system and used internally at Ledger.

Reference

Storybook

Installation

Package

npm i @ledgerhq/native-ui

Peer dependencies

This library uses the following packages under the hood and relies on them being installed separately to avoid package duplication.

npm i styled-components react-native-reanimated react-native-svg

Additional setup

Follow the installation instructions for:

• react-native-reanimated
• react-native-svg

Usage

Provider

Before using the library components, the style provider must be imported and rendered once to provide the components with the right context.

import { StyleProvider } from "@ledgerhq/native-ui";

function Root({ children }) {
  // Selected theme palette can be either "dark" or "light".
  return <StyleProvider selectedPalette="light">{children}</StyleProvider>;
}

Components

Import the components from @ledgerhq/native-ui.

import { Flex, Text } from "@ledgerhq/native-ui";

function Hello() {
  return (
    <Flex flexDirection="column" alignItems="center">
      <Text variant="h1" color="neutral.c100">
        Hello, world!
      </Text>
    </Flex>
  );
}

Fonts

Using Expo

expo install expo-font

import { useFonts } from "expo-font";

/*
  A higher-order component that will load and provide Ledger fonts to your app.
*/
function FontProvider({ children }) {
  const [fontsLoaded] = useFonts({
    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return children;
}

React Native - Bare

Add the paths in the react-native.config.js file:

module.exports = {
  assets: [
    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/alpha",
    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/inter",
  ],
};

Then run the following command to add the required native code:

npx react-native link

Minimal Working Example

Hosted here.

Expo

import React from "react";
import { StyleProvider, Flex, Switch, Text, Logos } from "@ledgerhq/native-ui";
import { useTheme } from "styled-components/native";
import { useFonts } from "expo-font";

function Logo() {
  const theme = useTheme();
  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;
}

function FontProvider({ children }) {
  const [fontsLoaded] = useFonts({
    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return children;
}

export default function App() {
  const [palette, setPalette] = React.useState("light");
  const isLight = palette === "light";

  return (
    <FontProvider>
      <StyleProvider selectedPalette={palette}>
        <Flex
          flex={1}
          justifyContent="center"
          alignItems="center"
          flexDirection="column"
          backgroundColor="neutral.c00"
        >
          <Logo />
          <Text variant="h2" color="neutral.c100" my={10}>
            Hello, world!
          </Text>
          <Switch
            checked={isLight}
            onChange={() => setPalette(() => (isLight ? "dark" : "light"))}
          />
        </Flex>
      </StyleProvider>
    </FontProvider>
  );
}

React Native - Bare

import React from "react";
import { StyleProvider } from "@ledgerhq/native-ui";
import { Flex, Text, Logos, Switch } from "@ledgerhq/native-ui";
import { useTheme } from "styled-components/native";

function Logo() {
  const theme = useTheme();
  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;
}

export default function App() {
  const [palette, setPalette] = React.useState("light");
  const isLight = palette === "light";

  return (
    <StyleProvider selectedPalette={palette}>
      <Flex
        flex={1}
        p={12}
        justifyContent="center"
        alignItems="center"
        flexDirection="column"
        backgroundColor="neutral.c00"
      >
        <Logo />
        <Text variant="h2" color="neutral.c100" my={10}>
          Hello, world!
        </Text>
        <Switch checked={isLight} onChange={() => setPalette(() => (isLight ? "dark" : "light"))} />
      </Flex>
    </StyleProvider>
  );
}