[No QA] Bump eslint-config-expensify version (boolean-conditional-rendering rule)

.eslintrc.js

@@ -294,6 +294,7 @@ module.exports = {
             files: ['*.ts', '*.tsx'],
             rules: {
                 'rulesdir/prefer-at': 'error',
+                'rulesdir/boolean-conditional-rendering': 'error',
             },
         },
     ],

.github/PULL_REQUEST_TEMPLATE.md

@@ -79,7 +79,6 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
 - [ ] I followed proper code patterns (see [Reviewing the code](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md#reviewing-the-code))
     - [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. `toggleReport` and not `onIconClick`)
-    - [ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. `myBool && <MyComponent />`.
     - [ ] I verified that comments were added to code that is not self explanatory
     - [ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
     - [ ] I verified any copy / text shown in the product is localized by adding it to `src/languages/*` files and using the [translation method](https://github.com/Expensify/App/blob/4bd99402cebdf4d7394e0d1f260879ea238197eb/src/components/withLocalize.js#L60)

contributingGuides/REVIEWER_CHECKLIST.md

@@ -19,7 +19,6 @@
 - [ ] If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
 - [ ] I verified proper code patterns were followed (see [Reviewing the code](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md#reviewing-the-code))
     - [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. `toggleReport` and not `onIconClick`).
-    - [ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. `myBool && <MyComponent />`.
     - [ ] I verified that comments were added to code that is not self explanatory
     - [ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
     - [ ] I verified any copy / text shown in the product is localized by adding it to `src/languages/*` files and using the [translation method](https://github.com/Expensify/App/blob/4bd99402cebdf4d7394e0d1f260879ea238197eb/src/components/withLocalize.js#L60)

package.json

@@ -276,7 +276,7 @@
     "electron-builder": "25.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-expensify": "^2.0.66",
+    "eslint-config-expensify": "^2.0.73",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-jest": "^28.6.0",

src/components/AccountSwitcher.tsx

@@ -152,7 +152,7 @@ function AccountSwitcher() {
                             >
                                 {currentUserPersonalDetails?.displayName}
                             </Text>
-                            {canSwitchAccounts && (
+                            {!!canSwitchAccounts && (
                                 <View style={styles.justifyContentCenter}>
                                     <Icon
                                         fill={theme.icon}
@@ -180,7 +180,7 @@ function AccountSwitcher() {
                     </View>
                 </View>
             </PressableWithFeedback>
-            {canSwitchAccounts && (
+            {!!canSwitchAccounts && (
                 <PopoverMenu
                     isVisible={shouldShowDelegatorMenu}
                     onClose={() => {

src/components/Attachments/AttachmentCarousel/CarouselItem.tsx

@@ -86,7 +86,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemPr
                 />
             </View>
 
-            {item.hasBeenFlagged && (
+            {!!item.hasBeenFlagged && (
                 <SafeAreaConsumer>
                     {({safeAreaPaddingBottomStyle}) => <View style={[styles.appBG, safeAreaPaddingBottomStyle]}>{renderButton([styles.m4, styles.alignSelfCenter])}</View>}
                 </SafeAreaConsumer>

src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx

@@ -47,7 +47,7 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa
             </View>
 
             <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100, isDeleted && styles.lineThrough]}>{fileName}</Text>
-            {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && (
+            {!shouldShowLoadingSpinnerIcon && !!shouldShowDownloadIcon && (
                 <Tooltip text={translate('common.download')}>
                     <View style={styles.ml2}>
                         <Icon

src/components/AvatarWithDisplayName.tsx

@@ -125,7 +125,7 @@ function AvatarWithDisplayName({
 
     const headerView = (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
-            {report && !!title && (
+            {!!report && !!title && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                     <PressableWithoutFeedback
                         onPress={showActorDetails}

src/components/AvatarWithImagePicker.tsx

@@ -443,7 +443,7 @@ function AvatarWithImagePicker({
                     )}
                 </AttachmentModal>
             </View>
-            {errorData.validationError && (
+            {!!errorData.validationError && (
                 <DotIndicatorMessage
                     style={[styles.mt6]}
                     // eslint-disable-next-line @typescript-eslint/naming-convention

src/components/Badge.tsx

@@ -86,7 +86,7 @@ function Badge({
             aria-label={!pressable ? text : undefined}
             accessible={false}
         >
-            {icon && (
+            {!!icon && (
                 <View style={[styles.mr2, iconStyles]}>
                     <Icon
                         width={variables.iconSizeExtraSmall}

src/components/Banner.tsx

@@ -83,7 +83,7 @@ function Banner({
                         ]}
                     >
                         <View style={[styles.flexRow, styles.flex1, styles.mw100, styles.alignItemsCenter]}>
-                            {shouldShowIcon && icon && (
+                            {shouldShowIcon && !!icon && (
                                 <View style={[styles.mr3]}>
                                     <Icon
                                         src={icon}

src/components/BlockingViews/BlockingView.tsx

@@ -102,7 +102,7 @@ function BlockingView({
     const subtitleText = useMemo(
         () => (
             <>
-                {subtitle && (
+                {!!subtitle && (
                     <AutoEmailLink
                         style={[styles.textAlignCenter, subtitleStyle]}
                         text={subtitle}
@@ -134,7 +134,7 @@ function BlockingView({
 
     return (
         <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10, containerStyle]}>
-            {animation && (
+            {!!animation && (
                 <Lottie
                     source={animation}
                     loop
@@ -143,7 +143,7 @@ function BlockingView({
                     webStyle={animationWebStyle}
                 />
             )}
-            {icon && (
+            {!!icon && (
                 <Icon
                     src={icon}
                     fill={iconColor}

src/components/Button/index.tsx

@@ -289,7 +289,7 @@ function Button(
             return (
                 <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
-                        {icon && (
+                        {!!icon && (
                             <View style={[large ? styles.mr2 : styles.mr1, !text && styles.mr0, iconStyles]}>
                                 <Icon
                                     src={icon}

src/components/ButtonWithDropdownMenu/index.tsx

@@ -190,7 +190,7 @@ function ButtonWithDropdownMenu<IValueType>({
                     enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                 />
             )}
-            {(shouldAlwaysShowDropdownMenu || options.length > 1) && popoverAnchorPosition && (
+            {(shouldAlwaysShowDropdownMenu || options.length > 1) && !!popoverAnchorPosition && (
                 <PopoverMenu
                     isVisible={isMenuVisible}
                     onClose={() => {

src/components/CheckboxWithLabel.tsx

@@ -95,8 +95,8 @@ function CheckboxWithLabel(
                     style={[styles.flexRow, styles.alignItemsCenter, styles.noSelect, styles.w100]}
                     wrapperStyle={[styles.ml3, styles.pr2, styles.w100, styles.flexWrap, styles.flexShrink1]}
                 >
-                    {label && <Text style={[styles.ml1]}>{label}</Text>}
-                    {LabelComponent && <LabelComponent />}
+                    {!!label && <Text style={[styles.ml1]}>{label}</Text>}
+                    {!!LabelComponent && <LabelComponent />}
                 </PressableWithFeedback>
             </View>
             <FormHelpMessage message={errorText} />

src/components/CollapsibleSection/index.tsx

@@ -63,7 +63,7 @@ function CollapsibleSection({title, children, titleStyle, textStyle, wrapperStyl
                     src={src}
                 />
             </PressableWithFeedback>
-            {shouldShowSectionBorder && <View style={styles.collapsibleSectionBorder} />}
+            {!!shouldShowSectionBorder && <View style={styles.collapsibleSectionBorder} />}
             <Collapsible isOpened={isExpanded}>
                 <View>{children}</View>
             </Collapsible>

src/components/ConfirmContent.tsx

@@ -168,7 +168,7 @@ function ConfirmContent({
                     </View>
                 )}
                 <View style={isCentered ? [styles.alignItemsCenter, styles.mb6] : []}>
-                    {iconSource && (
+                    {!!iconSource && (
                         <View style={[shouldCenterIcon ? styles.justifyContentCenter : null, styles.flexRow, styles.mb3]}>
                             <Icon
                                 src={iconSource}

src/components/ConnectionLayout.tsx

@@ -78,7 +78,7 @@ function ConnectionLayoutContent({title, titleStyle, children, titleAlreadyTrans
     const styles = useThemeStyles();
     return (
         <>
-            {title && <Text style={[styles.pb5, titleStyle]}>{titleAlreadyTranslated ?? translate(title)}</Text>}
+            {!!title && <Text style={[styles.pb5, titleStyle]}>{titleAlreadyTranslated ?? translate(title)}</Text>}
             {children}
         </>
     );

src/components/DecisionModal.tsx

@@ -55,7 +55,7 @@ function DecisionModal({title, prompt = '', firstOptionText, secondOptionText, o
                     </View>
                     <Text>{prompt}</Text>
                 </View>
-                {firstOptionText && (
+                {!!firstOptionText && (
                     <Button
                         success
                         style={[styles.mt4]}

src/components/EReceiptThumbnail.tsx

@@ -122,7 +122,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT
                         fill={secondaryColor}
                         additionalStyles={[styles.fullScreen]}
                     />
-                    {isReceiptThumbnail && fileExtension && (
+                    {isReceiptThumbnail && !!fileExtension && (
                         <Text
                             selectable={false}
                             style={[

src/components/FeatureList.tsx

@@ -131,7 +131,7 @@ function FeatureList({
                         large
                     />
                 )}
-                {ctaErrorMessage && (
+                {!!ctaErrorMessage && (
                     <DotIndicatorMessage
                         style={styles.mb1}
                         messages={{error: ctaErrorMessage}}

src/components/HeaderWithBackButton/index.tsx

@@ -173,15 +173,15 @@ function HeaderWithBackButton({
                         </PressableWithoutFeedback>
                     </Tooltip>
                 )}
-                {icon && (
+                {!!icon && (
                     <Icon
                         src={icon}
                         width={variables.iconHeader}
                         height={variables.iconHeader}
                         additionalStyles={[styles.mr2]}
                     />
                 )}
-                {policyAvatar && (
+                {!!policyAvatar && (
                     <Avatar
                         containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
                         source={policyAvatar?.source}

src/components/InteractiveStepWrapper.tsx

@@ -75,7 +75,7 @@ function InteractiveStepWrapper(
                 onBackButtonPress={handleBackButtonPress}
                 guidesCallTaskID={guidesCallTaskID}
             />
-            {stepNames && (
+            {!!stepNames && (
                 <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                     <InteractiveStepSubHeader
                         startStepIndex={startStepIndex}

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -324,7 +324,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                             />
                                         </View>
                                     )}
-                                    {hasDraftComment && optionItem.isAllowedToComment && (
+                                    {hasDraftComment && !!optionItem.isAllowedToComment && (
                                         <View
                                             style={styles.ml2}
                                             accessibilityLabel={translate('sidebarScreen.draftedMessage')}
@@ -336,7 +336,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                             />
                                         </View>
                                     )}
-                                    {!shouldShowGreenDotIndicator && !hasBrickError && optionItem.isPinned && (
+                                    {!shouldShowGreenDotIndicator && !hasBrickError && !!optionItem.isPinned && (
                                         <View
                                             style={styles.ml2}
                                             accessibilityLabel={translate('sidebarScreen.chatPinned')}

src/components/MagicCodeInput.tsx

@@ -429,7 +429,7 @@ function MagicCodeInput(
                     </View>
                 ))}
             </View>
-            {errorText && (
+            {!!errorText && (
                 <FormHelpMessage
                     isError
                     message={errorText}

src/components/MapView/Direction.website.tsx

@@ -18,7 +18,7 @@ function Direction({coordinates}: DirectionProps) {
     }
     return (
         <View>
-            {coordinates && (
+            {!!coordinates && (
                 <Source
                     id="route"
                     type="geojson"

src/components/MapView/MapView.tsx

@@ -275,7 +275,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                         );
                     })}
 
-                    {directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                    {!!directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Mapbox.MapView>
                 {interactive && (
                     <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>

src/components/MapView/MapViewImpl.website.tsx

@@ -272,7 +272,7 @@ const MapViewImpl = forwardRef<MapViewHandle, ComponentProps>(
                             </Marker>
                         );
                     })}
-                    {directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                    {!!directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Map>
                 {interactive && (
                     <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>

src/components/MentionSuggestions.tsx

@@ -88,7 +88,7 @@ function MentionSuggestions({
 
             return (
                 <View style={[styles.autoCompleteSuggestionContainer, styles.ph2]}>
-                    {item.icons && !!item.icons.length && (
+                    {!!item.icons && !!item.icons.length && (
                         <View style={styles.mentionSuggestionsAvatarContainer}>
                             <Avatar
                                 source={item.icons.at(0)?.source}