Skip to main content

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[0.3.0] - 2026-04-06​

Changed​

  • Expo SDK 55 upgrade: All peer dependencies updated to Expo SDK 55 (expo, expo-*, react-native 0.83, react 19.2).
  • MultinaireSwitch internal state: The switch now maintains internal state for optimistic updates, making it feel more responsive regardless of whether an onChange handler is provided.
  • MultinaireSwitch disabled appearance: When no onChange is provided, the switch now renders with opacity: 0.5 to indicate it is non-interactive.
  • MultinaireSwitch thumb color simplified: Removed platform-specific Platform.select for the inactive thumb color — all platforms now use colors.background (light) / colors.onBackground (dark).
  • Tab container background token: MultinaireTopTab and MultinaireBottomTab container backgrounds changed from 'base' to 'backgroundVariant' to better match the design intent.
  • MultinaireStackHeader safe area handling: Replaced manual useSafeAreaInsets top inset calculation in height/padding with safeAreaEdges={['top']} on the container. Both the compact and expanded header layouts are affected.
  • ThemeProvider status bar management simplified: On theme switch, the provider no longer calls ExpoStatusBar.setStatusBarStyle or (on Android) ExpoStatusBar.setStatusBarBackgroundColor. The <StatusBar> component handles style automatically; the provider only sets system UI background color and (Android) navigation bar style.
  • MultinaireInput web height: Added height: '100%' to the web platform style block so the inner text input fills its container correctly.

Fixed​

  • MultinairePagination safe area: The pagination bar now reads bottom from useSafeAreaInsets and applies it as the bottom margin, preventing it from being obscured by the home indicator on iOS.
  • MultinairePagination React key: The key prop has been moved to the outer MultinaireContainer wrapper for each page item (was incorrectly placed on the inner container).

[0.2.7] - 2026-03-30​

Added​

  • TabButtonStyle type: New exported type for customizing tab button appearance with activeBackgroundColor, inactiveBackgroundColor, activeColor, and inactiveColor color keys. Used by MultinaireBottomTabButton, MultinaireTopTabButton, MultinaireBottomTab, MultinaireTopTab, MultinaireTabBar, and MultinaireSideBar.
  • style prop on MultinaireBottomTabButton and MultinaireTopTabButton: New style?: TabButtonStyle prop for controlling active/inactive colors directly on tab buttons.
  • buttonStyle prop on MultinaireBottomTab and MultinaireTopTab: New buttonStyle?: TabButtonStyle prop for consistent button color customization across all items in the tab bar.
  • buttonStyle prop on MultinaireTabBar: New buttonStyle?: TabButtonStyle prop that propagates to the underlying top or bottom tab component.
  • buttonStyle prop on MultinaireTabView: New buttonStyle?: TabButtonStyle prop forwarded to the internal MultinaireTopTab or MultinaireBottomTab.
  • tabStyle prop on MultinaireTabView: New tabStyle?: ContainerStyleProps prop for styling the tab bar container. The existing style prop (from TabProps) now applies to the page content wrapper.
  • useMapNativeTheme hook: New useMapNativeTheme() hook that maps the Multinaire theme (colors, fonts, dark mode) to a React Navigation Theme object. Use it as the theme prop on NavigationContainer.

Changed​

  • Tab and sidebar default styles centralised: MultinaireBottomTab, MultinaireTopTab, and MultinaireSideBar now derive their default container and button styles from the internal useTabStyles hook rather than hard-coded values. Visible defaults: active items use 'background' / 'primary'; inactive items use undefined / 'neutral'.
  • SideBarButton fallback colors removed: MultinaireSideBarButton no longer applies its own fallback colors when style is not passed. Defaults are now provided by the parent component (MultinaireSideBar) via useTabStyles. If you use MultinaireSideBarButton standalone without a style prop, pass explicit colors.
  • getContainerProps no longer adds overflow: hidden: On non-mobile, the returned props no longer include style: { overflow: 'hidden' }. If your layout relied on this clipping, add style={{ overflow: 'hidden' }} manually.
  • PageView mobile layout updated: On mobile, the pagination indicator now renders at the top, page content fills the middle, and navigation buttons sit in a padded container at the bottom. Desktop layout uses a single outer container with consistent padding and gap.

[0.2.6] - 2026-03-26​

Added​

  • Switch color prop: New color?: ColorKeys prop on MultinaireSwitch to set the active track color. Defaults to 'primary'.
  • SideBarButtonStyle type: New exported type for customizing sidebar button appearance with activeBackgroundColor, inactiveBackgroundColor, activeColor, and inactiveColor color keys.
  • SideBarButton style prop: New style?: SideBarButtonStyle prop on MultinaireSideBarButton.
  • SideBar buttonStyle prop: New buttonStyle?: SideBarButtonStyle prop on MultinaireSideBar for consistent active/inactive color customization across all sidebar items.
  • Layout tab style prop: TabProps, TopTabProps, and BottomTabProps now accept style?: ContainerStyleProps for direct container styling on MultinaireTabView, MultinaireTopTab, and MultinaireBottomTab.
  • PageView paginationStyle prop: New paginationStyle?: ContainerStyleProps prop on MultinairePageView to style the pagination sidebar/bar (replaces the removed style prop).

