### Installing React Native UILib Core Package (npm)

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

This command installs the main `react-native-ui-lib` package from npm, which is the first step in integrating the library into a React Native project. It fetches the latest stable version of the UI library.

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

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

### Installing iOS Pods for React Native UILib Demo App

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

For iOS development, this command navigates into the `ios` directory of the demo app and executes `pod install`. This step resolves and installs all native iOS dependencies, which is crucial for building and running the demo app on iOS devices or simulators.

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

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

### Installing iOS Pods for React Native UILib

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

After installing JavaScript dependencies, this command navigates into the `ios` directory and runs `pod install` to fetch and link native iOS dependencies required by React Native UILib and its peer packages. This step is essential for iOS projects.

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

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

### Installing Dependencies for React Native UILib Demo App (yarn)

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

This command uses Yarn to install all JavaScript dependencies listed in the `package.json` file of the cloned UILib demo application. It ensures all necessary Node.js modules are available for the project to run correctly.

```bash
yarn
```

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

### Starting Metro Bundler for React Native UILib Demo App (yarn)

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

This command initiates the Metro bundler, which compiles the JavaScript code and serves it to the React Native application. The bundler must be running in a separate terminal before launching the app on a device or emulator.

```bash
yarn start
```

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

### Cloning React Native UILib Demo App Repository (git)

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

These commands clone the official `react-native-ui-lib` GitHub repository to the local machine and then navigate into the newly created project directory. This is the initial step to access and run the UILib demo application.

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

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

### Installing Mandatory Peer Dependencies for React Native UILib (npm)

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

This command installs `react-native-reanimated` and `react-native-gesture-handler`, which are crucial peer dependencies required for UILib's core animation and gesture functionalities. These packages enable advanced UI interactions.

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

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

### Launching React Native UILib Demo App on iOS or Android (yarn)

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

These commands are used to launch the React Native UILib demo application on either an iOS simulator/device (`yarn ios`) or an Android emulator/device (`yarn android`). One of these commands should be executed after the Metro bundler has started.

```bash
yarn ios
# or
yarn android
```

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

### Defining Component-Specific Native Dependencies for React Native UILib (package.json)

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

This snippet lists optional native dependencies and their recommended version ranges for specific UILib components, such as `@react-native-community/blur` for blur effects or `@react-native-community/netinfo` for network status. Developers should install only those relevant to their chosen components.

```json
"@react-native-community/blur": ">=4.4.1"
"@react-native-community/datetimepicker": "^3.4.6"
"@react-native-community/netinfo": "^5.6.2" # Required for ConnectionStatusBar
```

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

### Installing Dependencies with Yarn

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

This command installs all necessary project dependencies using Yarn. It should be run after cloning the repository to set up the development environment.

```Shell
$ yarn
```

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

### Defining Core Native Dependencies for React Native UILib (package.json)

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

This snippet illustrates the required version ranges for `react-native-gesture-handler` and `react-native-reanimated` as they would appear in a `package.json` file. These dependencies are fundamental for UILib's core functionality, ensuring compatibility and stability.

```json
"react-native-gesture-handler": "<=2.14.1"
"react-native-reanimated": "<=3.16.7"
```

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

### Starting Local Development Server with Yarn

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

This command initiates a local development server for the Docusaurus website. It automatically opens a browser window and supports live reloading for most changes, eliminating the need for server restarts.

```Shell
$ yarn start
```

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

### Installing eslint-plugin-uilib via npm

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

This snippet provides the command to install the `eslint-plugin-uilib` as a development dependency. It integrates the UI Lib specific rules into your ESLint setup.

```Shell
npm install eslint-plugin-uilib --save-dev
```

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

### Installing ESLint via npm

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

This snippet shows the command to install ESLint as a development dependency using npm. ESLint is a prerequisite for using the `eslint-plugin-uilib`.

```Shell
npm i eslint --save-dev
```

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

### Recommended Design Token Usage for Colors - JavaScript

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

This snippet illustrates the recommended way to apply colors in `react-native-ui-lib` v7 using design tokens. Instead of the deprecated `Colors.primary`, developers should use specific design tokens like `Colors.$backgorundPrimaryHeavy` to ensure consistency with the design system. This example shows the updated approach for setting a background color.

```javascript
style={{backgroundColor: Colors.$backgorundPrimaryHeavy}}
```

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

### Loading Assets with react-native-ui-lib

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

This snippet demonstrates how to load UI assets using `Assets.loadAssetsGroup` from `react-native-ui-lib`. It shows examples of loading a simple asset group and nested asset groups for better organization, typically using `require()` to specify image paths.

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

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

