Skip to main content

Migrating v6 -> v7

react-native-ui-lib@7.x.x​

Presets​

ThemeManager​

ThemeManager doesn’t support the following settings and getters anymore:

  • getTheme()
  • primaryColor
  • CTATextColor
  • CTADisabledColor
  • CTABackgroundColor
  • titleColor
  • subtitleColor
  • dividerColor

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

See Colors docs for more information

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/form/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/form/WheelPicker