open-index/open-npm huggingface dataset:
npm package: @ncr-design-system/native-shared-frontend
Description: 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 integrate
Latest version: 1.0.0-next.6

# @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:

```bash
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:

```jsx
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.

```jsx
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:

```jsx
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](https://design.ncr.com/).

## Contributing

Contributions are welcome since this is an early release. Please refer to our contribution guidelines for submitting pull requests or issues.