### Getting Color Tints

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

Explains how `Colors.getColorTint` can retrieve a specific tint from an existing system color (e.g., `Colors.green30` to `Colors.green70`) or generate a tint from a given hex color by creating an 8-tint palette.

```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'
```

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

### Deprecated Colors.primary Usage in Styling - JavaScript

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

This snippet demonstrates the deprecated usage of `Colors.primary` for background styling in `react-native-ui-lib` v6. In v7, `Colors.primary` is no longer supported and should be replaced with specific design tokens for styling components. This example shows how `Colors.primary` was previously used directly in a style object.

```javascript
style={{backgroundColor: Colors.primary}}
```

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

### Building a Welcome/Login Screen with React Native UI-Lib

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

This React Native snippet demonstrates the usage of UI-Lib components like `View`, `Text`, `SegmentedControl`, `TextField`, and `Button` to construct a basic welcome and login screen. It showcases common layout props (`flex`, `center`, `row`, `margin`), text styling (`blue50`, `text20`), input presets (`outline`), and button styling (`link`, `background-orange30`). The snippet creates a functional UI with options for registration/login and input fields.

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

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

### Building Static Website Content with Yarn

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

This command compiles the Docusaurus website into static content, placing the generated files in the `build` directory. The output can then be hosted on any static content hosting service.

```Shell
$ yarn build
```

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

### Deploying to GitHub Pages with Yarn

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

This command facilitates the deployment of the website to GitHub Pages. It builds the site and pushes the generated content to the `gh-pages` branch, requiring the `GIT_USER` environment variable to be set with your GitHub username and `USE_SSH` to be true for SSH authentication.

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

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

### Loading Foundation Styles with React Native UI Lib

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

This snippet demonstrates how to load global foundation styles like colors, typography, and spacings using react-native-ui-lib. It defines a custom color palette, typography scales (heading, subheading, body), and spacing values (page, card, gridGutter) to establish a consistent design system across the application. These configurations are loaded once and then applied automatically to UI Lib components.

```JavaScript
// FoundationConfig.js

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

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

### Initializing React Native UI-Lib Component Drivers

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

This snippet illustrates the initialization of test drivers for specific UI-Lib components. Each driver is created by passing the `renderTree` (obtained from rendering the component) and a `testID` to uniquely identify the target component within the rendered tree.

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

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

### Using Themed Components in React Native UI Lib

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

This React Native component demonstrates how to integrate and use UI Lib components with previously defined design system configurations. It showcases View, Text, Card, and Button components, applying global styles like padding-page, heading, body, padding-card, bg-primaryColor, and the custom square prop for the Button. This snippet highlights how the loaded foundations and component themes are automatically applied, simplifying UI development.

```JSX
// MyScreen.js

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

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

### Importing Individual and Related Components in React Native UI Lib (JavaScript)

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

This JavaScript snippet illustrates how to import specific UI components from `react-native-ui-lib` using individual packages, such as `View` and `Text`. It also shows how to import multiple related components, like those found within the `keyboard` package, to ensure only necessary code is included, optimizing application bundle size and performance.

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

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

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

### Configuring ESLint Plugins for uilib

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

This JSON snippet demonstrates how to add `uilib` to the `plugins` section of your `.eslintrc` file. This step makes the `uilib` rules available for use in your project.

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

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

### Loading Comprehensive Color Schemes for Dark/Light Mode

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

Demonstrates how to load extensive color schemes for both light and dark modes, including system colors and design tokens, to support dynamic theming across the application.

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

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

### Interacting with React Native UI-Lib Testkit Drivers

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

This code demonstrates how to simulate user interactions using the initialized test drivers. It shows how to change the text content of `TextField` components using `changeText` and how to simulate a button press using the `press` function on a `ButtonDriver`.

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

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

### Verifying Code Standards with NPM Pre-Push Script

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

This command is suggested to be run before submitting a Pull Request. It verifies that linting rules, TypeScript checks, and tests are not broken, ensuring code quality and stability before code submission.

```NPM Script
npm run pre-push
```

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

### Rendering React Component for Testing

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

This code shows how to render a React component, `MyForm` in this case, within a test environment. The `render` function (presumably from a testing library like React Testing Library) returns a `renderTree` object, which is then used to initialize component drivers.

```javascript
const renderTree = render(<MyForm onSubmit={onSubmit}/>);
```

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

### Importing React Native UI-Lib Testkit Drivers

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

This snippet demonstrates how to import specific component drivers, `TextFieldDriver` and `ButtonDriver`, from the `react-native-ui-lib/testkit` module. These drivers are essential for interacting with UI-Lib components in a test environment.

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

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

