@ncr-design-system/native-shared-frontend NPM

@ncr-design-system/native-shared-frontend

Welcome to the @ncr-design-system/native-shared-frontend package, an early release designed to jump-start your React Native application with a rich set of UI components tailored for mobile devices. Our package follows the NCR design system and integrates smoothly with Expo and React Native.

Features

Modern and customizable UI components built with Tamagui.
Seamless theme customization using createTheme.
Composable component architecture providing flexibility for building complex UIs.

Installation

Ensure you have Node.js installed and use a package manager like npm or Yarn. This package is built to work with Yarn, so run the following command to add it to your project:

yarn add @ncr-design-system/native-shared-frontend

Quick Start

Setting Up the Theme Provider

Wrap your application with the NCRThemeProvider to apply the design system throughout your app:

import { NCRThemeProvider } from "@ncr-design-system/native-shared-frontend";

// Create your custom theme (example usage)
const theme = createTheme();

const App = () => (
  <NCRThemeProvider config={theme}>{/* Rest of your app */}</NCRThemeProvider>
);

various

Using Components

Import UI components directly into your React Native project. Components are composable, allowing you to use subcomponents for more control over the rendering.

import { Button } from "@ncr-design-system/native-shared-frontend";

const MyButton = () => (
  <Button>
    <Button.Icon glyph="add" />
    <Button.Label>Add Item</Button.Label>
  </Button>
);

Similarly, you can compose various parts of other components, like Avatar, to customize its appearance:

import { Avatar } from "@ncr-design-system/native-shared-frontend";

const UserAvatar = ({ imageUrl }) => (
  <Avatar>
    <Avatar.Image source={{ uri: imageUrl }} />
    <Avatar.Badge />
  </Avatar>
);

For detailed component documentation, please refer to our official documentation.