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...
Installationβ
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 package.json
to ^1.0.0
Breaking changesβ
Updated all components that have the
component
prop toComponent
prop 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.
{
primary: '#9E9E9E',
primary1: '#4d86f7',
primary2: '#6296f9',
secondary: '#8F0CE8',
secondary2: '#00B233',
secondary3: '#00FF48',
grey0: '#393e42',
grey1: '#43484d',
grey2: '#5e6977',
grey3: '#86939e',
grey4: '#bdc6cf',
grey5: '#e1e8ee',
dkGreyBg: '#232323',
greyOutline: '#bbb',
searchBg: '#303337',
disabled: '#dadee0',
white: '#ffffff',
error: '#ff190c',
};
Avatar
β
- Props
small
,medium
,large
,xlarge
have been removed. Usage is nowsize="small"
etc. #1098
Badge
β
wrapperStyle
prop has been removed - usecontainerStyle
prop instead (#1545)badgeStyle
prop replaces previous behaviour ofcontainerStyle
prop (#1545)element
prop which was undocumented is removed - usevalue
prop instead (#1545)- can no longer render children - instead use
value
prop which now supports rendering react components (#1545)
Button
β
- By default on Android there's no more elevation (#1538). To get elevation, use the
raised
prop. - Renamed
textStyle
totitleStyle
- Renamed
containerViewStyle
tocontainerStyle
- Removed props
transparent
andoutline
(#1540). Instead use thetype
prop.
// Transparent
<Button type="clear" />
// Outline
<Button type="outline" />
- Removed props
secondary
,secondary2
,secondary3
,primary1
,primary2
,backgroundColor
. Use thebuttonStyle
prop to set the background color. - Removed
iconComponent
prop. If you want to use a different Icon component - theicon
prop supports custom elements. - Removed
loadingRight
prop. Loading indicator displays without title. May re-add in future. - Removed
borderRadius
prop. To control the border radius use thebuttonStyle
prop. - Removed props
color
,fontSize
,fontWeight
, andfontFamily
. Instead use thetitleStyle
prop to set attributes for the title. - Removed
large
prop. May re-add in future.
ButtonGroup
β
disableSelected
prop has been removed (#1587)
Card
β
fontFamily
prop is deprecated - instead usetitleStyle
prop (#1659)flexDirection
prop is deprecated - instead usewrapperStyle
prop (#1659)
Form
β
FormInput
been renamed toInput
(#497)clearText
method renamed toclear
textInputRef
andcontainerRef
props removednormalizeFontSize
prop removed. You can use thenormalize
helper along with theinputStyle
prop to normalize font sizes.
FormLabel
has been removed. This is now built into theInput
component by use oflabel
prop. PropslabelStyle
andlabelProps
can be used to customize it.FormValidationMessage
has been removed. This is now built into theInput
component by use oferrorMessage
prop. PropserrorStyle
anderrorProps
can be used to customize it.
Header
β
- Props
innerContainerStyles
,outerContainerStyles
removed #1221. Instead use thecontainerStyle
prop for main styling, along with propsleftContainerStyle
,centerContainerStyle
, andrightContainerStyle
when needed.
SearchBar
β
SearchBar now supports different platform styles! To get an iOS or Android themed SearchBar, use the platform
prop. platform="ios"
or platform="android"
noIcon
prop removed. Instead to remove the search icon use thesearchIcon
prop. E.gsearchIcon={null}
showLoadingIcon
prop renamed toshowLoading
#837containerRef
prop removed
List
β
List
component has been removed!List
was just a regular React Native View with some small margin styles. It wasn't actually needed to use theListItem
component. Instead we recommend using theFlatList
orSectionList
components 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
List
component provided prior to 1.0, see this comment.
ListItem
β
leftIconOnPress
,leftIconOnLongPress
,leftIconUnderlayColor
, andleftIconContainerStyle
, removed. TheleftIcon
prop can accept props.
<ListItem
title="Yea"
leftIcon={{ name: 'home', onPress: () => alert('hello') }}
/>
avatar
,avatarStyle
,avatarContainerStyle
,roundAvatar
, andavatarOverlayContainerStyle
removed. Avatars can now be customized using therightAvatar
andleftAvatar
props which can either render a custom element or an object that describes the props from Avatar.
<ListItem
leftAvatar={{
title: 'MD',
rounded: false,
containerStyle: { margin: 5 },
onPress: () => alert('hey'),
}}
rightAvatar={{ title: 'DW', onLongPress: () => alert('hey') }}
/>
wrapperStyle
prop removed. Use thecontainerStyle
prop instead.titleNumberOfLines
,subtitleNumberOfLines
, andrightTitleNumberOfLines
props removed. Use thetitleProps
,rightTitleProps
, andsubtitleProps
props to pass props for each..
<ListItem titleProps={{ numberOfLines: 4 }} />
hideChevron
removed. Use thechevron
prop instead. However, the behaviour is swappedhideChevron={true}
behaves likechevron={false}
chevronColor
removed. Thechevron
prop now can accept an object describing it's appearance.
<ListItem chevron={{ color: 'pink' }} />
fontFamily
removed. Use thetitleStyle
andsubTitleStyle
props to set change the text stylingtitleContainerStyle
removed. Use thetitleStyle
prop instead.rightTitleContainerStyle
removed. Use therightTitleStyle
prop instead.subtitleContainerStyle
removed. Use thesubtitleStyle
prop instead.label
prop removed.switchButton
,onSwitch
,switchDisabled
,switchOnTintColor
,switchThumbTintColor
,switchTintColor
, andswitched
removed. Instead use theswitch
prop wich accepts an object describing its props.textInput
,textInputAutoCapitalize
,textInputAutoCorrect
,textInputAutoFocus
,textInputEditable
,textInputKeyboardType
,textInputMaxLength
,textInputMultiline
,textInputOnChangeText
,textInputOnFocus
,textInputOnBlur
,textInputSelectTextOnFocus
,textInputReturnKeyType
,textInputValue
,textInputSecure
,textInputStyle
,textInputContainerStyle
,textInputPlaceholder
removed. We now expose a singleinput
prop which accepts an object describing its props.onPressRightIcon
removed. Use therightIcon
prop which can accept an object now describing its props.
<ListItem rightIcon={{ name: 'home', onPress: () => console.log('clicked') }} />
PricingCard
β
titleFont
removed. Use thetitleStyle
prop instead to customize the title. #1231pricingFont
removed. Use thepricingStyle
prop instead to customize the price. #1231infoFont
removed. Use theinfoStyle
prop instead to customize the info. #1231buttonFont
removed. Use thebutton
prop with abuttonStyle
key to set this.
<PricingCard button={{ buttonStyle: { fontFamily: 'Arial' } }} />
Text
β
fontFamily
prop is removed - instead usestyle
prop (#1659)
New featuresβ
- 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)
- New
<Image />
Component - displays images with a placeholder and smooth image load transitioning (#1582) - New
<Input />
Component - a branch new and improved replacement for<FormInput />
(#497) - New
withBadge
HOC 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 byreact-native-ratings
(#1671) - Platform-specific
<SearchBar />
component - drop-in usage with native look and feel (#837) <Slider />
Component - supportsvertical
orientation (#1698)- Button types! Easily have solid, clear, and outline buttons with one prop. (#1540)
- Background image support in the
<Header />
(#1556) - Add support for
AntDesign
icons (#1529)
Assorted fixes & improvementsβ
- Updated
react-native-vector-icons
peerDependency to>4.2.0
- Expose
helpers
methods that are used internally - Close to 100% types coverage
- Docs
Ecosystem and web supportβ
Independent Projectsβ
- Mock iOS Settings Screen - Check it out on the RNE-App here
Web Supportβ
- 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.
If you run into any trouble using RNE, please open a new issue here. Also if you want to support us, you can contribute to our Open Collective here.