### Loading Custom UI-Lib Style Presets in React Native

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

This snippet demonstrates how to load custom color, typography, and spacing presets into `react-native-ui-lib`. It uses `Colors.loadColors`, `Typography.loadTypographies`, and `Spacings.loadSpacings` to define new style values like 'pink', 'gold', 'h1', 'h2', and 'page' spacing, making them available for use throughout the application.

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

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

### Complete React Native UI-Lib Form Test Case

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

This comprehensive Jest test suite demonstrates a full end-to-end test for the `MyForm` component. It includes rendering the component, mocking the `onSubmit` handler, initializing and interacting with UI-Lib testkit drivers, and finally asserting the correct behavior of the form submission.

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

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

### Configuring Specific uilib ESLint Rules

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

This JSON snippet illustrates how to enable and configure individual `uilib` rules within the `rules` section of your `.eslintrc` file, setting their severity level (e.g., `2` for error).

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

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

### Loading Custom System Colors

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

Shows how to load a set of custom system colors into the `Colors` object, making them accessible throughout the app. These colors can then be referenced by name in components.

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

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

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

### Configuring uilib/component-deprecation Rules

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

This JavaScript and JSON snippet defines `deprecationWarnings` and `deprecationErrors` arrays, then shows how to configure `uilib/component-deprecation_warn` and `uilib/component-deprecation_error` rules. These rules help manage component migrations by providing warnings or errors for deprecated components and props, with optional auto-fix capabilities.

```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' 
    }
}
```

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

### Applying UI-Lib Style Presets to a Text Component in React Native

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

This snippet illustrates how to apply previously defined UI-Lib style presets directly to a `Text` component. By passing `h1` and `pink` as props, the component automatically uses the 'h1' typography and 'pink' color values loaded via `Typography.loadTypographies` and `Colors.loadColors` respectively, styling the 'Hello World' text.

```JSX
<Text h1 pink>Hello World</Text>
```

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

### Importing react-native-ui-lib Components (JavaScript/TypeScript)

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

This snippet provides the essential import statement for react-native-ui-lib components, enabling their use within JavaScript or TypeScript React projects. It is typically generated by typing 'rnuilib' in the VS Code editor.

```JavaScript
import {} from 'react-native-ui-lib'
```

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

### Configuring uilib/no-hard-coded-color Rule

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

This JavaScript and JSON snippet defines `validColors` and shows how to configure the `uilib/no-hard-coded-color` rule. It catches hard-coded color values and suggests replacement with predefined valid colors, improving consistency.

```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}]
    }
}
```

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

### Building Development Assets and Checking TypeScript Errors

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

This command must be executed before pushing new code, especially for new TypeScript files. It checks for TypeScript errors and generates declaration (.d.ts) files in the 'generatedTypes' folder, which must also be committed to the repository.

```NPM Script
npm run build:dev
```

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

### Defining a React Native UI-Lib Form Component

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

This JSX snippet defines a simple React Native form component, `MyForm`, which takes an `onSubmit` handler. It uses `TextField` components for input and a `Button` for submission, managing input values with React's `useState` hook.

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

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

### Configuring App Scheme for Dark Mode Support

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

This essential configuration line enables dark mode support in `react-native-ui-lib` by setting the `appScheme`. It must be called early in the app's initialization, before importing `react-native-ui-lib` for the first time.

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

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

### Rendering Assets with Image Component (JSX)

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

This snippet illustrates how to render previously loaded assets within React Native components using the `Image` component from `react-native-ui-lib`. It demonstrates two methods: referencing assets by `assetName` and `assetGroup` properties, or by directly providing the asset object via the `source` prop.

```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}/>
```

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

### Setting Default Component Theme with ThemeManager (JavaScript)

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

This snippet demonstrates how to use `ThemeManager.setComponentTheme` to apply default props to components. It shows setting static defaults for 'Text' (e.g., typography and color) and dynamic defaults for 'Button' based on its props, allowing these defaults to be overridden by instance-specific props.

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

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

### Loading Custom Design Tokens via Colors.loadDesignTokens - JavaScript

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

This snippet demonstrates how to generate and load design tokens based on a custom primary color using `Colors.loadDesignTokens`. This function is crucial for integrating your brand's specific color palette into the `react-native-ui-lib` design system, allowing tokens to be derived from a base color. The `primaryColor` parameter expects a valid color string.

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

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

### Applying Scheme Colors to Components

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

Shows how to use scheme-defined colors (like `screenBG` and `textColor`) as direct modifiers on `react-native-ui-lib` components for dynamic theming based on the active scheme.

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

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

