Wix React Native UI Library

The VideoPlayer component provides a comprehensive interface for playing, pausing, and controlling video content in React Native. It includes accessibility features, adaptive layouts for various screen sizes, and a bi-directional overlay that adjusts opacity based on user interaction. The UI is organized into three primary sections:

1. Top Bar: Contains the close button, video title, settings, and actions such as share or cast.
2. Mid Bar: Contains playback controls, including play/pause and seek back/forward buttons.
3. Bottom Bar: Contains the video time track, elapsed/remaining time, sound controls, and the fullscreen button. This section also supports rendering custom elements beneath the bar.

The Stepper component allows users to increase or decrease a value by small increments. It is primarily used in form screens or for adjusting quantities (e.g., adding items to a cart).

It supports two primary styles:

• Default: Typically used within list items on form screens.
• Floating: Designed to be used over images.

For the Default style, two size options are available: Large and Small.

The TabController (and its associated TabBar) is used to organize and navigate between related content groups at the same hierarchy level. It maintains identical behavior and styling across both iOS and Android platforms.

Layout Behavior:

• Fixed Tabs: Typically used for 2-3 tabs that fit on the screen without scrolling.
• Scrollable Tabs: When the total size of tabs exceeds the screen width (usually more than 3 tabs), horizontal scrolling is enabled. An overlay should be used to indicate available off-screen tabs, disappearing once the first or last tab is reached.
• Tablet Specifics:
  • The TabBar is full width, but the tabs container aligns with the content.
  • Fixed TabBars typically support up to 6 tabs.
  • Scrollable TabBars (usually > 6 tabs) have a minimum tab cell width of 70px and a minimum label padding of S7 (28px).

The TextField component allows users to write or edit text. It is primarily used in forms, settings screens, or interactive flows. The component consists of several optional and required elements:

• Label: A short, clear noun describing the required information.
• Placeholder: Optional assistive text that disappears when the user starts typing.
• Helper text: Optional hint or disclaimer (e.g., "Passwords must contain at least 8 characters").
• Clear button: Appears only when a value has been typed, allowing the user to clear the input.
• Character count: Used when a character limit is set; displays current count vs total allowed and turns red when the limit is reached.
• Validation message: Indicates missing required input or invalid entries.

The UILib team is responsible for the design system of mobile apps and all UX/UI aspects, including:

• UX Guidelines: General, Tablet, Accessibility, Offline, and Dark Mode guidelines.
• Components Library: Maintenance of the UX Library.
• Assets: Management of all media assets, including icons, illustrations, and animations.
• Internationalization (Intl): Providing internationalization utilities and content formatting for dates and currency.