Upgrading to 3.4.0 from 3.3.x | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Upgrading to 3.4.0 from 3.3.x
Changelog
The following is the overview of the changelog
Foundation
Added new color tokens for text.
All colors checked with WCAG 3.0’s APCA accessibility.
Updated derived colors for danger, error, success, and tertiary.
Added letter spacing in headings.
Components
Added the following design changes to all components: color change, shadow, padding, and opacity changes. All changes are according to the new formats.
Icon:
Removed xxs from sizes. Use 2xs size instead.
Checkbox & Radio:
Removed interactionBox scaling animation design for hover state.
Badge
Added new warning variant.
Added a variant with icon.
Pseudo Props for Color Modes
Updated theme using _light and _dark props for light mode and dark mode respectively.
Internal props will still have higher specifity, as it will override platform props as well as color mode props.
Theme Decoupling
In 3.4 we have completely decoupled the theme. All the internal design props are now transferred to the theme.
This will allow you to use multiple theme files in your project and toggle between them efficiently.
Extend previous version's theme for backward compatibility
You need to add v33xTheme to your NativeBaseProvider which preserves all the old design that was changed or removed in v3.4.0.
Copy
import { NativeBaseProvider, extendTheme, v33xTheme } from 'native-base';
// ...
const yourCustomTheme = {
// ...
};
<NativeBaseProvider
theme={extendTheme(v33xTheme, yourCustomTheme)}
></NativeBaseProvider>;
Nativebase logo
MadeWithNativeBase