Skip to main content
Version: 7.0.0

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