.png?table=block&id=e6f1889a-8bf8-4481-8eca-22483230e5cc&cache=v2)
NativeBase v3 was a good update. It had many bells and whistles that made it highly user-friendly and easy to execute. But while restructuring v3, we found that aspects like the design and theme handling could be better. And that is how we started envisioning v3.4.
The idea was to bring high-impact improvements while staying true to the workflow everyone enjoys. The team worked relentlessly for months now for the new release and we are proud to say, it is finally ready.
Presenting NativeBase v3.4!
In this release, we focused on creating a smoother development experience and improving existing functionalities. We have also made big improvements to the design, so it provides a stellar user experience. And all of this has been done while keeping the core of NativeBase intact.
There were some minor bug fixes and tweaks to make things run without a hitch. (What’s an update without bug fixes right? 😉)
So let’s dive into it the upgrades and the improvements that make up v3.4.
Here is an overview:
- We have enhanced DX with theme decoupling and improved typing experience.
- Users can now switch between multiple themes.
- There is an improvement in the usability and visual accessibility of components as per the APCA method to check color contrast.
- We have added a unique color palette for enhancing consistency in text color.
- There now exist semantic colors for danger, error, success, and tertiary.
- We have improved letter spacing in 3xl and 4xl headings for better readability and higher impact.
Major Development Changes:
Theme decoupling
Since the first release of v3.0, there was a co-dependency between the component source code and component theme files. This restricted us in many ways from implementing new features and limited our efforts while editing components.
Hence we have moved all the token values/logic that made sense on a theming level to the respective theme files. We have also introduced a lot of new Pseudo Internal props like _input, _stack, etc. These props give you control over every small section of any component structure.
Doing this opened the door for many new features/practices that can be applied in NativeBase core, as well as in any app made with NativeBase.
Here are some perks of Theme Decoupling:
- You can now have two separate themes for Dark and Light Mode.
- You are now able to switch between multiple themes in one app using the Mood Theme switcher.
- There now exists external theme support. You can now ship NativeBase themes as a separate package to anyone and showcase your skills.
- There will no longer exist breaks in design changes. NativeBase will now ship themes from previous minor releases to new minor/major releases. (Older design (v3.3 and above) can be used)
Improved Typing
The colossal library of NativeBase always made it difficult to handle typings on a component-to-component basis. This was a major DX issue reported by many users. With the release of v.3.4, we have fixed a lot of these typing issues.
Other key changes
- In the Icon component, we have removed
XXSfrom the sizes. Users should now use2XSinstead.
- In the CheckBox & Radio components,
interactionBoxscaling animation has been removed from the design for the hover state. We still have_interactionBoxprop, through which you can add back scaling animation.
- We have added new props for Badge with icons, and also a new color scheme of
warning.
- We deprecated status and variants in Toast instead provided a Recipe for the desired variant.
Major Bug Fixes:
- In CheckBox Group, multiple checkbox selections will work as expected.
- TextArea will now support
_focusprop.
- Popover positioning will be displayed correctly.
New Additions:
- In the Input component, we added a new prop for outline color change
focusOutlineColorandinValidOutlineColor.
- We have added
_importantprop for overriding all props.
- We have introduced more specific internal pseudo props in complex components. There will now be a better control for developers.
Design Changes
In this update, our focus was to deliver a smoother user experience. To do that, we focused on improving how designers and developers interacted with components by increasing synergy between their workflows. We also tried to expand the number of design options available to remove limitations in bottlenecks in project execution.
NB v3.4 Figma kit, therefore, offers 29 components with 5800+ variants. All the style properties and components in the file are the exact designs of the component library. We have also introduced a new color palette for consistency in text colors. Semantic colors for alerts and the NativeBase icon set for uniformity in icon sizes have also been added. This will bring greater consistency and synergy between design and development.
Here are the major changes to the design workflow:
- There is now a distinct color palette for text. This will bring consistency and uniqueness to text colors. It is also easier to pin down which shade works best for light and dark modes without compromising on consistency.
- We have introduced semantic colors. This allows for faster communication and lesser confusion.
Danger, Success, Tertiary, and Error are mapped to the colors rose, green, emerald, and red respectively.
- We tested every color using APCA to determine the usability of the components. This will increase visual accessibility. No text elements used on components have a value lower than 60, apart from those concerning disabled texts and states.
- We have improved letter spacing. 3xl and 4xl Headings will now be tighter and give a cleaner look to the texts. This will provide better readability and higher impact.
- We now have consistency in icons. We have used only NativeBase icons set in components design to bring much-needed order to creative entropy.
- We also redefined multiple components including - Input, Select, Text Area, Modal, Pop-over, and AlertDialog.
The Road Ahead
NativeBase is always evolving and improving as a product. The team is still working to create a platform that breathes life to ideas without any hiccups. We will continue making NativeBase better.
If you have any questions regarding the latest update. Please feel free to reach out to us on Twitter. You can also join our Discord Community and interact with us. We are excited to see what magic you create with the latest version.
Till next time then, ciao!
