Skip to main content

Version 2.3 Upgrade Guide

· 4 min read
Core Team

There have been a lot of changes and improvements coming through the pipeline recently with react-native-elements. So in preparing for a version 3, there are some planned deprecations that will be added into version 2.3 and then removed in version 3.

The reason for these changes is that react-native-elements regularly gets requests for new features and enhancements quite frequently. The fast and easy method of adding these new features is usually to add another prop into the component that then injects some change into a child component. Unfortunately, this ends up leading to the components having a lot of props, lots of conditional code, and additional code complexity. The solution going forward and into version 3 will be to break down large components into smaller pieces so that it is easier to inject your own code without having to wait for an additional prop to be added.

As we continue to build up to version 3, this post will continue to be updated with new step-by-step directions on how to upgrade your code to work around these changes. The RNE team thanks you for your patience, and we hope that you see the value in the upcoming changes.

Avatar#

accessory, showAccessory, and accessoryProps are all being dprecated. There is now a child component Avatar.Accessory that you insert as a child component instead.

<Avatar>  <Avatar.Accessory {...accessoryProps} /></Avatar>

ListItem#

ListItem has a large number of deprecated props. ListItem has been somewhat of a kitchen sink. All the props can be replaced by inserting them as children in the order of left to right as they appear on the screen.

leftElement, leftIcon, leftAvatar, rightElement, rightIcon, rightAvatar#

These can be replaced by using Text, Icon, and Avatar components respectively.

title, titleStyle, titleProps, subtitle, subtitleProps, subtitleStyle#

These props can be replaced by ListItem.Content, ListItem.Title and ListItem.Subtitle

<ListItem>  <ListItem.Content>    <ListItem.Title style={titleStyle} {...titleProps}>      {title}    </ListItem.Title>  </ListItem.Content></ListItem>

contentContainerStyle, rightContentContainerStyle#

These props should be placed in the style prop of ListItem.Content.

rightTitle, rightTitleStyle, rightTitleProps, rightSubtitle, rightSubtitleStyle, rightSubtitleProps#

These props also use ListItem.Content, ListItem.Title, and ListItem.Subtitle. Simply add the prop right to each one.

<ListItem>  <ListItem.Content right>    <ListItem.Title right style={titleStyle} {...titleProps}>      {title}    </ListItem.Title>  </ListItem.Content></ListItem>

input, buttonGroup, switchProps, checkBox, badge, chevron, checkmark#

The input prop can be replaced with ListItem.Input.

The buttonGroup prop can be replaced with ListItem.ButtonGroup.

The switchProps prop can be replaced with react-native's Switch.

The checkBox prop can be replaced with ListItem.CheckBox.

The badge prop can be replaced with Badge.

The chevron prop can be replaced with ListItem.Chevron.

The checkmark prop can be replaced with :

<Icon name="check" size={20} />

Card#

For Card the following props have all been deprecated: title, titleStyle, titleNumberOfLines, dividerStyle, image, imageStyle, imageProps, imageWrapperStyle, featuredTitle, featuredTitleStyle, featuredSubtitle, featuredSubtitleStyle

title, titleStyle, titleNumberOfLines#

Move these props into Card.Title

<Card>  <Card.Title style={titleStyle} numberOfLines={titleNumberOfLines}>    {title}  </Card.Title></Card>

dividerStyle#

The divider and the dividerStyle itself were moved into Card.Divider

image, imageStyle, imageProps, imageWrapperStyle#

These can be replaced with Card.Image which accepts all Image props. imageWrapperStyle can be attached to a View that wraps the Image

featuredTitle, featuredTitleStyle, featuredSubtitle, featuredSubtitleStyle#

These were both replaced with Card.FeaturedTitle and Card.FeaturedSubtitle

BottomSheet#

BottomSheet was added in version 2.2, and it was noted that it had some strict dependencies that weren't so well liked. So BottomSheet has changed completely and it is encouraged that you checkout the docs page on it again.

Dark Mode#

Make sure to checkout the customization page. We added a dark mode configuration to the ThemeProvider that should help out in bootstraping your app's dark mode.