diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index 4f78e9c3b869..2b5be4121760 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -87,138 +87,137 @@ const getPhoneNumber = (details) => {
     return details.login ? Str.removeSMSDomain(details.login) : '';
 };
 
-class DetailsPage extends React.PureComponent {
-    render() {
-        const login = lodashGet(this.props.route.params, 'login', '');
-        let details = _.find(this.props.personalDetails, (detail) => detail.login === login.toLowerCase());
-
-        if (!details) {
-            // TODO: these personal details aren't in my local test account but are in
-            // my staging account, i wonder why!
-            if (login === CONST.EMAIL.CONCIERGE) {
-                details = {
-                    accountID: CONST.ACCOUNT_ID.CONCIERGE,
-                    login,
-                    displayName: 'Concierge',
-                    avatar: UserUtils.getDefaultAvatar(CONST.ACCOUNT_ID.CONCIERGE),
-                };
-            } else {
-                details = {
-                    accountID: -1,
-                    login,
-                    displayName: login,
-                    avatar: UserUtils.getDefaultAvatar(),
-                };
-            }
+function DetailsPage(props) {
+    const login = lodashGet(props.route.params, 'login', '');
+    let details = _.find(props.personalDetails, (detail) => detail.login === login.toLowerCase());
+
+    if (!details) {
+        // TODO: these personal details aren't in my local test account but are in
+        // my staging account, i wonder why!
+        if (login === CONST.EMAIL.CONCIERGE) {
+            details = {
+                accountID: CONST.ACCOUNT_ID.CONCIERGE,
+                login,
+                displayName: 'Concierge',
+                avatar: UserUtils.getDefaultAvatar(CONST.ACCOUNT_ID.CONCIERGE),
+            };
+        } else {
+            details = {
+                accountID: -1,
+                login,
+                displayName: login,
+                avatar: UserUtils.getDefaultAvatar(),
+            };
         }
+    }
 
-        const isSMSLogin = details.login ? Str.isSMSLogin(details.login) : false;
+    const isSMSLogin = details.login ? Str.isSMSLogin(details.login) : false;
 
-        const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyAccountIDs([details.accountID]) && details.timezone;
-        let pronouns = details.pronouns;
+    const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyAccountIDs([details.accountID]) && details.timezone;
+    let pronouns = details.pronouns;
 
-        if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) {
-            const localeKey = pronouns.replace(CONST.PRONOUNS.PREFIX, '');
-            pronouns = this.props.translate(`pronouns.${localeKey}`);
-        }
+    if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) {
+        const localeKey = pronouns.replace(CONST.PRONOUNS.PREFIX, '');
+        pronouns = props.translate(`pronouns.${localeKey}`);
+    }
 
-        const phoneNumber = getPhoneNumber(details);
-        const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : details.login;
-
-        const isCurrentUser = _.keys(this.props.loginList).includes(details.login);
-
-        return (
-            <ScreenWrapper>
-                <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
-                    <HeaderWithBackButton
-                        title={this.props.translate('common.details')}
-                        onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
-                    />
-                    <View
-                        pointerEvents="box-none"
-                        style={[styles.containerWithSpaceBetween]}
-                    >
-                        {details ? (
-                            <ScrollView>
-                                <View style={styles.avatarSectionWrapper}>
-                                    <AttachmentModal
-                                        headerTitle={details.displayName}
-                                        source={UserUtils.getFullSizeAvatar(details.avatar, details.accountID)}
-                                        isAuthTokenRequired
-                                        originalFileName={details.originalFileName}
+    const phoneNumber = getPhoneNumber(details);
+    const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : details.login;
+
+    const isCurrentUser = _.keys(props.loginList).includes(details.login);
+
+    return (
+        <ScreenWrapper>
+            <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
+                <HeaderWithBackButton
+                    title={props.translate('common.details')}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
+                />
+                <View
+                    pointerEvents="box-none"
+                    style={[styles.containerWithSpaceBetween]}
+                >
+                    {details ? (
+                        <ScrollView>
+                            <View style={styles.avatarSectionWrapper}>
+                                <AttachmentModal
+                                    headerTitle={details.displayName}
+                                    source={UserUtils.getFullSizeAvatar(details.avatar, details.accountID)}
+                                    isAuthTokenRequired
+                                    originalFileName={details.originalFileName}
+                                >
+                                    {({show}) => (
+                                        <PressableWithoutFocus
+                                            style={styles.noOutline}
+                                            onPress={show}
+                                        >
+                                            <OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
+                                                <Avatar
+                                                    containerStyles={[styles.avatarLarge, styles.mb3]}
+                                                    imageStyles={[styles.avatarLarge]}
+                                                    source={UserUtils.getAvatar(details.avatar, details.accountID)}
+                                                    size={CONST.AVATAR_SIZE.LARGE}
+                                                />
+                                            </OfflineWithFeedback>
+                                        </PressableWithoutFocus>
+                                    )}
+                                </AttachmentModal>
+                                {Boolean(details.displayName) && (
+                                    <Text
+                                        style={[styles.textHeadline, styles.mb6, styles.pre]}
+                                        numberOfLines={1}
                                     >
-                                        {({show}) => (
-                                            <PressableWithoutFocus
-                                                style={styles.noOutline}
-                                                onPress={show}
-                                            >
-                                                <OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
-                                                    <Avatar
-                                                        containerStyles={[styles.avatarLarge, styles.mb3]}
-                                                        imageStyles={[styles.avatarLarge]}
-                                                        source={UserUtils.getAvatar(details.avatar, details.accountID)}
-                                                        size={CONST.AVATAR_SIZE.LARGE}
-                                                    />
-                                                </OfflineWithFeedback>
-                                            </PressableWithoutFocus>
-                                        )}
-                                    </AttachmentModal>
-                                    {Boolean(details.displayName) && (
+                                        {details.displayName}
+                                    </Text>
+                                )}
+                                {details.login ? (
+                                    <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
                                         <Text
-                                            style={[styles.textHeadline, styles.mb6, styles.pre]}
+                                            style={[styles.textLabelSupporting, styles.mb1]}
                                             numberOfLines={1}
                                         >
-                                            {details.displayName}
+                                            {props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')}
                                         </Text>
-                                    )}
-                                    {details.login ? (
-                                        <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
-                                            <Text
-                                                style={[styles.textLabelSupporting, styles.mb1]}
-                                                numberOfLines={1}
-                                            >
-                                                {this.props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')}
-                                            </Text>
-                                            <CommunicationsLink value={phoneOrEmail}>
-                                                <UserDetailsTooltip accountID={details.accountID}>
-                                                    <Text numberOfLines={1}>{isSMSLogin ? this.props.formatPhoneNumber(phoneNumber) : details.login}</Text>
-                                                </UserDetailsTooltip>
-                                            </CommunicationsLink>
-                                        </View>
-                                    ) : null}
-                                    {pronouns ? (
-                                        <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
-                                            <Text
-                                                style={[styles.textLabelSupporting, styles.mb1]}
-                                                numberOfLines={1}
-                                            >
-                                                {this.props.translate('profilePage.preferredPronouns')}
-                                            </Text>
-                                            <Text numberOfLines={1}>{pronouns}</Text>
-                                        </View>
-                                    ) : null}
-                                    {shouldShowLocalTime && <AutoUpdateTime timezone={details.timezone} />}
-                                </View>
-                                {!isCurrentUser && (
-                                    <MenuItem
-                                        title={`${this.props.translate('common.message')}${details.displayName}`}
-                                        icon={Expensicons.ChatBubble}
-                                        onPress={() => Report.navigateToAndOpenReport([login])}
-                                        wrapperStyle={styles.breakAll}
-                                        shouldShowRightIcon
-                                    />
-                                )}
-                            </ScrollView>
-                        ) : null}
-                    </View>
-                </FullPageNotFoundView>
-            </ScreenWrapper>
-        );
-    }
+                                        <CommunicationsLink value={phoneOrEmail}>
+                                            <UserDetailsTooltip accountID={details.accountID}>
+                                                <Text numberOfLines={1}>{isSMSLogin ? props.formatPhoneNumber(phoneNumber) : details.login}</Text>
+                                            </UserDetailsTooltip>
+                                        </CommunicationsLink>
+                                    </View>
+                                ) : null}
+                                {pronouns ? (
+                                    <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
+                                        <Text
+                                            style={[styles.textLabelSupporting, styles.mb1]}
+                                            numberOfLines={1}
+                                        >
+                                            {props.translate('profilePage.preferredPronouns')}
+                                        </Text>
+                                        <Text numberOfLines={1}>{pronouns}</Text>
+                                    </View>
+                                ) : null}
+                                {shouldShowLocalTime && <AutoUpdateTime timezone={details.timezone} />}
+                            </View>
+                            {!isCurrentUser && (
+                                <MenuItem
+                                    title={`${props.translate('common.message')}${details.displayName}`}
+                                    icon={Expensicons.ChatBubble}
+                                    onPress={() => Report.navigateToAndOpenReport([login])}
+                                    wrapperStyle={styles.breakAll}
+                                    shouldShowRightIcon
+                                />
+                            )}
+                        </ScrollView>
+                    ) : null}
+                </View>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
 }
 
 DetailsPage.propTypes = propTypes;
 DetailsPage.defaultProps = defaultProps;
+DetailsPage.displayName = 'DetailsPage';
 
 export default compose(
     withLocalize,