React Native UI Lib

https://github.com/wix/react-native-ui-lib
Admin
React Native UI Lib is a UI Toolset & Components Library for React Native.
Tokens:10,701
Snippets:165
Trust Score:9.1
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install iOS Pods

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

Navigate to the ios directory and run 'pod install' to complete the setup for iOS projects.

```bash
cd ios && pod install
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/wix/react-native-ui-lib/blob/master/docuilib/README.md

Run this command to install all necessary project dependencies.

```bash
$ yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/wix/react-native-ui-lib/blob/master/docuilib/README.md

Starts a local development server and opens the website in a browser. Changes are reflected live.

```bash
$ yarn start
```

--------------------------------

### Install ESLint

Source: https://github.com/wix/react-native-ui-lib/blob/master/eslint-rules/README.md

Install ESLint as a development dependency.

```bash
$ npm i eslint --save-dev
```

--------------------------------

### Install Demo App Dependencies

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

Install all project dependencies using yarn after cloning the repository.

```bash
yarn
```

--------------------------------

### Install eslint-plugin-uilib

Source: https://github.com/wix/react-native-ui-lib/blob/master/eslint-rules/README.md

Install the uilib ESLint plugin as a development dependency.

```bash
$ npm install eslint-plugin-uilib --save-dev
```

--------------------------------

### Install React Native UI Lib

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

Use npm to install the main library package.

```bash
npm install react-native-ui-lib
```

--------------------------------

### Run the Demo App

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

Start the Metro bundler and then launch the app on an emulator or device using yarn commands.

```bash
# Start Metro bundler
yarn start

# Launch on iOS/Android
yarn ios
# or
yarn android
```

--------------------------------

### Install Core Native Dependencies

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

These packages are required for basic functionality and should be added to your project's package.json.

```json
"react-native-gesture-handler": ">=2.24.0"
"react-native-reanimated": ">=3.17.5"
```

--------------------------------

### Install Optional Native Dependencies

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

Install specific native dependencies based on the components you plan to use. For example, '@react-native-community/blur' is needed for Card component's blur effects.

```bash
"@react-native-community/blur": ">=4.4.1"
"@react-native-community/datetimepicker": "^8.2.0"
"@react-native-community/netinfo": "^5.6.2"
```

--------------------------------

### Basic UI Screen Showcase

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/usage.md

This example demonstrates the usage of core components like View, Text, SegmentedControl, TextField, and Button, along with modifiers and presets, to construct a simple login/registration screen.

```javascript
function Example(props) {
    return (
      <div>
        <View flex center>
          <Text blue50 text20 marginB-s5>
            Welcome
          </Text>
          <SegmentedControl segments={[{label: 'Register'}, {label: 'Login'}]}/>
          <View marginT-s5>
            <TextField preset="outline" placeholder="username" />
            <TextField preset="outline" placeholder="password" secureTextEntry grey10 />
          </View>
          <View row marginT-s5 centerV>
            <Button link text70 orange30 label="Sign Up" marginR-s5 />
            <Button text70 white background-orange30 label="Login" />
          </View>
        </View>
      </div>
    );
}
```

--------------------------------

### Install Mandatory Peer Dependencies

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

Install essential peer dependencies required for core functionality, including animation and gesture handling.

```bash
npm install react-native-reanimated react-native-gesture-handler uilib-native
```

--------------------------------

### Example Form Component

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/testing.md

A sample form component using UI-Lib's TextField, Button, and View components. It demonstrates state management for input fields and an onSubmit handler.

```jsx
import {Button, TextField, View} from 'react-native-ui-lib/testkit';

type OnSubmitHandler = (firstName: string, lastName: string, address: string) => void;
const MyForm = (props: {onSubmit: OnSubmitHandler}) => {
  const {onSubmit} = props;
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <View>
      <TextField label="First name" onChangeText={(value) => setFirstName(value)} value={firstName}/>
      <TextField label="Last name" onChangeText={(value) => setLastName(value)} value={lastName}/>
      <TextField label="Address" onChangeText={(value) => setAddress(value)} value={address}/>
      <Button label="Submit" onPress={() => onSubmit(firstName, lastName, address)}/>
    </View>
  );
};
```

