Migration Guide

Migrating to 0.2.7 (from 0.2.6)

`SideBarButton` — fallback colors removed

MultinaireSideBarButton no longer applies built-in fallback colors when style is not provided. If you use MultinaireSideBarButton directly (outside of MultinaireSideBar), pass an explicit style prop:

// Before — fallbacks were applied automatically
<MultinaireSideBarButton focused={focused} title="Home" icon={icon} onPress={onPress} />

// After — pass explicit colors
<MultinaireSideBarButton
  focused={focused}
  title="Home"
  icon={icon}
  style={{
    activeBackgroundColor: 'backgroundVariant',
    activeColor: 'primary',
    inactiveColor: 'neutral',
  }}
  onPress={onPress}
/>

If you use MultinaireSideBar, nothing changes — defaults are still applied automatically.

`getContainerProps` — no longer returns `overflow: hidden`

On non-mobile, getContainerProps previously included style: { maxWidth: ..., overflow: 'hidden' } in its return value. The overflow: 'hidden' is no longer added automatically. If your layout relied on this clipping behaviour, add it manually:

// Before — overflow was hidden automatically
<MultinaireContainer {...getContainerProps({})}>
  {/* content was clipped */}
</MultinaireContainer>

// After — add overflow manually if needed
<MultinaireContainer {...getContainerProps({})} style={{ overflow: 'hidden' }}>
  {/* content is clipped */}
</MultinaireContainer>

Migrating to 0.2.6 (from 0.2.5)

`PageView` — `style` renamed to `paginationStyle`

The style prop on MultinairePageView has been renamed to paginationStyle to clarify that it targets the pagination bar, not the page content area.

// Before
<MultinairePageView style={{ backgroundColor: 'base' }} ... />

// After
<MultinairePageView paginationStyle={{ backgroundColor: 'base' }} ... />

`getContainerProps` signature change

useMultinaireResponsiveDesign().getContainerProps now accepts an overrides: Partial<ContainerProps> object instead of a withMargin?: boolean flag. Pass {} if you had no argument, or move your overrides into the object.

// Before
const props = getContainerProps(true);  // true = add margin

// After
const props = getContainerProps({ margin: variables.padding.medium });

On mobile the function still returns {} regardless of the overrides argument.

Migrating to 0.2.5 (from 0.2.4)

No breaking changes.

`format` script removed

The standalone npm run format command has been removed. npm run lint already runs Prettier through ESLint, so a separate format command is unnecessary. Replace any npm run format usage with npm run lint.

`useScreenOptions` override methods

New *WithOverrides methods provide a cleaner way to customize navigation options without manual spreading:

const { stackWithOverrides, bottomTabWithOverrides } = useScreenOptions();

// Before
<Stack screenOptions={{ ...screenOptions.stack, headerShown: false }}>

// After
<Stack screenOptions={stackWithOverrides({ headerShown: false })}>

Available methods: stackWithOverrides, topTabWithOverrides, bottomTabWithOverrides, sideBarWithOverrides.

Navigation and layout components `style` prop

Internal components (MultinaireSideBar, MultinaireStackHeader, MultinaireTabBar, MultinaireTabHeader, PageView, Pagination) no longer use getContainerProps internally. Instead, they now accept a style?: ContainerStyleProps prop for direct styling control. getContainerProps is still available in useMultinaireResponsiveDesign for your own custom layouts.

ContainerStyleProps includes borderRadius, backgroundColor, border, borderColor, and a nested style for raw ViewStyle, so existing ViewStyle usage remains compatible.

// Use the style prop for responsive customization
<MultinaireSideBar style={{ backgroundColor: 'base', borderRadius: 8 }} />
<MultinaireStackHeader style={{ padding: 16 }} />

Migrating to 0.2.4 (from 0.2.3)

No breaking changes. The following props are deprecated and will be removed in a future major version.

`Text` — `center` prop replaced by `alignment`

// Before
<MultinaireText center>Centered text</MultinaireText>

// After
<MultinaireText alignment="center">Centered text</MultinaireText>

The center prop still works, but TypeScript will show a @deprecated warning.

`Button` / `ActionButton` / `IconButton` — `destructive` type replaced by `error`

// Before
<MultinaireButton type="destructive" title="Delete" />
<MultinaireActionButton type="destructive" icon="Trash" title="Delete" />
<MultinaireIconButton type="destructive" icon="Trash" />

// After
<MultinaireButton type="error" title="Delete" />
<MultinaireActionButton type="error" icon="Trash" title="Delete" />
<MultinaireIconButton type="error" icon="Trash" />

The destructive type still works and maps to the same error color, but TypeScript will show a @deprecated warning.

Migrating to 0.2.2 (from 0.2.1)

New `MultinaireSwitch` component

A MultinaireSwitch toggle control is now available in the inputs category. No breaking changes — simply import and use it:

import { MultinaireSwitch } from '@multinaire/multinaire-design';

<MultinaireSwitch value={isEnabled} onChange={setIsEnabled} />

See the Switch docs for full API details.

Icon system overhaul

The built-in icon set has been replaced with Iconsax (via iconsax-react-nativejs), giving access to 993 icons across 6 style types instead of 53 fixed icons.

