Olo SegmentedControl fix: pin legacy variant after DS default change in punchh-components

README.md

Olo SegmentedControl fix after DS default variant change

Context

In @punchh/react-native-punchh-components, SegmentedControl default variant changed from default (legacy) → designSystem (Figma Q2-26 track + inset pill).

Commit: 5828d7c5f — variant: SEGMENTED_CONTROL_VARIANT.DESIGN_SYSTEM

Is SegmentedControl used in Olo?

Yes — 2 call sites in @punchh/react-native-punchh-olo:

File	Usage
src/UI/RecentOrder/RecentOrderScene.js	Fav / Recent Orders header toggle
src/UI/Menu/LocationBar.js	Hours of Operation type segments

TipView.js uses ButtonGroup with segmentControlStyleProps — not SegmentedControl. No change needed there.

Menu framework: no SegmentedControl usage.

What breaks

1. LocationBar styles assume legacy connected tabs (SEGMENT_CONTROL_* borders, capitalized xSmall text). DS variant ignores ComponentStyles.SegmentedControl theme overrides and applies track/pill chrome (SEGMENT_CONTROL_DS_*), so HOO segments look wrong / double-styled.
2. RecentOrderScene only sets width: 240 and relied on legacy default look; it silently flips to DS pills in the header.

Fix

Pin both Olo call sites to the legacy variant until Olo is intentionally migrated to DS:

variant={SegmentedControl.SEGMENTED_CONTROL_VARIANT.DEFAULT}

Apply the two patches below in the olo-framework-reactnative repo (branch used by the app, e.g. new-arch), then bump the git ref / reinstall — do not patch via patch-package.

Optional later (DS migration)

• Drop LocationBar’s legacy segmentControlStyle tab border overrides (or restyle for DS tokens).
• Let RecentOrderScene inherit DS (remove width hack if track stretches correctly in Header).

LocationBar-renderHOO-snippet.js

/**
 * Copyright (c) 2017-Present, Punchh, Inc.
 * All rights reserved.
 *
 * Snippet only — apply inside LocationBar.renderHOO SegmentedControl JSX.
 * Repo: punchh/olo-framework-reactnative
 */
<SegmentedControl
	onTabPress={this.updateIndex}
	values={segmentContent}
	style={{ ...segmentControlStyle.style, ...segmentContainerDynamicStyle }}
	tabStyle={segmentControlStyle.tabStyle}
	activeTabStyle={segmentControlStyle.activeTabStyle}
	tabTextStyle={segmentControlStyle.tabTextStyle}
	activeTabTextStyle={segmentControlStyle.activeTabTextStyle}
	minimizeMultiplier={true}
	numberOfLines={1}
	selectedIndex={this.state.selectedIndex}
	variant={SegmentedControl.SEGMENTED_CONTROL_VARIANT.DEFAULT}
/>

LocationBar.js.patch.md

File: src/UI/Menu/LocationBar.js

Change in renderHOO

 							<SegmentedControl
 								onTabPress={this.updateIndex}
 								values={segmentContent}
 								style={{ ...segmentControlStyle.style, ...segmentContainerDynamicStyle }}
 								tabStyle={segmentControlStyle.tabStyle}
 								activeTabStyle={segmentControlStyle.activeTabStyle}
 								tabTextStyle={segmentControlStyle.tabTextStyle}
 								activeTabTextStyle={segmentControlStyle.activeTabTextStyle}
 								minimizeMultiplier={true}
 								numberOfLines={1}
 								selectedIndex={this.state.selectedIndex}
+								variant={SegmentedControl.SEGMENTED_CONTROL_VARIANT.DEFAULT}
 							/>

SegmentedControl is already imported from react-native-punchh-components.

RecentOrderScene-renderHeader-snippet.js

/**
 * Copyright (c) 2017-Present, Punchh, Inc.
 * All rights reserved.
 *
 * Snippet only — apply inside RecentOrderScene.renderHeader SegmentedControl JSX.
 * Repo: punchh/olo-framework-reactnative
 */
<SegmentedControl
	values={this.segmentValues()}
	onTabPress={this.toogleBtnTapped}
	style={styles.segmentControlStyle}
	variant={SegmentedControl.SEGMENTED_CONTROL_VARIANT.DEFAULT}
/>

RecentOrderScene.js.patch.md

File: src/UI/RecentOrder/RecentOrderScene.js

Change in renderHeader

 				<SegmentedControl
 					values={this.segmentValues()}
 					onTabPress={this.toogleBtnTapped}
 					style={styles.segmentControlStyle}
+					variant={SegmentedControl.SEGMENTED_CONTROL_VARIANT.DEFAULT}
 				/>

SegmentedControl is already imported from react-native-punchh-components.