Changed​

  • PageView style prop removed: The style prop on MultinairePageView has been replaced by paginationStyle. Update any usage of style to paginationStyle.
  • PageView unified rendering: Mobile and desktop now share a single render path. The pagination bar switches orientation (horizontal on desktop, stacked on mobile) instead of duplicating the layout tree.
  • getContainerProps signature change: useMultinaireResponsiveDesign().getContainerProps now accepts overrides: Partial<ContainerProps> instead of withMargin?: boolean. Pass an overrides object (or {}) instead. On mobile the function still returns {} regardless.
  • SideBar default colors updated: Active items use onBackground (was primary) and inactive items use neutralVariant (was neutral) by default. Override with buttonStyle.

Fixed​

  • MultinaireSwitch event handler: Fixed the change handler to use the correct onValueChange event (was onChange), resolving cases where the callback was not reliably fired on Android.
  • MultinaireBadge background rendering: Background color is now applied correctly; the badge background no longer bleeds outside the rounded border.

[0.2.5] - 2026-03-25​

Added​

  • useScreenOptions override methods: New stackWithOverrides, topTabWithOverrides, bottomTabWithOverrides, and sideBarWithOverrides methods that merge custom navigation options with the design system defaults, providing a cleaner API than manually spreading options.

Changed​

  • Navigation and layout components no longer use getContainerProps internally: MultinaireSideBar, MultinaireStackHeader, MultinaireTabBar, MultinaireTabHeader, PageView, and Pagination now accept a style?: ContainerStyleProps prop for direct styling control instead of relying on getContainerProps internally. getContainerProps is still available in useMultinaireResponsiveDesign for custom layouts.
  • Navigation component style prop type: All navigation components (MultinaireSideBar, MultinaireStackHeader, MultinaireTabBar, MultinaireTabHeader) use ContainerStyleProps for the style prop, aligning with the rest of the component library.
  • Removed format script: The standalone npm run format script has been removed. npm run lint already runs Prettier through ESLint's prettier/prettier rule, so a separate format command was redundant and caused conflicts.

Fixed​

  • Lint and format no longer conflict: The format script was resolving to jest-snapshot-prettier (Prettier 2.8.8) instead of the project's Prettier 3.8.1, causing ternary indentation conflicts. Fixed by removing the separate format script and ensuring ESLint's prettier/prettier rule explicitly uses the .prettierrc.js config.

[0.2.4] - 2026-03-17​

Added​

  • Badge component: New MultinaireBadge component with six color variants (primary, secondary, surface, success, warning, error), icon support, and optional press handling
  • Card backgroundColor prop: Set a background color from the theme palette
  • Card borderColor prop: Override the default backgroundVariant border color (ignored when selected is true)
  • Container border prop: Set border width in pixels
  • Container borderColor prop: Set border color from the theme palette
  • Text alignment prop: Set text alignment (replaces the deprecated center prop)
  • Text decoration prop: Set text decoration line (underline, line-through, etc.)
  • Button secondary, success, warning, error types: New color variants for MultinaireButton, MultinaireActionButton, and MultinaireIconButton
  • MenuButton value prop: Display a value string between the title and trailing icon (useful for showing current selections)
  • Text transform prop: Set text transform (uppercase, lowercase, capitalize). Equivalent to the textTransform style property.
  • Card badge prop: Accepts a MultinaireBadge element to overlay on the card.
  • Custom icon set expanded: Added CustomApple, CustomFacebook, CustomGithub, CustomGoogle, CustomInstagram, CustomLinkedIn, CustomPlan, and CustomX to MultinaireIcons. The previous standalone icon files (Github, Instagram, LinkedIn, X) have been replaced by the new Custom-prefixed variants.

Changed​

  • Text center prop deprecated: Use alignment="center" instead. The prop still works but will be removed in a future major version.
  • Button destructive type deprecated: Use type="error" instead. The type still works but will be removed in a future major version.
  • MenuButton type prop deprecated: The type prop ('default' | 'warning' | 'error') on MultinaireMenuButton is deprecated and will be removed in a future major version.

Fixed​

  • Card web ScrollView scroll freeze: Cards without an onPress handler now render as Animated.View instead of AnimatedTouchableOpacity, preventing pointer-event capture that was blocking scroll on web.

[0.2.3] - 2026-03-08​

Added​

  • New iconType prop in MultinaireSocialLoginButton
  • New onChangeSearch props in MultinaireListPicker

Fixed​

  • Fixed issue where clear icon is not tappable

[0.2.2] - 2026-03-07​

Added​

  • Switch component: New MultinaireSwitch toggle control for boolean selections with theme-aware styling
  • Icon system overhaul: Replaced built-in icon set with Iconsax (via iconsax-react-nativejs), giving access to 993 icons across 6 style types