Only the 7 custom icons are kept. All other icons were removed because Iconsax covers them with more style types and better quality.

New `type` prop

// Before — filled icons were separate icon names
<MultinaireIcon icon="CheckFilled" />
<MultinaireIcon icon="GlobalFilled" />
<MultinaireIcon icon="MailFilled" />

// After — use type="Bold" for the filled/solid style
<MultinaireIcon icon="TickCircle" type="Bold" />
<MultinaireIcon icon="Global" type="Bold" />
<MultinaireIcon icon="Sms" type="Bold" />

Removed icons → Iconsax replacements

The following icons were removed. Replace them with the suggested Iconsax equivalent (browse all options at iconsax.io):

Removed icon	Suggested replacement	Notes
`Calendar`	`Calendar`	Same name
`Check`	`Check`	Same name
`CheckFilled`	`TickCircle` type `"Bold"`
`Close`	`CloseCircle`
`Delete`	`Trash`
`Document`	`Document`	Same name
`DoubleDocs`	`Copy`
`DownArrow`	`ArrowDown2`
`Download`	`DocumentDownload`
`Edit`	`Edit2`
`Export`	`Export`	Same name
`External`	`ExportSquare`
`EyeOpen`	`Eye`
`Gallery`	`Gallery`	Same name
`Global`	`Global`	Same name
`GlobalFilled`	`Global` type `"Bold"`
`Home`	`Home2`
`Import`	`Import`	Same name
`Language`	`Language`	Same name
`LeftArrow`	`ArrowLeft2`
`Like`	`Like1`
`LikeDislike`	`LikeDislike`	Same name
`Link`	`Link1`
`Lock`	`Lock`	Same name
`Mail`	`Sms`
`MailFilled`	`Sms` type `"Bold"`
`Menu`	`HamburgerMenu`
`MessageQuestion`	`MessageQuestion`	Same name
`Mobile`	`Mobile`	Same name
`Moon`	`Moon`	Same name
`More`	`More`	Same name
`PersonalCard`	`PersonalCard`	Same name
`Phone`	`Call`
`PhoneFilled`	`Call` type `"Bold"`
`Plus`	`Add`
`Print`	`Printer`
`RightArrow`	`ArrowRight2`
`Search`	`SearchNormal1`
`Security`	`Security`	Same name
`Select`	`TickCircle`
`SelectFilled`	`TickCircle` type `"Bold"`
`Setting`	`Setting2`
`Share`	`Share`	Same name
`Sun`	`Sun1`
`UpArrow`	`ArrowUp2`
`User`	`User`	Same name

Migration example

// Before
<MultinaireIcon icon="Home" color="primary" />
<MultinaireIcon icon="Search" />
<MultinaireIcon icon="CheckFilled" color="success" />
<MultinaireIcon icon="LeftArrow" />
<MultinaireIcon icon="Setting" />

// After
<MultinaireIcon icon="Home2" color="primary" />
<MultinaireIcon icon="SearchNormal1" />
<MultinaireIcon icon="TickCircle" type="Bold" color="success" />
<MultinaireIcon icon="ArrowLeft2" />
<MultinaireIcon icon="Setting2" />

Migrating to 0.2.0 (from 0.1.x)

1. Update `useMultinaireResponsiveDesign` usage

// Before
const { DEVICE_WIDTH, DEVICE_HEIGHT, containerWrapper, MODAL_MAX_WIDTH } =
  useMultinaireResponsiveDesign();

// After
const { width, height, getContainerProps, maxWidths } =
  useMultinaireResponsiveDesign();
// Use maxWidths.modal instead of MODAL_MAX_WIDTH
// Use maxWidths.content instead of MAX_WIDTH

2. Update `getMarginProps` imports

// Before
import { getMargingProps } from '@multinaire/multinaire-design';

// After
import { getMarginProps } from '@multinaire/multinaire-design';

3. Remove Oxygen font references

If you were using the Oxygen font family, switch to OpenSans or DancingScript.

4. Review visual changes

The following changes may affect existing layouts:

TopTab and BottomTab padding: Padding has been adjusted for better visual consistency. Review your tab layouts to ensure they still look correct.
Modal behaviour: Modal open/close animations have been enhanced. Test your modals to verify the new behavior works with your use case.
System bars and headers: Improved status bar and header management may affect apps with custom header implementations.

Migrating to 0.2.7 (from 0.2.6)​

SideBarButton — fallback colors removed​

getContainerProps — no longer returns overflow: hidden​

Migrating to 0.2.6 (from 0.2.5)​

PageView — style renamed to paginationStyle​

getContainerProps signature change​

Migrating to 0.2.5 (from 0.2.4)​

format script removed​

useScreenOptions override methods​

Navigation and layout components style prop​

Migrating to 0.2.4 (from 0.2.3)​

Text — center prop replaced by alignment​

Button / ActionButton / IconButton — destructive type replaced by error​

Migrating to 0.2.2 (from 0.2.1)​

New MultinaireSwitch component​

Icon system overhaul​

New type prop​

Removed icons → Iconsax replacements​

Migration example​

Migrating to 0.2.0 (from 0.1.x)​

1. Update useMultinaireResponsiveDesign usage​

2. Update getMarginProps imports​

3. Remove Oxygen font references​

4. Review visual changes​