Skip to main content

Migrating v7 -> v8

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

General​

uilib-native (our native library) has been moved from dependencies to peerDependencies.
Make sure to pod install after updating.
We do plan on making this optional in the future.

Components​

ActionSheet​

This component is affected by the Dialog migration

asPanViewConsumer​

Removed (use PanView instead)

DateTimePicker​

This component is affected by the Dialog migration

Dialog​

The component was refactored completely with some API changes.

Props migration:

  • helperText -> hint
  • panDirection -> direction
  • onDialogDismissed -> onDismiss
  • pannableHeaderProps -> headerProps
    Some props from pannableHeaderProps has moved \ changed their name:
    • titleNumOfLines -> titleProps.numOfLines
    • titleAccessibilityLabel -> titleProps.accessibilityLabel
    • message -> subtitle
    • leftCustomElement -> leadingAccessory
    • rightCustomElement -> trailingAccessory
    • bottomCustomElement -> bottomAccessory
  • overlayBackgroundColor -> modalProps.overlayBackgroundColor
  • supportedOrientations -> modalProps.supportedOrientations
  • accessibilityLabel -> modalProps.accessibilityLabel
  • renderPannableHeader -> headerProps

Additional notes:

  • If you have a ScrollView or FlatList as a child of the Dialog, make sure to import them from react-native-gesture-handler (see this link for SectionList).
  • The new onDismiss has no parameters (() => void)
  • If you have an issue with a touchable view inside a scrollable Dialog on Android, check out the disableAnimation prop.

Check out the full API: https://wix.github.io/react-native-ui-lib/docs/components/overlays/Dialog

ExpandableOverlay (Incubator)​

This component is affected by the Dialog migration

PanView (new)​

One component to replace all the previous views (PanGestureView, PanDismissibleView, PanResponderView, PanListenerView, PanningProvider, asPanViewConsumer and PanningContext).

  • Use PanView.PanningDirections.X (or Dialog.directions.X where relevant) instead of PanningProvider.Directions.X.

PanDismissibleView​

Removed (use PanView instead)

PanGestureView​

Removed (use PanView instead)

PanListenerView​

Removed (use PanView instead)

PanningContext​

Removed (use PanView instead)

PanningProvider​

Removed (use PanView instead)

PanResponderView​

Removed (use PanView instead)

SharedTransition​

Removed

StackAggregator​

Use the backgroundColor prop instead of contentContainerStyle={{backgroundColor}} Fix card being transparent on Android onCollapseChanged will now be called after the animation has ended (as was intended)

Text​

[iOS] In rare cases where Text is nested and textAlign is passed, you might need to pass it to the nested component as well.

<Text style={{textAlign: 'right'}}>This <Text>is working</Text></Text>
<Text style={{textAlign: 'right'}}><Text>This is not working</Text></Text>
<Text style={{textAlign: 'right'}}><Text>This is not</Text> working</Text>

Picker​

The component was refactored to simplify its API and improve type safety.

Migration Steps​

Picker:

  • value - The picker now only supports primitive values (string | number) instead of object-based values
  • migrate - Removed

Picker.Item:

  • Items structure remains the same: {label: string, value: primitive} format is unchanged
  • All items now use the label prop directly - no custom label transformation needed
  • getItemLabel - Removed (use item.label to get label)
  • getItemValue - Removed (use item.value to get value)

Check out the full API: https://wix.github.io/react-native-ui-lib/docs/components/form/Picker