react-native-ui-lib

Design Tokens provide semantic meaning to the color system by mapping contextual usage to system colors. They follow a specific naming pattern: $[property][Semantic][Weight].

Token Structure

• Property: The UI element the token applies to (background, text, icon, outline).
• Semantic: The contextual meaning (neutral, primary, general, success, warning, danger, disabled, inverted, default).
• Weight (Optional): The color intensity (light, medium, heavy).

Examples

• $backgroundPrimaryHeavy: A heavy primary background color.
• $textSuccess: Success-themed text color.
• $iconWarning: Warning-themed icon color.

The rnuilib-snippets extension provides VS Code code snippets for react-native-ui-lib components. It supports JavaScript and TypeScript (including React variants).

Generating Component Snippets

1. Type a component's name in camelCase (e.g., button or text).
2. Select the component from the suggestions tooltip.
3. Use the Tab key to navigate through the component's fields and enter your own values.

Tip: For better visibility, ensure your VS Code user settings have 'snippet suggestion' set to 'top'.

Importing the Library

Type rnuilib to quickly generate the necessary import statement: import {} from 'react-native-ui-lib'

To start a local development server for the documentation website, use the yarn start command. This will open a browser window and support live reloading for most changes.

$ yarn start

Once assets are loaded via the Assets system, you can render them using the Image component in two ways:

1. Using assetName and assetGroup props: Provide the name of the asset and its corresponding group. If no assetGroup is provided, it defaults to 'icons'.
2. Using the source prop: Pass a direct reference from the Assets object.

Note: When using nested groups, the assetGroup string should reflect the full path (e.g., 'illustrations.placeholders').

import {Assets, Image} from 'react-native-ui-lib';

// Using the Image component with asset references
// 'icons' is the default assetGroup if not specified
<Image assetName="icon1"/> 

// Specifying a specific asset group
<Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>

// Direct asset reference via the Assets object
<Image source={Assets.icons.icon1}/>

Dialog

• The onModalDismissed prop has been removed. Use onDialogDismissed instead.

TabBarItem

• The badge prop has been removed. Use badgeProps instead.

When upgrading to version 8.x.x, note the following general changes:

• React Native Support: Now supports react-native 0.77.
• Native Library: uilib-native has moved from dependencies to peerDependencies.
• iOS Setup: You must run pod install after updating.
• PanView Migration: Several previous pan-related components have been consolidated into the new PanView component.

Avatar

• Remove isOnline and status props. Use badgeProps instead to handle status indicators.

Badge

• animationProps: This prop was removed. Wrap the Badge in your own animated view.
• testId: Renamed to testID.
• size: No longer accepts the BADGE_SIZES enum. Pass a numeric value instead.

Badge Size Conversion Map:

To ensure proper dark mode support, you must call setConfig with appScheme: 'default' in your application's entry point. This must be done before importing react-native-ui-lib for the first time.

require('react-native-ui-lib/config').setConfig({appScheme: 'default'});

The TabBar component has been removed. Use the TabController component instead.

In TabController, the selectedIndex prop is deprecated; use initialIndex instead.

Use Colors, Typography, and Spacings to load your custom design tokens (colors, typography, and spacing scales) into the library. This allows you to use these values throughout your application via modifiers.

import {Colors, Typography, Spacings} from 'react-native-ui-lib';

Colors.loadColors({
  primaryColor: '#2364AA',
  secondaryColor: '#81C3D7',
  textColor: '##221D23',
  errorColor: '#E63B2E',
  successColor: '#ADC76F',
  warnColor: '##FF963C'
});

Typography.loadTypographies({
  heading: {fontSize: 36, fontWeight: '600'},
  subheading: {fontSize: 28, fontWeight: '500'},
  body: {fontSize: 18, fontWeight: '400'}
});

Spacings.loadSpacings({
  page: 20,
  card: 12,
  gridGutter: 16
});