RocketChat · Rohit3523 · Jan 10, 2025 · Jan 10, 2025
diff --git a/.detoxrc.js b/.detoxrc.js
@@ -19,13 +19,13 @@ module.exports = {
 			type: 'ios.app',
 			binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/Rocket.Chat Experimental.app',
 			build:
-				'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Debug -destination \'generic/platform=iphonesimulator\' -derivedDataPath ios/build'
+				"xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Debug -destination 'generic/platform=iphonesimulator' -derivedDataPath ios/build"
 		},
 		'ios.release': {
 			type: 'ios.app',
 			binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/Rocket.Chat Experimental.app',
 			build:
-				'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Release -destination \'generic/platform=iphonesimulator\' -derivedDataPath ios/build'
+				"xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Release -destination 'generic/platform=iphonesimulator' -derivedDataPath ios/build"
 		},
 		'android.debug': {
 			type: 'android.apk',

diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
@@ -0,0 +1,56 @@
+name: Format Code with Prettier
+
+on:
+  push:
+    branches:
+      - '*'
+
+jobs:
+  format:
+    if: ${{ github.repository != 'RocketChat/Rocket.Chat.ReactNative' }} 
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'yarn'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-modules-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run Prettier
+        run: yarn prettier --write .
+
+      - name: Check for changes
+        id: check_changes
+        run: |
+          if git diff --quiet; then
+            echo "No code format changes detected"
+            echo "changes=false" >> $GITHUB_OUTPUT
+          else
+            echo "Code format changes detected"
+            echo "changes=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Commit and push changes
+        run: |
+          git config user.name "${{ github.actor }}"
+          git config user.email "${{ github.actor }}@users.noreply.github.com"
+          git add .
+          git commit -m "chore: format code with Prettier"
+          git push origin ${{ github.ref_name }}
diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -28,8 +28,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 			<Touch
 				onPress={hide}
 				style={[styles.button, { backgroundColor: colors.surfaceHover }]}
-				accessibilityLabel={I18n.t('Cancel')}
-			>
+				accessibilityLabel={I18n.t('Cancel')}>
 				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
 			</Touch>
 		) : null;

diff --git a/app/containers/Chip/index.tsx b/app/containers/Chip/index.tsx
@@ -57,8 +57,7 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
 			onPress={() => onPress?.()}
 			android_ripple={{
 				color: colors.surfaceNeutral
-			}}
-		>
+			}}>
 			<View style={styles.container}>
 				{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
 				<View style={styles.textContainer}>

diff --git a/app/containers/CollapsibleText/index.tsx b/app/containers/CollapsibleText/index.tsx
@@ -67,15 +67,13 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				} else {
 					setShowTruncated(false);
 				}
-			}}
-		>
+			}}>
 			{m}
 			{truncatedText ? (
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.fontHint }]}
-				>
+					style={[styles.textInfo, { color: colors.fontHint }]}>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}

diff --git a/app/containers/EmojiPicker/Footer.tsx b/app/containers/EmojiPicker/Footer.tsx
@@ -18,8 +18,7 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
 					styles.footerButtonsContainer,
 					{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
 				]}
-				testID='emoji-picker-search'
-			>
+				testID='emoji-picker-search'>
 				<CustomIcon size={24} name='search' />
 			</Pressable>
 
@@ -30,8 +29,7 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
 					styles.footerButtonsContainer,
 					{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
 				]}
-				testID='emoji-picker-backspace'
-			>
+				testID='emoji-picker-backspace'>
 				<CustomIcon size={24} name='backspace' />
 			</Pressable>
 		</View>

diff --git a/app/containers/InAppNotification/IncomingCallNotification/index.tsx b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
@@ -49,8 +49,7 @@ const IncomingCallHeader = React.memo(
 					{
 						marginTop: insets.top
 					}
-				]}
-			>
+				]}>
 				<CallHeader
 					title={i18n.t('Incoming_call_from')}
 					cam={cam}
@@ -69,8 +68,7 @@ const IncomingCallHeader = React.memo(
 							setAudio(!audio);
 							hideNotification();
 						}}
-						style={styles.closeButton}
-					>
+						style={styles.closeButton}>
 						<CustomIcon name='close' size={20} />
 					</Touchable>
 					<Touchable
@@ -80,8 +78,7 @@ const IncomingCallHeader = React.memo(
 							hideNotification();
 							dispatch(cancelCall({ callId }));
 						}}
-						style={styles.cancelButton}
-					>
+						style={styles.cancelButton}>
 						<Text style={styles.buttonText}>{i18n.t('decline')}</Text>
 					</Touchable>
 					<Touchable
@@ -91,8 +88,7 @@ const IncomingCallHeader = React.memo(
 							hideNotification();
 							dispatch(acceptCall({ callId }));
 						}}
