React Native Elements has UI elements that are easy to use & really customizable. It also has theming, platform specific search bars, React Native Web support, and much more.
It's finally here! Let's put our hands together and welcome React Native Elements 1.0 🎉
This release is centered around making RNE components that everyone loves more intuitive to use & stable. This is not to say that all the work is done, but this is definitely a giant leap in the right direction and one that we have been working on for over a year.
I want like to say thank you to our users for using RNE and giving us feedback through issues on the repo and also the contributors who have the taken time to contribute and help improve RNE together. Finally, I'd like to say a big thanks to Kyle Roach and Xavier Villelégier without whom this project would not have been as awesome as it is today!!
This blog post is meant to serve as a migration guide for upgrading to
react-native-elements: "^1.0.0" from
0.19.1 and also a way to document and share all the breaking changes, new features and other improvements in this release. For those updating from
1.0.0-beta7 you can view those release notes here.
The wait is over!! Get excited, cause we certainly are. 14K 🌟 and counting...
First, install the library using your favorite package manager:
yarn add react-native-elements
Also if you are using an older version, just update the
react-native-elements version in
Updated all components that have the
Componentprop as per convention (#1479)
Some colors have been removed from the colors file and some changed. Here's the list of colors from 0.19.1.
xlargehave been removed. Usage is now
wrapperStyleprop has been removed - use
containerStyleprop instead (#1545)
badgeStyleprop replaces previous behaviour of
elementprop which was undocumented is removed - use
valueprop instead (#1545)
- can no longer render children - instead use
valueprop which now supports rendering react components (#1545)
- By default on Android there's no more elevation (#1538). To get elevation, use the
- Removed props
outline(#1540). Instead use the
- Removed props
backgroundColor. Use the
buttonStyleprop to set the background color.
iconComponentprop. If you want to use a different Icon component - the
iconprop supports custom elements.
loadingRightprop. Loading indicator displays without title. May re-add in future.
borderRadiusprop. To control the border radius use the
- Removed props
fontFamily. Instead use the
titleStyleprop to set attributes for the title.
largeprop. May re-add in future.
disableSelectedprop has been removed (#1587)
fontFamilyprop is deprecated - instead use
flexDirectionprop is deprecated - instead use
FormInputbeen renamed to
clearTextmethod renamed to
normalizeFontSizeprop removed. You can use the
normalizehelper along with the
inputStyleprop to normalize font sizes.
FormLabelhas been removed. This is now built into the
Inputcomponent by use of
labelPropscan be used to customize it.
FormValidationMessagehas been removed. This is now built into the
Inputcomponent by use of
errorPropscan be used to customize it.
outerContainerStylesremoved #1221. Instead use the
containerStyleprop for main styling, along with props
SearchBar now supports different platform styles! To get an iOS or Android themed SearchBar, use the
noIconprop removed. Instead to remove the search icon use the
showLoadingIconprop renamed to
Listcomponent has been removed!
Listwas just a regular React Native View with some small margin styles. It wasn't actually needed to use the
ListItemcomponent. Instead we recommend using the
SectionListcomponents from React Native which function both as Views and also displaying items, pull to refresh and more.
- If you want to apply the same styles that the
Listcomponent provided prior to 1.0, see this comment.
leftIconContainerStyle, removed. The
leftIconprop can accept props.
avatarOverlayContainerStyleremoved. Avatars can now be customized using the
leftAvatarprops which can either render a custom element or an object that describes the props from Avatar.
wrapperStyleprop removed. Use the
rightTitleNumberOfLinesprops removed. Use the
subtitlePropsprops to pass props for each..
hideChevronremoved. Use the
chevronprop instead. However, the behaviour is swapped
chevronprop now can accept an object describing it's appearance.
fontFamilyremoved. Use the
subTitleStyleprops to set change the text styling
titleContainerStyleremoved. Use the
rightTitleContainerStyleremoved. Use the
subtitleContainerStyleremoved. Use the
switchedremoved. Instead use the
switchprop wich accepts an object describing its props.
textInputPlaceholderremoved. We now expose a single
inputprop which accepts an object describing its props.
onPressRightIconremoved. Use the
rightIconprop which can accept an object now describing its props.
titleFontremoved. Use the
titleStyleprop instead to customize the title. #1231
pricingFontremoved. Use the
pricingStyleprop instead to customize the price. #1231
infoFontremoved. Use the
infoStyleprop instead to customize the info. #1231
buttonFontremoved. Use the
buttonprop with a
buttonStylekey to set this.
fontFamilyprop is removed - instead use
- Support for React Native Web - read more on it here (#1664)
- Theming support across components - easily build light & dark modes and theme your components from one place (#1454)
<Image />Component - displays images with a placeholder and smooth image load transitioning (#1582)
<Input />Component - a branch new and improved replacement for
withBadgeHOC allows you to easily add badges to icons and other components (#1604)
- New "mini badge" with the
<Badge />component - Perfect for status indicators and notifications #1545
- New Tap Rating
<AirbnbRating />component - powered by
<SearchBar />component - drop-in usage with native look and feel (#837)
<Slider />Component - supports
- Button types! Easily have solid, clear, and outline buttons with one prop. (#1540)
- Background image support in the
- Add support for
Assorted fixes & improvements
helpersmethods that are used internally
- Close to 100% types coverage
Ecosystem and web support
- Mock iOS Settings Screen - Check it out on the RNE-App here
- Follow this detailed Blog Post to use RNElements with RNWeb
Lastly, here is the RNE v1 release in numbers:
- 470 commits (with over 272 PR's)
- 371 files changes (52,920 additions and 32,737 deletions)
- Over 80 contributors
- Over \$1500 awarded to contributors
Thanks for reading! Feel free to share this post if you enjoyed reading it.