### Setting Forced Component Theme with ThemeManager (JavaScript)

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

This snippet illustrates the use of `ThemeManager.setComponentForcedTheme` to apply default props that cannot be overridden by props passed directly to the component instance. It shows how to merge a default container style with any provided instance-specific styles for a 'Card' component.

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

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

### Using TextField Component with Validation in React Native UI Lib v5

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

This snippet illustrates the usage of the `TextField` component, which replaces `TextInput` in `react-native-ui-lib` v5. It demonstrates how to set a placeholder, apply built-in email validation, and display a custom error message, showcasing its enhanced form capabilities.

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

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

### Customizing Design Tokens with loadSchemes

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

Demonstrates how to override or define custom design tokens for `$textDefault` using `Colors.loadSchemes()` for both light and dark modes. This allows for fine-grained control over semantic color usage.

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

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

### Setting Default Component Themes in React Native UI Lib

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

This snippet illustrates how to set default theme configurations for UI Lib components using ThemeManager. It shows two methods: applying a plain object for static properties (e.g., borderRadius for Card) and using a dynamic function for conditional styling based on component props (e.g., setting borderRadius to 0 for a Button when a custom square prop is true). This allows for centralized control over component appearance.

```JavaScript
// ComponentsConfig.js

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

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

### Generating RGBA Color Strings

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

Demonstrates the `Colors.rgba` utility function for converting hex or RGB values into an RGBA string with a specified opacity, useful for transparent overlays.

```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)'
```

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

### Using Loaded Colors in Components

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

Illustrates how to apply custom loaded colors to UI components, either via the `style` prop using `Colors.colorName` or as direct boolean modifiers for predefined 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>
```

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

### Asserting Form Submission with Jest

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

This snippet shows how to verify the outcome of a form submission using Jest's assertion library. It uses `expect(onSubmit).toHaveBeenCalledWith()` to confirm that the `onSubmit` mock function was called with the expected arguments after the form was submitted via the test drivers.

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

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

### Using Preset Spacing Modifiers in React Native UI Lib (JSX)

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

This snippet demonstrates the use of preset spacing values (-s5, -s2) with margin and padding modifiers. These presets, defined in spacings.ts, ensure uniform spacing patterns and consistent design throughout the application.

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

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

### Applying Position Modifiers in React Native UI Lib (JSX)

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

This snippet illustrates the use of absL for left-aligned absolute positioning and absF to make a component fill its entire parent container. These modifiers provide simple ways to control component positioning with absolute values.

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

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

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

### Applying Padding Modifiers in React Native UI Lib (JSX)

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

This snippet illustrates the use of paddingV and paddingH modifiers to apply vertical and horizontal padding to a View component. These modifiers provide an intuitive way to control spacing within elements, enhancing layout consistency.

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

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

### Checking if a Color is Dark

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

Illustrates the `Colors.isDark` utility function, which determines if a given color is perceived as dark (returning `true`) or bright (returning `false`), useful for dynamic text color adjustments.

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

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

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

### Applying Layout Modifiers in React Native UI Lib (JSX)

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

This snippet demonstrates the application of various layout modifiers (flex, left, right, top, bottom, center) to a View component in React Native UI Lib. These modifiers simplify view positioning and alignment without manual flex calculations, affecting the positioning of the View's children elements.

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

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

### Applying Border Radius Modifiers in React Native UI Lib (JSX)

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

This snippet demonstrates the use of the br40 modifier to apply a predefined border radius to a View component. These modifiers allow for adding rounded corners with consistent sizes, enhancing the visual appearance of components.

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

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

### Applying Margin Modifiers in React Native UI Lib (JSX)

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

This snippet demonstrates how to use marginT and marginB modifiers to apply top and bottom margins to a View component. These modifiers control the spacing between elements, contributing to a well-structured layout.

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

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

### Applying Typography Modifiers in React Native UI Lib (JSX)

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

This snippet shows how to apply typography presets using modifiers like text70 and text80 to Text and TextInput components. These modifiers control text styling based on predefined typography settings, ensuring consistent text appearance.

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

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

### Applying Color Modifiers in React Native UI Lib (JSX)

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

This snippet demonstrates applying color modifiers to text and background elements. blue30 sets text color, while bg-grey70 and bg-red30 set background colors for View and TouchableOpacity components, respectively. These modifiers are based on predefined color presets.

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

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

### Applying Gap Modifiers in React Native UI Lib (JSX)

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

This snippet shows the gap modifier used in conjunction with row to control the spacing between child elements within a container. It's particularly useful for creating evenly spaced layouts without manually adding margins to individual elements.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.