-						style={styles.acceptButton}
-					>
+						style={styles.acceptButton}>
 						<Text style={styles.buttonText}>{i18n.t('accept')}</Text>
 					</Touchable>
 				</View>

diff --git a/app/containers/LoginServices/ButtonService.tsx b/app/containers/LoginServices/ButtonService.tsx
@@ -18,8 +18,7 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
 			activeOpacity={0.5}
 			underlayColor={colors.fontWhite}
 			accessible
-			accessibilityLabel={accessibilityLabel}
-		>
+			accessibilityLabel={accessibilityLabel}>
 			<View style={styles.serviceButtonContainer}>
 				{authType === 'oauth' || authType === 'apple' ? <CustomIcon name={icon} size={24} style={styles.serviceIcon} /> : null}
 				<Text style={[styles.serviceText, { color: colors.fontTitlesLabels }]}>{buttonText}</Text>

diff --git a/app/containers/MessageComposer/components/EmojiSearchbar.tsx b/app/containers/MessageComposer/components/EmojiSearchbar.tsx
@@ -64,8 +64,7 @@ export const EmojiSearchbar = (): React.ReactElement | null => {
 					style={({ pressed }: { pressed: boolean }) => [styles.backButton, { opacity: pressed ? 0.7 : 1 }]}
 					onPress={openEmojiKeyboard}
 					hitSlop={BUTTON_HIT_SLOP}
-					testID='openback-emoji-keyboard'
-				>
+					testID='openback-emoji-keyboard'>
 					<CustomIcon name='chevron-left' size={24} />
 				</Pressable>
 				<View style={styles.inputContainer}>

diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx
@@ -25,8 +25,7 @@ const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeBu
 			underlayColor={colors.buttonBackgroundSecondaryDefault}
 			rippleColor={colors.buttonBackgroundSecondaryPress}
 			enabled={!disabled}
-			onPress={press}
-		>
+			onPress={press}>
 			{icon ? (
 				<CustomIcon name={icon} size={36} />
 			) : (

diff --git a/app/containers/RoomItem/Actions.tsx b/app/containers/RoomItem/Actions.tsx
@@ -39,8 +39,7 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
 					{ width: width * 2, backgroundColor: colors.badgeBackgroundLevel2, right: '100%' },
 					viewHeight,
 					animatedStyles
-				]}
-			>
+				]}>
 				<View style={[styles.actionLeftButtonContainer, viewHeight]}>
 					<RectButton style={styles.actionButton} onPress={onToggleReadPress}>
 						<CustomIcon
@@ -123,8 +122,7 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					},
 					viewHeight,
 					animatedFavStyles
-				]}
-			>
+				]}>
 				<RectButton style={[styles.actionButton, { backgroundColor: colors.statusFontWarning }]} onPress={toggleFav}>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
@@ -143,12 +141,10 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					},
 					isCondensed && { height: ROW_HEIGHT_CONDENSED },
 					animatedHideStyles
-				]}
-			>
+				]}>
 				<RectButton
 					style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundSecondaryPress }]}
-					onPress={onHidePress}
-				>
+					onPress={onHidePress}>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name='unread-on-top-disabled'

diff --git a/app/containers/RoomItem/Touchable.tsx b/app/containers/RoomItem/Touchable.tsx
@@ -224,8 +224,7 @@ const Touchable = ({
 								testID={testID}
 								style={{
 									backgroundColor: isFocused ? colors.surfaceTint : colors.surfaceRoom
-								}}
-							>
+								}}>
 								{children}
 							</Touch>
 						</Animated.View>

diff --git a/app/containers/SearchBox/index.tsx b/app/containers/SearchBox/index.tsx
@@ -23,7 +23,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): J
 	}, []);
 
 	return (
-		<View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }} >
+		<View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
 			<FormTextInput
 				autoCapitalize='none'
 				autoCorrect={false}

diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
@@ -72,8 +72,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 					<Text
 						testID={`thread-count-${count}`}
 						style={[styles.detailText, { color: themes[theme].fontSecondaryInfo }]}
-						numberOfLines={1}
-					>
+						numberOfLines={1}>
 						{count}
 					</Text>
 				</View>

diff --git a/app/containers/Toast.tsx b/app/containers/Toast.tsx
@@ -46,7 +46,7 @@ const Toast = (): React.ReactElement => {
 			ref={getToastRef}
 			position='center'
 			style={[styles.toast, { backgroundColor: colors.surfaceDark }]}
-			textStyle={[styles.text, { color: theme === "light" ? colors.fontWhite : colors.fontPureBlack }]}
+			textStyle={[styles.text, { color: theme === 'light' ? colors.fontWhite : colors.fontPureBlack }]}
 			opacity={0.9}
 		/>
 	);

diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
@@ -65,11 +65,12 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 			<Touchable
 				onPress={() => onShow(!show)}
 				style={{ backgroundColor: themes[theme].surfaceRoom }}
-				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
-			>
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}>
 				<View
-					style={[styles.input, { borderColor: error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].strokeLight }]}
-				>
+					style={[
+						styles.input,
+						{ borderColor: error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].strokeLight }
+					]}>
 					<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
 						{currentDate.toLocaleDateString(language)}
 					</Text>

diff --git a/app/containers/UIKit/MultiSelect/Chips.tsx b/app/containers/UIKit/MultiSelect/Chips.tsx
@@ -31,8 +31,7 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 			onPress={() => onSelect(item)}
 			style={[styles.chip, { backgroundColor: colors.surfaceHover }, style]}
 			background={Touchable.Ripple(colors.surfaceNeutral)}
-			testID={`multi-select-chip-${item.value}`}
-		>
+			testID={`multi-select-chip-${item.value}`}>
 			<>
 				{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
 				<Text numberOfLines={1} style={[styles.chipText, { color: colors.fontTitlesLabels }]}>

diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -24,8 +24,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 			onPress={onPress}
 			style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
 			background={Touchable.Ripple(colors.surfaceNeutral)}
-			disabled={disabled}
-		>
+			disabled={disabled}>
 			<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeLight }, innerInputStyle]}>
 				{placeholder ? <Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</Text> : children}
 				{loading ? (

diff --git a/app/containers/UIKit/Overflow.tsx b/app/containers/UIKit/Overflow.tsx
@@ -30,8 +30,7 @@ const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOpti
 	<Touchable
 		onPress={() => onOptionPress({ value })}
 		background={Touchable.Ripple(themes[theme].surfaceNeutral)}
-		style={styles.option}
-	>
+		style={styles.option}>
 		<Text>{parser.text(text)}</Text>
 	</Touchable>
 );
@@ -65,8 +64,7 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
-				style={styles.menu}
-			>
+				style={styles.menu}>
 				{!loading ? (
 					<CustomIcon size={18} name='kebab' color={themes[theme].fontDefault} />
 				) : (
@@ -78,8 +76,7 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 				// fromView exists in Popover Component
 				/* @ts-ignore*/
 				fromView={touchable[blockId]}
-				onRequestClose={() => onShow(false)}
-			>
+				onRequestClose={() => onShow(false)}>
 				<Options options={options} onOptionPress={onOptionPress} parser={parser} theme={theme} />
 			</Popover>
 		</>

diff --git a/app/containers/UIKit/UiKitMessage.stories.tsx b/app/containers/UIKit/UiKitMessage.stories.tsx
@@ -41,8 +41,7 @@ export default {
 						onDiscussionPress: () => {},
 						onReactionLongPress: () => {},
 						threadBadgeColor: themes.light.fontInfo
-					}}
-				>
+					}}>
 					<Story />
 				</MessageContext.Provider>
 			</ScrollView>

diff --git a/app/containers/UIKit/UiKitModal.stories.tsx b/app/containers/UIKit/UiKitModal.stories.tsx
@@ -43,8 +43,7 @@ export default {
 						onDiscussionPress: () => {},
 						onReactionLongPress: () => {},
 						threadBadgeColor: themes.light.fontInfo
-					}}
-				>
+					}}>
 					<Story />
 				</MessageContext.Provider>
 			</ScrollView>

diff --git a/app/containers/markdown/Table.tsx b/app/containers/markdown/Table.tsx
@@ -55,8 +55,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
 				style={[
 					styles.containerTable,
 					{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].strokeLight }
-				]}
-			>
+				]}>
 				{renderRows(false)}
 			</ScrollView>
 			<Text style={[styles.textInfo, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Full_table')}</Text>

diff --git a/app/containers/message/CallButton.tsx b/app/containers/message/CallButton.tsx
@@ -18,8 +18,7 @@ const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
 				onPress={handleEnterCall}
 				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 				style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
-				hitSlop={BUTTON_HIT_SLOP}
-			>
+				hitSlop={BUTTON_HIT_SLOP}>
 				<>
 					<CustomIcon name='camera' size={16} style={styles.buttonIcon} color={themes[theme].fontWhite} />
 					<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Click_to_join')}</Text>

diff --git a/app/containers/message/Content.tsx b/app/containers/message/Content.tsx
@@ -45,8 +45,7 @@ const Content = React.memo(
 			content = (
 				<Text
 					style={[styles.textInfo, { color: themes[theme].fontSecondaryInfo }]}
-					accessibilityLabel={I18n.t('Encrypted_message')}
-				>
+					accessibilityLabel={I18n.t('Encrypted_message')}>
 					{I18n.t('Encrypted_message')}
 				</Text>
 			);