Diagram from React Native Documentation
Diagram from React Native Documentation
Diagram from React Native Documentation
Diagram from React Native Documentation
);
};
```
#### Slot limitations
At this time, code connect does not support slots. If you need to use a slot, you will need to manually add it to the code after copying it from Code Connect.
The recommended code section does not show the actual slot element's code.
```tsx example
() => {
return (
);
};
```
### Supported Components
);
};
```
---
id: components
title: Component Changes
---
## Overview
This guide focuses on breaking prop changes to be aware of when migrating from Abyss V1 to V2. These include:
- Props that have been removed
- Props whose behavior or typings have been updated
- Props whose names have been changed but whose functionality remains the same.
This guide does **not** cover:
- New props added in V2
- Class changes
- Token changes
- Additional features and enhancements
For complete documentation of all available props, including new features added, refer to each component's dedicated documentation page.
:::tip AI-Powered Component Migration
Need help with component migration? Use our [AI-powered migration tool](/mobile/developers/migration/v2/v1-to-v2-guide#ai-powered-migration-copilot) to help convert V1 components to their V2 equivalents with proper prop mapping.
:::
## Component migration notes
While many components in V1 had a dedicated `V2`-prefixed counterpart to allow teams to adopt enhancements gradually, **not all components followed this pattern**.
In some cases, breaking changes were introduced directly in the V2 release without creating a separate `V2` component name.
To help identify this:
- **Migration possible while staying on 1.X — via V2 Component or usage adjustments:** The updated (V2) form of this component is already included in the latest 1.X release. You can migrate without upgrading to 2.X by switching to the V2 Component or updating your usage to avoid deprecated features (such as removing or replacing certain props).
- **Requires 2.X upgrade — migration available only in major V2:** The updated component or breaking change is only available starting in major version 2.X, where it becomes the default without any "V2" prefix.
## Badge
UITabBar, inline search
Single Value: {JSON.stringify(singleValue)}
Multiple Values: {JSON.stringify(multipleValues)}
All Values: {JSON.stringify(allValues)}
---
id: use-translate
category: Utilities
title: useTranslate
description: Used to get the translated string from the i18n object.
---
```jsx
import { useTranslate } from '@uhg-abyss/mobile/hooks/useTranslate';
```
The `useTranslate` hook is used to get the translated string from the Abyss [i18n](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/i18n/translations/en.ts) object.
## Usage
```typescript
interface I18nTranslate {
t: (key: string, replacements?: object) => string;
i18n: object;
}
useTranslate(key: string, replacements?: object): I18nTranslate
```
The `key` argument corresponds to the key in the i18n object. The `replacements` argument is an object that contains the values to replace in the translated string.
Let's use an example to illustrate how to use the `useTranslate` hook. In the [TextArea](/mobile/ui/text-area) component, we have a text block that displays the remaining characters available
to be typed in the text area. We can get that value with the key `TextArea.charactersRemaining`.
```tsx example
() => {
const { t } = useTranslate();
return | Scale | Percent |
|---|---|
| XL | 110% |
| XXL | 120% |
| XXXL | 130% |
| AX1 | 179% |
| AX2 | 214% |
| AX3 | 264% |
| AX4 | 314% |
| AX5 | 357% |