--------------------------------

### Importing Testkit Drivers

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/testing.md

Import the necessary drivers for the components you intend to test. This example shows importing drivers for TextField and Button.

```javascript
import {TextFieldDriver, ButtonDriver} from 'react-native-ui-lib/testkit';
```

--------------------------------

### Import Multiple Related Components

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/packages.md

Import multiple related components, such as those for keyboard management, from a single package to streamline setup.

```javascript
import {
  KeyboardTrackingView,
  KeyboardAwareInsetsView,
  KeyboardRegistry,
  KeyboardAccessoryView,
  KeyboardUtils
} from 'react-native-ui-lib/keyboard';
```

--------------------------------

### Text Component Nested textAlign Example

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/v8.md

Demonstrates how to correctly apply `textAlign` to nested `Text` components in iOS.

```javascript
<Text style={{textAlign: 'right'}}>This <Text>is working</Text></Text>
<Text style={{textAlign: 'right'}}><Text>This is not working</Text></Text>
<Text style={{textAlign: 'right'}}><Text>This is not</Text> working</Text>
```

--------------------------------

### Load Scheme Colors for Dark Mode

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Configure colors for both light and dark modes using loadSchemes. This example defines screen background, text, and various other theme-specific colors.

```javascript
Colors.loadSchemes({
  light: {
    screenBG: 'transparent',
    textColor: Colors.grey10,
    moonOrSun: Colors.yellow30,
    mountainForeground: Colors.green30,
    mountainBackground: Colors.green50,
    $backgroundSuccess: Colors.green40,
    $backgroundSuccessLight: Colors.green70
  },
  dark: {
    screenBG: Colors.grey10,
    textColor: Colors.white,
    moonOrSun: Colors.grey80,
    mountainForeground: Colors.violet10,
    mountainBackground: Colors.violet20,
    $backgroundSuccess: Colors.green40,
    $backgroundSuccessLight: Colors.green20
  }
});
```

--------------------------------

### Full Test Case for MyForm

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/testing.md

A complete test case demonstrating the entire flow: rendering the form, interacting with its fields, submitting, and asserting the correct handler invocation. This serves as a comprehensive example of using testkits.

```javascript
describe('My Form', () => {
  it('should submit MyForm with Musa The Man, Yunitzman 5', () => {
    const onSubmit = jest.fn();
    const renderTree = render(<MyForm onSubmit={onSubmit}/>);
    const firstNameDriver = TextFieldDriver({renderTree, testID: 'firstName'});
    const lastNameDriver = TextFieldDriver({renderTree, testID: 'lastName'});
    const addressDriver = TextFieldDriver({renderTree, testID: 'address'});
    const submitBtnDriver = ButtonDriver({renderTree, testID: 'submit'});
    firstNameDriver.changeText('Musa');
    lastNameDriver.changeText('The Man');
    addressDriver.changeText('Yunitzman 5');
    submitBtnDriver.press();
    expect(onSubmit).toHaveBeenCalledWith('Musa', 'The Man', 'Yunitzman 5');
  });
});
```

--------------------------------

### Get Color Tint

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Retrieves a specific tint of a predefined color or generates a palette for a custom hex color.

```javascript
import {Colors} from 'react-native-ui-lib';

Colors.getColorTint(Colors.green30, 70); // will return the value of Colors.green70
Colors.getColorTint('#ff2442', 50); // will return the 5th tint in an autogenerate 8-tints palette based on '#ff2442'
```

--------------------------------

### Apply Scheme Colors in JSX

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Utilize scheme colors defined with loadSchemes directly in JSX for dynamic theming. This example applies background and text colors based on the current app scheme.

