Migrating to v4
React Native Elements v4 introduces many features including few new components, fully typescript support and some breaking changes whose migration is being given below.
Core changes
To use the v4 version, you first need to update the package names:
- import {} from 'react-native-elements'
+ import {} from '@rneui/themed'
You can install the packages from npm or yarn
npm install @rneui/base @rneui/themed
# or with yarn
yarn add @rneui/base @rneui/themed
You can also make alias
for package to help you with migration.
yarn add react-native-elements@npm:@rneui/themed
Colors
Added a new background
color to the colors
object.
const colors={
primary: '#2e7d32',
secondary: '#757575',
+ background: '#ffffff',
}
Pressable
These components are now using Pressable
instead of Touchable
- Avatar
- Badge
- ButtonGroup
- CheckBox
- Icon
- Image
- ListItem
- SearchBar
- SpeedDial
- Tile
Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
This change would let you use onPressIn
& onPressOut
APIs in components, For example
<CheckBox
title="I agree"
onPress={()=>{}}
onLongPress={()=>{}}
+ onPressIn={()=>{}}
+ onPressOut={()=>{}}
onPress={() => {}}
/>
and the rest of props for Pressable
can be added via pressableProps
API
<ButtonGroup
+ pressableProps={{android_ripple:{radius:2}}}
/>
few other props (like underlayColor
) will not be supported, you can remove them.
Components
ThemeProvider
Please make sure that ThemeProvider
is defined at the root of your application (even if you are using the default theme) and NO
useStyles or useTheme is called before <ThemeProvider>
- <ThemeProvider theme={myTheme} useDark={false}>
+ <ThemeProvider theme={myTheme}>
<Button title="My Button" />
</ThemeProvider>
Create custom theme using createTheme
helper
- const myTheme: FullTheme = {
+ const myTheme = createTheme({
- colors: {
+ lightColors:{
primary: '#f2f2f2',
},
+ darkColors: {
+ primary: '#121212',
+ },
+ mode: 'dark',
};
Since useDark
is deprecated, you can switch dark
and light
themeColors using updateTheme
function which can be access from useTheme
hook.
Complete example of root of our application
import { ThemeProvider, Button, createTheme } from '@rneui/themed';
const myTheme = createTheme({
lightColors: {
primary: '#f2f2f2',
},
darkColors: {
primary: '#121212',
},
mode: 'dark',
});
const App = () => {
return (
<ThemeProvider theme={myTheme}>
<Button title="My Button" />
</ThemeProvider>
);
};
You can use props for components while defining themes
import { createTheme } from '@rneui/themed';
const myTheme = createTheme({
Button: (buttonProps) => ({
titleStyle: {
color: buttonProps.type === 'solid' ? 'blue' : 'red',
},
}),
});
Thus when we use type='solid'
in Button
component, it will use titleStyle
will have "blue" color.
<Button type='solid'>
Refer to Customization for more details.
Tooltip
Tooltip
is one of core component of RNE, Since v4 this component would be stateless and would use visible
, onOpen
& onClose
Props for its working.
<Tooltip
+ visible={open}
+ onOpen={() => {
+ setOpen(true);
+ }}
+ onClose={() => {
+ setOpen(false);
+ }}
popover="Hey All"
/>
You can still use Tooltip as stateful component by doing:
const ControlledTooltip: React.FC<TooltipProps> = (props) => {
const [open, setOpen] = React.useState(false);
return (
<Tooltip
visible={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
{...props}
/>
);
};