Details

Reviewers

tomek
will

Commits

rCOMMa80d7f215c6d: [native] Create custom top tabs component

Summary

issue: ENG-8541
We need this to be able to display the button for the muted tab tip.
For now this results in some changes to the style: the indicator doesn't smoothly move from one tab to the second, and there is some on press feedback that wasn't present before. I'll address those changes in ENG-9041

Test Plan

Please see the videos:

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

inka created this revision.Aug 14 2024, 6:53 AM

Herald added a subscriber: ashoat. · View Herald TranscriptAug 14 2024, 6:53 AM

inka edited the summary of this revision. (Show Details)Aug 14 2024, 6:54 AM

inka edited the test plan for this revision. (Show Details)

inka attached a referenced file: F2471608: Simulator Screen Recording - iPhone 15 Pro - 2024-08-14 at 15.53.59.mp4. (Show Details)

inka attached a referenced file: F2471607: Simulator Screen Recording - iPhone 15 Pro - 2024-08-14 at 15.53.43.mp4. (Show Details)

inka added inline comments.Aug 14 2024, 7:01 AM

native/chat/chat-tab-bar-button.react.js
117–127 ↗	(On Diff #43385)	Based on source code
native/chat/chat-tab-bar.react.js
39–57 ↗	(On Diff #43385)	I will address the flow issues in https://linear.app/comm/issue/ENG-9039/investigate-flow-errors Code based on the source code of MaterialTopTabBar

Add home

inka added a parent revision: D13081: [native] Extract community drawer button for nux tips, create community drawer tip.Aug 14 2024, 7:03 AM

inka added a child revision: D13084: [native] Create muted tab tip.Aug 14 2024, 7:06 AM

Harbormaster failed remote builds in B31099: Diff 43385!Aug 14 2024, 7:06 AM

inka added inline comments.Aug 14 2024, 7:08 AM

native/components/nux-tips-context.react.js
12 ↗	(On Diff #43387)	The home tab tip wasn't in the initial scope, but was mentioned in a comment here. We will probably want to add it

Harbormaster returned this revision to the author for changes because remote builds failed.Aug 14 2024, 7:20 AM

Harbormaster failed remote builds in B31101: Diff 43387!

Harbormaster completed remote builds in B31101: Diff 43387.Aug 14 2024, 9:45 AM

inka requested review of this revision.Aug 14 2024, 9:45 AM

Looks ok, but based on this comment https://linear.app/comm/issue/ENG-9041/update-tabs-style#comment-ce51487d I'm wondering if we can use TabBarItem from react-native-tab-view.

native/chat/chat-tab-bar-button.react.js
97 ↗	(On Diff #43387)	Can we use something from our color palette?

This revision now requires changes to proceed.Aug 14 2024, 9:55 AM

Use components from react-native-tab-view

inka added a parent revision: D13175: [native] Add renderTabBarItem to MaterialTopTabBarProps.Tue, Aug 27, 5:56 AM

inka mentioned this in D13084: [native] Create muted tab tip.Tue, Aug 27, 6:02 AM

Harbormaster completed remote builds in B31286: Diff 43678.Tue, Aug 27, 6:13 AM

tomek accepted this revision.Tue, Aug 27, 7:10 AM

tomek added inline comments.

native/chat/chat-tab-bar.react.js
42–48 ↗	(On Diff #43678)	Can we use something from `innerProps.route` as a key of `ButtonTitleToTip`? That would make it less fragile.
native/chat/chat.react.js
124–125 ↗	(On Diff #43678)
125 ↗	(On Diff #43678)	I guess we can use `React.Node` here
545 ↗	(On Diff #43678)	Exporting values next to a default export usually causes some hot reloading issues. Could you move these values somewhere else?