NativeBase v3.4 Changelog

NativeBase v3 delivered strong updates, but during restructuring, the team identified opportunities to enhance design and theme handling, leading to v3.4.

This release was authored by Rohit Singh, Software Engineer, and Mayank Pagar, Software Engineer Intern.

Presenting NativeBase v3.4!

The release prioritizes a smoother development experience and improved functionality while maintaining NativeBase's core philosophy. Key enhancements include:

• Enhanced developer experience through theme decoupling and improved typing
• Multiple theme switching capability
• Improved component usability and visual accessibility per APCA color contrast standards
• New unique color palette for text consistency
• Semantic colors for danger, error, success, and tertiary states
• Improved letter spacing in 3xl and 4xl headings for readability

Major Development Changes

Theme Decoupling

Previously, component source code and theme files were interdependent, limiting feature implementation. v3.4 decouples these by moving token values and logic to theme files, introducing Pseudo Internal props like __input and __stack for granular component control.

Benefits include:

1. Separate themes for Dark and Light modes
2. Multiple theme switching within one app via Mood Theme switcher
3. External theme support, distributing NativeBase themes as separate packages
4. No design breaks between releases; older designs (v3.3+) remain supported

Improved Typing

"The colossal library of NativeBase always made it difficult to handle typings on a component-to-component basis." This developer-experience issue, reported by many users, has been substantially resolved in v3.4.

Other Key Changes

• Icon component: XXS size removed; use 2XS instead
• CheckBox and Radio: interactionBox scaling animation removed from hover state (still available via _interactionBox prop)
• Badge: new icon props and warning color scheme added
• Toast: status and variants deprecated; recipes provided instead

Major Bug Fixes

• CheckBox Group: multiple selections now work as expected
• TextArea: now supports _focus prop
• Popover: positioning displays correctly

New Additions

• Input component: new focusOutlineColor and inValidOutlineColor props
• _important prop for overriding all styles
• More specific internal pseudo props in complex components for better developer control

Design Changes

The design overhaul enhances designer-developer collaboration. The NB v3.4 Figma kit features 29 components with 5800+ variants, matching the component library exactly.

Key design improvements:

• Distinct text color palette for consistency across light and dark modes
• Semantic colors enabling faster communication (Danger to rose, Success to green, Tertiary to emerald, Error to red)
• APCA testing for all colors ensuring usability; all text elements score 60+, except disabled states
• Improved letter spacing in 3xl/4xl headings for cleaner, more impactful text
• Icon consistency using only the NativeBase icon set
• Redefined components including Input, Select, TextArea, Modal, Popover, and AlertDialog

The Road Ahead

NativeBase continues evolving as a product. The team remains committed to creating a seamless platform for bringing ideas to life without friction.

For questions, connect via Twitter or join the Discord Community.