```jsx
<View flex padding-page bg-screenBG>
  <Text h1 textColor>
    Dark Mode
  </Text>
</View>
```

--------------------------------

### Clone the UI Lib Repository

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/setup.md

Clone the official repository to access the demo app and source code.

```bash
git clone git@github.com:wix/react-native-ui-lib.git
cd react-native-ui-lib
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/wix/react-native-ui-lib/blob/master/docuilib/README.md

Builds the website and pushes it to the 'gh-pages' branch, suitable for GitHub Pages hosting.

```bash
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Build Static Website Content

Source: https://github.com/wix/react-native-ui-lib/blob/master/docuilib/README.md

Generates the static content for the website into the 'build' directory.

```bash
$ yarn build
```

--------------------------------

### Load UI Library Foundations

Source: https://github.com/wix/react-native-ui-lib/blob/master/README.md

Load colors, typography, and spacings for your design system. These configurations are essential for customizing the UI library's appearance.

```javascript
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
});
```

--------------------------------

### Configure ESLint Plugins

Source: https://github.com/wix/react-native-ui-lib/blob/master/eslint-rules/README.md

Add 'uilib' to the plugins section of your .eslintrc configuration file.

```json
{
    "plugins": [
        "uilib"
    ]
}
```

--------------------------------

### Import Individual Components

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/packages.md

Import specific components like View and Text directly from their respective packages to reduce bundle size.

```javascript
import View from 'react-native-ui-lib/view';
import Text from 'react-native-ui-lib/text';
```

--------------------------------

### Initializing Test Drivers

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/testing.md

Initialize drivers by passing the renderTree and the component's testID. This allows the driver to locate and interact with the specific component instance.

```javascript
const firstNameDriver = TextFieldDriver({renderTree, testID: 'firstName'});
const lastNameDriver = TextFieldDriver({renderTree, testID: 'lastName'});
const addressDriver = TextFieldDriver({renderTree, testID: 'address'});
const submitBtnDriver = ButtonDriver({renderTree, testID: 'submit'});
```

--------------------------------

### Interacting with Form Fields and Submitting

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/testing.md

Use the initialized drivers to change text in TextField components and simulate a press event on the Button. This demonstrates how to manipulate component state and trigger actions.

```javascript
firstNameDriver.changeText('Musa');
lastNameDriver.changeText('The Man');
addressDriver.changeText('Yunitzman 5');
submitBtnDriver.press();
```

--------------------------------

### Load Custom Colors, Typography, and Spacings

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/style.md

Load custom color values, typography presets, and spacing definitions into the UI Lib. Ensure these are loaded before using them in components.

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

Colors.loadColors({
  pink: '#FF69B4',
  gold: '#FFD700',
});

Typography.loadTypographies({
  h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
  h2: {fontSize: 46, fontWeight: '300', lineHeight: 64},
});

Spacings.loadSpacings({
  page: isSmallScreen ? 16 : 20
});
```

--------------------------------

### Configure ESLint Rules

Source: https://github.com/wix/react-native-ui-lib/blob/master/eslint-rules/README.md

Specify the ESLint rules you want to enable under the rules section.

```json
{
    "rules": {
        "uilib/rule-name": 2
    }
}
```

--------------------------------

### Apply Preset Spacing Modifiers

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Apply margin and padding using predefined spacing presets (e.g., margin-s5, padding-s2) for consistent design patterns.

```jsx
<View margin-s5 padding-s2>
  {/* Using preset spacing values */}
</View>
```

--------------------------------

### Load Design Tokens

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/v7.md

Use Colors.loadDesignTokens to generate theme tokens based on your primary color. This is the recommended approach for customizing theme colors.

```javascript
Colros.loadDesignTokens({primaryColor: <your primary color>})
```

--------------------------------

### Configure Component Deprecation Rules

Source: https://github.com/wix/react-native-ui-lib/blob/master/eslint-rules/README.md

Configure 'component-deprecation_warn' and 'component-deprecation_error' rules to manage component deprecation. This allows for a phased migration by first warning consumers and then enforcing errors.

```javascript
// deprecation message to warn you consumers about
const deprecationWarnings = [
  {
      "component": "ActivityIndicator",
      "source": "react-native",
      "message": "Please avoid using react-native ActivityIndicator, use the 'Loader' component instead"
   },
   {
      "component": "OldComponent",
      "source": "react-native-ui-lib",
      "message": "Please use the 'NewComponent' instead. Auto fix available.",
      "fix": { "componentName": "NewComponent" }
    },
];

