feat: use the headerTitle in the Header/components folder for RoomHeader
#6805
Conversation
WalkthroughAdds Android-specific minHeight to HeaderContainer, introduces an optional Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
app/containers/Header/components/HeaderTitle/index.tsx (1)
10-10: Make the default position explicit.The
positionprop is optional but has no explicit default value. Whenundefined, the code implicitly treats it as'center'(sinceposition === 'left'evaluates tofalse). For clarity and maintainability, consider providing an explicit default.Apply this diff:
interface IHeaderTitle { headerTitle?: string | ((props: { children: string; tintColor?: string }) => ReactNode); - position?: 'left' | 'center' | 'right'; + position?: 'left' | 'center' | 'right'; } type HeaderTitleProps = IHeaderTitle & TextProps; -const HeaderTitle = memo(({ headerTitle, position, ...props }: HeaderTitleProps) => { +const HeaderTitle = memo(({ headerTitle, position = 'center', ...props }: HeaderTitleProps) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
app/containers/Header/components/HeaderContainer/index.tsx(3 hunks)app/containers/Header/components/HeaderTitle/index.tsx(3 hunks)app/containers/Header/components/HeaderTitle/styles.ts(1 hunks)app/containers/RoomHeader/RoomHeader.tsx(3 hunks)
🔇 Additional comments (4)
app/containers/Header/components/HeaderTitle/styles.ts (1)
17-21: LGTM: Android title style cleanup.The removal of
lineHeightandpaddingVerticalwhile retainingflex: 1is appropriate for the Android title style, allowing the Text to fill available space in its container.app/containers/Header/components/HeaderContainer/index.tsx (1)
20-20: LGTM: Platform-appropriate header heights.The conditional minHeight (56 for Android, 44 for iOS) aligns with Material Design and iOS Human Interface Guidelines for header/app bar heights.
Also applies to: 31-31
app/containers/Header/components/HeaderTitle/index.tsx (1)
13-14: LGTM: Props spreading enhances flexibility.Combining
IHeaderTitlewithTextPropsand spreading additional props to the underlyingTextcomponents is a good enhancement. This allows consumers to pass through standardTextproperties liketestID,accessibilityLabel, etc.Also applies to: 32-32, 46-46
app/containers/RoomHeader/RoomHeader.tsx (1)
3-3: Remove reference to non-existentPlatformPressablecomponent.
PlatformPressabledoes not exist in the codebase. Your current usage ofPressablefromreact-native-gesture-handler(line 172) is straightforward—it only uses basic props (onPress,disabled,hitSlop) without complex gesture handling. Throughout the codebase, the standardPressablefromreact-nativeis used for simple interactions (e.g., UserItem.tsx, EmojiSearchbar.tsx, Chip/index.tsx), whilereact-native-gesture-handler's components are reserved for gesture-heavy interactions (BorderlessButton, RectButton). Consider switching to standardreact-nativePressable for consistency with the existing pattern.Likely an incorrect or invalid review comment.
| color: colors.fontTitlesLabels | ||
| }}> | ||
| color: colors.fontTitlesLabels, | ||
| alignSelf: position === 'left' ? 'flex-start' : 'center' |
There was a problem hiding this comment.
Handle all position values explicitly.
The current implementation only distinguishes between 'left' and everything else (defaulting to 'center'). The 'right' position value is accepted by the type but would incorrectly render as centered. Consider implementing all three position values explicitly.
Apply this diff to handle all position values:
...styles.androidTitle,
color: colors.fontTitlesLabels,
- alignSelf: position === 'left' ? 'flex-start' : 'center'
+ alignSelf: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center'
}}And similarly for the non-Android branch:
...styles.title,
color: colors.fontTitlesLabels,
- alignSelf: position === 'left' ? 'flex-start' : 'center'
+ alignSelf: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center'
}}Also applies to: 44-44
🤖 Prompt for AI Agents
In app/containers/Header/components/HeaderTitle/index.tsx around lines 30 and
44, the style sets alignSelf using a binary check (position === 'left' ?
'flex-start' : 'center') which misrenders position='right'; update both the
Android and non-Android branches to handle all three explicit values ('left' ->
'flex-start', 'center' -> 'center', 'right' -> 'flex-end') (use a switch or
explicit conditional chain) so each position maps to the correct alignSelf.
| justifyContent: 'center', | ||
| alignItems: 'center' |
There was a problem hiding this comment.
Remove ineffective style properties.
justifyContent and alignItems are flex container properties and have no effect on Text components. Text elements are not flex containers unless you explicitly set display: 'flex', which is uncommon in React Native.
Apply this diff to remove the ineffective properties:
title: {
...sharedStyles.textBold,
fontSize: 16,
- justifyContent: 'center',
- alignItems: 'center'
},🤖 Prompt for AI Agents
In app/containers/Header/components/HeaderTitle/styles.ts around lines 14 to 15,
the style object for the Text component includes flex container properties
justifyContent and alignItems which have no effect on Text; remove those two
properties from the styles so the Text style only contains relevant text/layout
properties (e.g., keep textAlign or padding if needed) to clean up dead code.
divyanshu-patil
changed the title
headerTitle in the Header/components folder RoomHeader
divyanshu-patil
changed the title
headerTitle in the Header/components folder RoomHeaderheaderTitle in the Header/components folder for RoomHeader
divyanshu-patil
changed the title
headerTitle in the Header/components folder for RoomHeaderheaderTitle in the Header/components folder for RoomHeader
…eactNative into fix/headerTitle
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @app/containers/RoomHeader/RoomHeader.tsx:
- Line 188: HeaderTitle is currently forced to position='left', breaking the
stated platform behavior; change the prop to set position conditionally (e.g.,
position={Platform.OS === 'android' ? 'left' : 'center'} or use your existing
isIos/isAndroid helper) and import Platform from 'react-native' if not already
imported, keeping headerTitle={title ?? ''} and testID={testID} intact.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
app/containers/RoomHeader/RoomHeader.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-17T15:56:22.578Z
Learnt from: OtavioStasiak
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6499
File: app/containers/ServerItem/index.tsx:34-36
Timestamp: 2025-12-17T15:56:22.578Z
Learning: In the Rocket.Chat React Native codebase, for radio button components on iOS, include the selection state ("Selected"/"Unselected") in the accessibilityLabel instead of using accessibilityState={{ checked: hasCheck }}, because iOS VoiceOver has known issues with accessibilityRole="radio" + accessibilityState that prevent correct state announcement.
Applied to files:
app/containers/RoomHeader/RoomHeader.tsx
🔇 Additional comments (2)
app/containers/RoomHeader/RoomHeader.tsx (2)
5-5: No action needed. The import statement at line 5 is correct—HeaderTitleis exported as a default export and is properly imported using the default import syntax.
3-3: No changes needed —Pressablefromreact-native-gesture-handleris the correct choice.
PlatformPressabledoes not exist in this codebase, so there is no alternative to choose between. The currentPressableusage at lines 175-191 is appropriate with the correct props (testID,onPress,disabled,hitSlop).Likely an incorrect or invalid review comment.
| /> | ||
| )} | ||
| <HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} testID={testID} /> | ||
| <HeaderTitle headerTitle={title ?? ''} testID={testID} position='left' /> |
There was a problem hiding this comment.
Hard-coded position='left' contradicts platform-specific requirement.
The PR description states "On Android the headerTitle is left-aligned; on iOS it is centered," but the position prop is hard-coded to 'left'. This means the title will be left-aligned on both platforms.
📱 Proposed fix for platform-specific alignment
+import { Platform } from 'react-native';
+
// ... inside the component
- <HeaderTitle headerTitle={title ?? ''} testID={testID} position='left' />
+ <HeaderTitle headerTitle={title ?? ''} testID={testID} position={Platform.OS === 'ios' ? 'center' : 'left'} />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <HeaderTitle headerTitle={title ?? ''} testID={testID} position='left' /> | |
| import { Platform } from 'react-native'; | |
| // ... rest of imports and component code ... | |
| <HeaderTitle headerTitle={title ?? ''} testID={testID} position={Platform.OS === 'ios' ? 'center' : 'left'} /> |
🤖 Prompt for AI Agents
In @app/containers/RoomHeader/RoomHeader.tsx at line 188, HeaderTitle is
currently forced to position='left', breaking the stated platform behavior;
change the prop to set position conditionally (e.g., position={Platform.OS ===
'android' ? 'left' : 'center'} or use your existing isIos/isAndroid helper) and
import Platform from 'react-native' if not already imported, keeping
headerTitle={title ?? ''} and testID={testID} intact.
1 participant
Proposed changes
changes made
RoomHeaderis now using the custom sharedheaderTitletouchableOpacityis now replaced with the PressableheaderTitlehave been modified to avoid clipping of textheaderTitleis aligned left while centered in IOShelp i neededis usingPlatformPressablecausing some tests to fail, so i used thePressablewhich works fine with the header. help me in review for should i strictly usePlatformPressableinstead ofPressableIssue(s)
added feature suggested in: #6255
How to test or reproduce
Screenshots
RoomHeader on Android and IOS with headerTitle from app/containers/Header/components/HeaderTitle/index.tsx
header.title.demo.2.mp4
Types of changes
Checklist
Further comments
onPress()but by looking at the code i think its already implemented, if that mean something else functionality should be implemented as the onPress then add review over thisSummary by CodeRabbit
Improvements
Style
✏️ Tip: You can customize this high-level summary in your review settings.