Upgrading to 3.4.0 from 3.3.x | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
Migration
If you are starting a new project, please try gluestack-ui for better performance and new design.
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.
Copyimport { NativeBaseProvider, extendTheme, v33xTheme } from 'native-base';// ...const yourCustomTheme = {// ...};<NativeBaseProvidertheme={extendTheme(v33xTheme, yourCustomTheme)}></NativeBaseProvider>;
MadeWithNativeBase