v1.0.0
Summary
React Native Elements v1 is finally here!! π― This is the biggest and more improved release so far so please read through the release notes below carefully. And welcome to v1 π
Thanks to all that have submitted issues, pull requests and helped us to reach this milestone today. β€οΈ
Be sure to check out our blog post if you're upgrading from 0.19.1!
BREAKING CHANGES
Avatar, Badge, ButtonGroup, CheckBox, Icon, ListItem, SocialIcon
If you were using the component
prop for any of these, it's now changed to Component
. 3582b78 @iRoachie
Avatar
If you were using the editButton
prop before, the param names are now changed e44bff0 @iRoachie
// Before
<Avatar
editButton={{
iconName: 'xx',
iconType: 'xx',
iconColor: 'xx'
}}
/>
// After
<Avatar
editButton={{
name: 'xx',
type: 'xx',
color: 'xx'
}}
/>
Button
-
We've added button types! Buttons can now have a type of
solid
,clear
oroutline
. This means that theclear
prop is now deprecated. Also in this change,buttons on Android by default won't be raised -- if you want a raised button, then add theraised
prop. 773131e, 5673323 @iRoachie -
The default title "Welcome to React Native Elements" is now gone. If for some reason you were depending on this in your app π you'll have to set the title. 52678d5 @iRoachie
Badge
wrapperStyle
is now been deprecated.containerStyle
now functions as what waswrapperStyle
and a new propbadgeStyle
replaces what wascontainerStyle
.element
prop which was undocumented is now deprecated. Just use thevalue
prop- Badges can no longer render children. Instead, if you want a custom component you can use the
value
prop which now supports rendering react components. - We've added "mini badge" π
which functions as a status indicator when no
value
is provided. - Adds
status
prop which is a convenience prop for styling the background viabadgeStyle
for quick and commonly used scenarios
ButtonGroup
Deprecates the disableSelected
prop and introduces 5 new props for handling disabled states:
disabled
disabledStyle
disabledTextStyle
disabledSelectedStyle
disabledSelectedTextStyle
Card
Deprecates two props:
fontFamily
- Can be set viatitleStyle
propflexDirection
- Can be set viawrapperStyle
prop
SearchBar
Adds the ability to customize the "Cancel" button on the iOS SearchBar with some new keys in the cancelButtonProps
props:
cancelButtonProps: {
buttonStyle,
buttonTextStyle,
color,
disabled, // boolean for the Touchable
buttonDisabledStyle,
buttonDisabledTextStyle,
}
Input
Input previously had a default width of 90% that would give it a weird inset. It's now been fixed to appear as expected.
See before and after in #1640 (comment).
Text
Deprecates the fontFamily
prop. If you want to change the font family you can use the style
prop.
Features
- Adds showcase section website 4af1ce3 @Monte9
- New Image component! 3663c0c @iRoachie
- New withBadge HOC for adding Badges to any component 59845eb @janhesters
- Add AntDesign to list of available icon sets 83a8625 @osdnk
- Add platform specific colors to theme e14237d @janhesters
Divider
Allow passing View properties b7617e8 @iRoachieHeader
Add props for background image 1957e0d @MHaseInput
Allowlabel
to be a react element d1ac878 @MHaseInput
AddsetNativeProps
method 61dc4af @marcelolxTile | FeaturedTile
Allowcaption
to be a react element 0f83366 @MHaseTile
AllowImageComponent
prop for custom image component b39b88b @BradenM- React Native Web will now use styles and touchable components for iOS cb11a69 6349f79 62a9fcc 489723e 21292b4 a2e179f c05a8fd 659ad08 4379a78 241adb4 94b9cee @piu130
Bug Fixes/Warnings
Avatar
Correct proptype foroverlayContainerStyle
andcontainerStyle
412a7d1 @inandszaAvatar
ImageComponent prop type to allow both of func and object 9bcd638 @haruelrovixButton
Make padding consistent 5508d92 @haruelrovixButton
Rounded corners with custom width, height now work correctly on android 5673323 @iRoachieHeader
Fix issue with iPhone Xr de522f1 @iRoachieListItem
Fix typescript type forcomponent
prop https://github.com/react-native-elements/react-
native-elements/commit/19ada2baafd754f05e68667bc0eae887965e9632 @iRoachieListItem
Fix displaying of rightTitle and other right props when title is not provided 4a44469 @iRoachieOverlay
Fix ScrollView usage 22654c9 @iRoachieOverlay
FixonBackdropPress
22654c9 @iRoachieOverlay
Fix resizing issues when changing orientation or changing window size bcaafba @iRoachieOverlay
Fix array keys warning 8778d38 @iRoachieSearchBar
Fix bug where clear button wouldn't show if value prop was set 28c6141 @franck-nadeauSearchBar
Fix bug withplatform='android'
where clear button was showing cancel icon 3f3e95d @iRoachieSearchBar
Fix bug withplatform='android'
where margins on the containerStyle couldn't be applied 96b2f3f @iRoachieSlider
Fix bug when updating the bounds dynamically aa4bf53 @xavier-villelegierSlider
Fix bug when using LayoutAnimation + Slider on Android 324d0bc @xavier-villelegierSlider
Fix bug where vertical sliders weren't being layout correctly e2555a6 @armenbadalyanText
propType warning when passing array of objects for style prop 12e830f @iRoachieText
Fix bug where local props would not override the theme set font size 5d64dc2 @iRoachieThemeProvider
Remove circular dependency 687fc8c @haruelrovixThemeProvider
Fix bug where withTheme hoc wasn't passing statics (navigationOptions) 4a0e06e @iRoachieTooltip
Proper calculation of tooltip position based on visible element width 203c94b @cidevant- Remove warning for react-native-vector-icons when installing 4c412f1 @haruelrovix
Docs
- Small Typo Fix on Getting Started Page 74aceff @swkane
- Made small updates to the prose on Overview page d72e2ce @swkane
- Added
importΒ β¦
statements on some pages 1a3e4eb 764ec1a 15b9952 @swkane - Fix small list item error 98e8485 @janhesters
- Fix links in some docs pages 4c3dda9 @MHase
- Fix GitHub spelling 945e2c8 @sdaniel55
- Add
overlayContainerStyle
prop to Tile 092283c @JoseVf - Typo on Tooltip page c1c0a7f @jsina
- Add closing braces on CheckBox examples 7a97cee @kelseyyim
Misc
- (types) Add missing types for Avatar 65264c0 @haruelrovix
- (types) Change type of HeaderProps.placement 358f452 @curtisrutland
- (types) Allow checkmark on ListItem to pass partial props e1b7f42 @janhesters
- (types) Fix ListItem checkBox props typo 59bab39 @josephktcheung
- (test) Fix failing tests on Windows b8de1db @haruelrovix
- (test) Fix eslint errors, and add eslint to precommit and lint 82c1cdf b9f8317 @tux-tn
- (Icon) Move default props to the
defaultProps
9574edf @msevestre - (SearchBar) Switch Icons from material-community to material d60bb03 @piu130