Skip to content

V7/migration guide #2491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 16, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions docs/getting-started/v7.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
---
sidebar_position: 5
sidebar_label: Migrating v6 -> v7
title: "Migrating v6 -> v7"
# path: "/getting-started/v7"
---
## `[email protected]`

### Presets

### ThemeManager
ThemeManager doesn’t contain the following getters anymore:
- `getTheme()`
- `get primaryColor()`
- `get CTATextColor()`
- `get CTADisabledColor() `
- `get CTABackgroundColor()`
- `get titleColor()`
- `get subtitleColor()`
- `get dividerColor()`

Also, the theme now contains only the ‘primaryColor’ and the ‘compontns’ object.

#### Colors
‘Colors.primary’ is deprecated. Please use the design tokens instead, for example:
instead of passing
`style={{backgroundColor: Colors.primary}}`
pass
`style={{backgroundColor: Colors.$backgorundPrimaryHeavy}}`

To generate the tokens based on your primary color, use:
`Colros.loadDesignTokens({primaryColor: <your primary color>})`

### Shadows
The `dark` presets are deprecated. Please use the `grey` presets instead.


### Dependencies

#### typescript
Minimum version of typescript is now ^4.9.5.

### moment
The `moment` package was removed from our dependencies and bacome an optional dependency for the `DateTimePicker` component (relevant only for `dateFormat` and `timeFormat` feature).


### Components

### Avatar
`imageSource` prop is deprecated. Please use ‘source’ prop instead.

### ChipsInput
The component was deprecated and replaced by formar `Incubator.ChipsInput`.

### ColorPicker
`style` prop is deprecated.

### DateTimePicker
Migrate internal `TextField` component to the new implementation. See `TextField` migration below.

### Drawer
`leftToggleHapticTrigger` prop is deprecated.

### Fader
`FaderPosition` enum `LEFT` and `RIGHT` cases are deprecated. Please use `START` and `END` instead.

### Incubator.Toast
`zIndex` prop is now set to `100` as default on Android.

### KeyboardAccessoryView
`iOSScrollBehavior` prop and `iosScrollBehaviors` enum are deprecated. Please use `scrollBehavior` prop instead and pass it `KeyboardAccessoryView.scrollBehaviors`.

### KeyboardAwareListView
Component removed. Please use `KeyboardAwareScrollView` or `KeyboardAwareFlatList` components instead.

### Picker
`value` prop now accepts only `string` or `number` and not objects.
`useNativePicker` renamed `useWheelPicker`.
`renderNativePicker` prop was deprecated.

### RadioButton
`contentOnRight` prop is deprecated (the content is on right by default).

### Skeleton
`contentData` prop is deprecate. Please use the `customValue` prop.
All the following props has been removed, you can send them inside the `listProps` prop:
- `size`
- `contentType`
- `hideSeparator`
- `showLastSeparator`

### TabBar
Component removed. Please use `TabController` component instead.

### TabController
`selectedIndex` prop is deprecated. Please use `initialIndex` prop instead.

### TextField
The component was refactored completely with a new API.

Props migration:
`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

Check full (and new) API: https://wix.github.io/react-native-ui-lib/docs/components/incubator/TextField

### WheelPicker
The WheelPicker component has a new implementation.
The component is now uncontrolled and have some prop changes:
`selectedValue` prop renamed `initialValue` (do not update unless it has been changed from non-user origin).
`onValueChange` prop renamed `onChange`.
Also, `children` can now be passed to the `items` prop (not mandatory).

Check full (and new) API: https://wix.github.io/react-native-ui-lib/docs/components/incubator/WheelPicker