[0.2.1] - 2026-02-08​

Added​

  • Avatar component: New Avatar component for displaying user profile images with fallback support
  • useMultinaireModal export: Exported useMultinaireModal hook for programmatic modal control

Changed​

  • StatusBar style based on color: StatusBar style now automatically adjusts based on the background color luminance
  • Common components reorganization: Improved organization and exports for common components

Fixed​

  • Linting and formatting improvements across the codebase

[0.2.0] - 2026-02-04​

Added​

  • Theme JSON Schema: Added theme.schema.json for IDE autocompletion and validation of theme configurations
  • ThemeValidationError: New error class with detailed error information for theme parsing failures
  • Safe theme parsing: Added Theme.safeToScheme() function that returns a result object instead of throwing
  • Responsive design types: Exported BreakpointName, Orientation, and ResponsiveDesign types
  • ESLint improvements: Enhanced linting rules for import ordering, consistent type imports, and unused variables
  • Documentation site: Added Docusaurus-based documentation with component guides, theme builder, and API reference
  • hideHeader option for Modal: New hideHeader prop to hide the modal header when needed
  • allowClear option for Input: New allowClear prop to show a clear button for input fields
  • banner type in Dialog: Added banner type to Dialog component for banner-style dialogs
  • loading state for Icon: Added loading state support for Icon component
  • boxShadow for FloatingActionButton: Added box shadow styling for FAB component
  • shadow support in theme: Added shadow configuration in theme variables

Changed​

  • BREAKING: useMultinaireResponsiveDesign hook redesigned:
    • Renamed DEVICE_WIDTH to width
    • Renamed DEVICE_HEIGHT to height
    • Renamed isLandscape to orientation (returns 'portrait' | 'landscape')
    • Renamed containerWrapper() to getContainerProps()
    • Renamed MAX_WIDTH to maxWidths.content
    • Renamed MODAL_MAX_WIDTH to maxWidths.modal
    • Removed BUTTOM_MAX_WITH (typo), now maxWidths.button
    • Added breakpoint property returning 'mobile' | 'tablet' | 'desktop'
    • Added useMemo for performance optimization
  • BREAKING: getMargingProps renamed to getMarginProps (typo fix)
  • Peer dependencies: Updated from "*" to proper semver ranges (e.g., ">=18.0.0")
  • Package exports: Added module, exports, and sideEffects: false for better bundler support
  • Theme schema: Added detailed descriptions for all color, text, and variable properties
  • System bars and header handling: Improved status bar and header management across platforms
  • Padding for TopTab and BottomTab: Adjusted padding for better visual consistency
  • Modal behaviour: Enhanced modal open/close behavior and animations

Removed​

  • Oxygen font: Removed Oxygen font family (DancingScript and OpenSans remain)

Fixed​

  • Fixed typo in helper function name: getMargingProps to getMarginProps
  • Fixed typo in responsive design hook: BUTTOM_MAX_WITH to maxWidths.button
  • Fixed inconsistent barrel export file extensions (.tsx to .ts for non-JSX files)
  • Fixed label rendering issues in form components
  • Fixed various Modal component issues
  • Fixed DateTimePicker component issues

[0.1.17] - 2025-01-15​

Changed​

  • Removed ts-node dependency
  • Updated dependencies and theme configuration

[0.1.16] - 2025-01-10​

Changed​

  • Minor changes and improvements

[0.1.15] - 2024-12-20​

Changed​

  • Updated to Expo SDK 54
  • Updated all dependencies to latest versions

[0.1.14] - 2024-12-15​

Fixed​

  • NPM package publishing fix

[0.1.13] - 2024-12-10​

Fixed​

  • Minor fixes and improvements

[0.1.12] - 2024-12-05​

Changed​

  • Various improvements to components

[0.1.11] - 2024-11-28​

Changed​

  • Web platform updates and improvements

[0.1.10] - 2024-11-20​

Added​

  • Initial public release
  • 40+ UI components organized in 6 categories:
    • Buttons: Button, IconButton, ActionButton, MenuButton, SocialLoginButton, TopTabButton, BottomTabButton, SideBarButton, FloatingActionButton
    • Common: Text, Icon, Card, Container, Image, Avatar, Gap, Divider, Loading, Message, Positioned
    • Inputs: Input, Checkbox, PickerButton, MediaPickerButton
    • Layouts: ScrollView, ListView, KeyboardAvoidingView, Page, PageView, TopTab, TabView, BottomTab, Pagination
    • Modals: Modal, ModalHeader, ListPicker, ListPickerItem, DateTimePicker, Dialog, Menu
    • Navigation: StackHeader, TabBar, TabHeader, SideBar
  • Theme system with light/dark mode support
  • Design tokens (colors, texts, variables)
  • 53 SVG icons
  • 2 font families (DancingScript, OpenSans)
  • i18n support with react-i18next
  • Responsive design utilities
  • Example app demonstrating all components