const deprecationErrors = [
  {
      "component": "Button", /// The component 
      "source": "react-native-ui-lib", // The source you import the component from
      "message": "",
      "props": [
        {
          "prop": "title", // the prop to depreciate
          "message": "Please use `label` prop instead of `title` prop", // custom message to the user
          "fix": { "propName": "label" } // provice auto fix
        }
      ]
    },
];

// Two phases: warn & error to allow phasing your migration process
{
    "rules": {
      'uilib/component-deprecation_warn': ['warn', {deprecations: deprecationWarnings, dueDate: 'Thursday 31 January'}],
      'uilib/component-deprecation_error': ['error', {deprecations: deprecationErrors , dueDate: 'Thursday 31 January'
    }
}
```

--------------------------------

### Load Asset Groups

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/assets.md

Load assets into named groups, including nested structures for better organization. Use `require` to reference image files.

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

// Load a simple asset group
Assets.loadAssetsGroup('icons', {
  icon1: require('icon1.png'),
  icon2: require('icon2.png'),
  icon3: require('icon3.png'),
});

// Load nested asset groups for better organization
Assets.loadAssetsGroup('illustrations.placeholders', {
  emptyCart: require('emptyCart.png'),
  emptyProduct: require('emptyProduct.png'),
});
Assets.loadAssetsGroup('illustrations.emptyStates.', {
  noMessages: require('noMessages.png'),
  noContacts: require('noContacts.png'),
});
```

--------------------------------

### Configure App Scheme for Dark Mode

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Ensure dark mode support by setting the app scheme configuration. This require statement should be placed early in your application's entry point.

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

--------------------------------

### Set Default Component Themes

Source: https://github.com/wix/react-native-ui-lib/blob/master/README.md

Configure default themes for specific components like Card and Button. This allows for consistent styling across your application. Dynamic themes can be created using functions.

```javascript
import {ThemeManager} from 'react-native-ui-lib';

// with plain object
ThemeManager.setComponentTheme('Card', {
  borderRadius: 8
});

// with a dynamic function
ThemeManager.setComponentTheme('Button', (props, context) => {
  // 'square' is not an original Button prop, but a custom prop that can
  // be used to create different variations of buttons in your app
  if (props.square) {
    return {
      borderRadius: 0
    };
  }
});
```

--------------------------------

### Load Custom Design Tokens

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Override existing design tokens or define new ones for light and dark modes using loadSchemes. This allows for customization of the app's color theme.

```javascript
Colors.loadSchemes({
  light: {
    $textDefault: '#20303C'
  },
  dark: {
    $textDefault: '#F8F8F8'
  }
});
```

--------------------------------

### Color Modifiers for Text and Background

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Set text and background colors using predefined color keys. Use `[colorKey]` for text and `bg-[colorKey]` or `background-[colorKey]` for backgrounds.

```jsx
<Text blue30>Blue text</Text>
<View bg-grey70>Grey background</View>
<TouchableOpacity bg-red30>Red button</TouchableOpacity>
```

--------------------------------

### Configure No Hard-Coded Color Rule

Source: https://github.com/wix/react-native-ui-lib/blob/master/eslint-rules/README.md

Configure the 'no-hard-coded-color' rule to catch hard-coded color values and replace them with valid color constants.

```javascript
// Your app valid colors 
const validColors = {
  blue: '#459FED',
  red: '#F2564D',
  green: '#00CD8B',
  yellow: '#FFB600',
}

// Lint will catch all hard coded color values in the code and replace with valid colors if exist
// `#459FED` will turn to `Colors.blue`
{
    "rules": {
        "uilib/no-hard-coded-color": ['error', {validColors}]
    }
}
```

--------------------------------

### Render Assets with Image Component

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/assets.md

Render assets using the Image component by referencing their name and optionally their asset group. You can also use a direct asset reference.

```jsx
// Using the Image component with asset references
<Image assetName="icon1"/> // icons is the default assetGroup
<Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>

// Direct asset reference
<Image source={Assets.icons.icon1}/>
```

--------------------------------

### Badge Size Conversion Map

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/v6.md

Map of old badge size names to their new numerical values. Pass a number instead of an enum for the 'size' prop.

```plaintext
pimpleSmall -> 6
pimpleBig -> 10
pimpleHuge -> 14
small -> 16
default -> 20
large -> 24
```

--------------------------------

### Generate RGBA Color String

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Create an RGBA color string with a specified opacity using the Colors.rgba utility. It accepts color values as hex strings or RGB components.

```javascript
import {Colors} from 'react-native-ui-lib';

Colors.rgba('#ff2442', 0.05); // 'rgb(255, 36, 66, 0.05)'
Colors.rgba(44, 224, 112, 0.2); // 'rgb(44, 224, 112, 0.2)'
```

--------------------------------

### Use Loaded Colors

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Access custom colors loaded with loadColors via the Colors class or apply them directly as style props. This demonstrates using the 'error' and 'success' colors.

```jsx
import {View, Text, Colors} from 'react-native-ui-lib';

<View>
  <Text style={{color: Colors.error}}>Error Message</Text>
  <Text success>Success Message</Text>
<View>
```

--------------------------------

### Load Custom Colors

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Define a set of custom colors that can be accessed via the Colors class or used as modifiers. This is useful for defining app-specific color constants.

```javascript
import {Colors} from 'react-native-ui-lib';

Colors.loadColors({
  error: '#ff2442',
  success: '#00CD8B',
  text: '#20303C'
});
```

--------------------------------

### Set Default Component Theme

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/theme-manager.md

Sets default props for a component. These defaults can be overridden by props passed directly to the component instance. Use a callback for dynamic default props based on runtime conditions.

```javascript
import {ThemeManager} from 'react-native-ui-lib';

ThemeManager.setComponentTheme('Text', {
    text70: true, // will set the text70 typography modifier prop to be true by default
    grey10: true, // will set the grey10 color modifier prop to be true by default 
});


ThemeManager.setComponentTheme('Button', (props, context) => {

  return {
    // this will apply a different backgroundColor
    // depending on whether the Button has an outline or not
    backgroundColor: props.outline ? 'black' : 'green',
  };
});
```

--------------------------------

### setComponentTheme

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/theme-manager.md

Sets default props for a specified component. This can be done with a static object or a callback function for dynamic, runtime default props. These defaults can be overridden by props passed directly to the component instance.

```APIDOC
## setComponentTheme

### Description
Sets default props for a specified component. This can be done with a static object or a callback function for dynamic, runtime default props. These defaults can be overridden by props passed directly to the component instance.

### Method Signature
- `ThemeManager.setComponentTheme(componentName: string, defaultPropsObject: object)`
- `ThemeManager.setComponentTheme(componentName: string, componentPropsCallback: (props, context) => object)`

### Parameters
#### Path Parameters
- **componentName** (string) - Required - The name of the component to set the theme for.
- **defaultPropsObject** (object) - Required - An object containing the default props to apply.
- **componentPropsCallback** (function) - Required - A callback function that receives component props and context, and returns an object of default props.

### Example
```javascript
import { ThemeManager } from 'react-native-ui-lib';

// Setting static default props for the Text component
ThemeManager.setComponentTheme('Text', {
  text70: true,
  grey10: true
});

// Setting dynamic default props for the Button component
ThemeManager.setComponentTheme('Button', (props, context) => {
  return {
    backgroundColor: props.outline ? 'black' : 'green'
  };
});
```
```

--------------------------------

### Basic Layout Modifiers

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Apply basic layout modifiers like flex, alignment, and direction to position and arrange views. These modifiers simplify layout design without manual flex calculations.

```jsx
<View flex left>
  <Button label="Button" />
</View>

<View flex right>
  <Button label="Button" />
</View>

<View flex top>
  <Button label="Button" />
</View>

<View flex bottom>
  <Button label="Button" />
</View>

<View flex center>
  <Button label="Button" />
</View>
```

--------------------------------

### getColorTint

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Retrieves a specific tint of a given color. It can either return a predefined tint from a named color or generate a palette for a hex color and return a specific tint from it.

```APIDOC
## getColorTint

### Description
Retrieves a specific tint of a given color. It can either return a predefined tint from a named color or generate a palette for a hex color and return a specific tint from it.

### Method
`Colors.getColorTint(color, tintLevel)`

### Parameters
#### Path Parameters
- **color** (string) - Required - The color to get the tint from. Can be a named color (e.g., `Colors.green30`) or a hex string (e.g., `'#ff2442'`).
- **tintLevel** (number) - Required - The desired tint level (e.g., 70 for 70%).

### Request Example
```js
import { Colors } from 'react-native-ui-lib';

Colors.getColorTint(Colors.green30, 70); // returns the value of Colors.green70
Colors.getColorTint('#ff2442', 50); // returns the 5th tint in an autogenerated 8-tint palette based on '#ff2442'
```
```

--------------------------------

### Use UI Components with Modifiers

Source: https://github.com/wix/react-native-ui-lib/blob/master/README.md

Integrate configured UI components into your React Native screens. Components will automatically apply the loaded foundations and themes. Modifiers can be used for further customization.

```jsx
import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';

class MyScreen extends Component {
  render() {
    return (
      <View flex padding-page>
        <Text heading marginB-s4>
          My Screen
        </Text>
        <Card height={100} center padding-card marginB-s4>
          <Text body>This is an example card </Text>
        </Card>

        <Button label="Button" body bg-primaryColor square></Button>
      </View>
    );
  }
}
```

--------------------------------

### Apply Padding with Modifiers

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Use padding modifiers like paddingV and paddingH to apply uniform vertical and horizontal padding to a View component.

```jsx
<View paddingV-20 paddingH-30>
  {/* Content with vertical padding of 20 and horizontal padding of 30 */}
</View>
```

--------------------------------

### Asserting Submit Handler Call

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/testing.md

Verify that the onSubmit handler was called with the expected arguments after the form submission. This is a crucial step in validating the form's behavior.

```javascript
expect(onSubmit).toHaveBeenCalledWith('Musa', 'The Man', 'Yunitzman 5');
```

--------------------------------

### setComponentForcedTheme

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/theme-manager.md

Sets a theme for a specified component that cannot be overridden by props passed directly to the component instance. This is useful for enforcing specific styles or behaviors.

```APIDOC
## setComponentForcedTheme

### Description
Sets a theme for a specified component that cannot be overridden by props passed directly to the component instance. This is useful for enforcing specific styles or behaviors.

### Method Signature
- `ThemeManager.setComponentForcedTheme(componentName: string, componentPropsCallback: (props, context) => object)`

### Parameters
#### Path Parameters
- **componentName** (string) - Required - The name of the component to set the forced theme for.
- **componentPropsCallback** (function) - Required - A callback function that receives component props and context, and returns an object of forced props.

### Example
```javascript
import { ThemeManager } from 'react-native-ui-lib';

ThemeManager.setComponentForcedTheme('Card', (props, context) => {
  return {
    containerStyle: [styles.defaultContainerStyle, props.containerStyle]
  };
});
```
```

--------------------------------

### TextField Props Migration

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/v7.md

Migrate TextField props from v6 to v7. Note that 'error' prop is deprecated and should be replaced by 'validationMessage' with 'validate'.

```javascript
helperText -> hint
Title -> label
titleColor-> labelColor
titleStyle -> labelStyle
showCharacterCounter -> showCharCounter
transformer -> formatter
prefix -> leadingAccessory
prefixStyle -> leadingAccessory
rightIconSource -> trailingAccessory
rightIconStyle -> trailingAccessory
rightButtonProps -> trailingAccessory
leadingIcon -> leadingAccessory
useTopErrors -> validationMessagePosition
error prop is deprecated. Please use validationMessage prop with validate prop.
expandable prop is deprecated
renderExpandableInput prop is deprecated
renderExpandable prop is deprecated
onToggleExpandableModal prop is deprecated
topBarProps prop is deprecated
```

--------------------------------

### WheelPicker Prop Renaming

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/v7.md

The WheelPicker component has undergone significant changes. 'selectedValue' is now 'initialValue', and 'onValueChange' is now 'onChange'. The component is now uncontrolled.

```javascript
selectedValue prop renamed initialValue
onValueChange prop renamed onChange
```

--------------------------------

### Set Forced Component Theme

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/theme-manager.md

Sets a theme for a component that cannot be overridden by props passed directly to the component instance. This is useful for enforcing certain styles.

```javascript
ThemeManager.setComponentForcedTheme('Card', (props, context) => {
  return {
    containerStyle: [styles.defaultContainerStyle, props.containerStyle]
  };
});
```

--------------------------------

### TextField Component Usage

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/getting-started/v5.md

Use the TextField component for input fields, with built-in validation and error message display. This replaces the old TextInput component.

```javascript
<TextField placeholder="Enter email" validate="email" errorMessage="Email is invalid" />
```

--------------------------------

### Absolute Positioning Modifiers

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Apply absolute positioning to components using modifiers like absL for left alignment and absF for full-screen coverage.

```jsx
<View absL>
  <Text>Left-aligned absolute content</Text>
</View>

<View absF>
  <Text>Full-screen absolute content</Text>
</View>
```

--------------------------------

### Apply Margin with Modifiers

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Use margin modifiers like marginT and marginB to apply specific top and bottom margins to a View component.

```jsx
<View marginT-5 marginB-10>
  {/* Content with top margin of 5 and bottom margin of 10 */}
</View>
```

--------------------------------

### isDark

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Determines if a given color is considered dark. Bright colors will return false.

```APIDOC
## isDark

### Description
Determines if a given color is considered dark. Bright colors will return false.

### Method
`Colors.isDark(color)`

### Parameters
#### Path Parameters
- **color** (string) - Required - The color to check.

### Request Example
```js
import { Colors } from 'react-native-ui-lib';

Colors.isDark(Colors.grey10); // true
Colors.isDark(Colors.grey80); // false
```
```

--------------------------------

### Typography Modifiers for Text Elements

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Apply typography presets to text elements using `[typographyKey]`. This modifier controls text styling.

```jsx
<Text text70>Styled text</Text>
<TextInput text80 />
```

--------------------------------

### Apply Gap Modifiers for Child Spacing

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Utilize the gap modifier on a container View to uniformly space its direct child elements.

```jsx
<View row gap-10>
  <Button label="First" />
  <Button label="Second" />
  <Button label="Third" />
</View>
```

--------------------------------

### Border Radius Modifier

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/modifiers.md

Add rounded corners to components using the `br[size]` modifier, with predefined sizes available.

```jsx
<View br40>
  <Text>Rounded container</Text>
</View>
```

--------------------------------

### Check if Color is Dark

Source: https://github.com/wix/react-native-ui-lib/blob/master/docs/foundation/colors.md

Determines if a given color is considered dark. Bright colors will return false.

```javascript
import {Colors} from 'react-native-ui-lib';

Colors.isDark(Colors.grey10); // true
Colors.isDark(Colors.grey80); // false
```
Tokens:
Raw