React Native Elements 1.0
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 een 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 replacescontainerStyle
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 only displays to left now. 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 to<Input />
Component (#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 the Input component by use oflabel
prop. PropslabelStyle
andlabelProps
can be used to customize it.FormValidationMessage
has been removed. This is now built into the Input 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.
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: 139 commits (with over 80 PR's), 205 files changes (+13,398 | −7,359) & over 20 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.