[HOLD for payment 2022-02-11] Miss-aligned headers on Android and iOS - Reported by @adeel0202

[aldo-expensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Login in New Dot
2. Go to Settings > Preferences

3. Go to `Settings > Security`

Expected Result:

Tittle on top should be aligned

Actual Result:

Tittle on top is miss aligned

Workaround:

User can use New Dot without problems

Platform:

Where is this issue occurring?

• Android
• iOS

Version Number: 1.1.33-3
Reproducible in staging?: Y
Reproducible in production?:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by: @aldo-expensify @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643179669442200

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @strepanier03 (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

Current assignee @MitchExpensify is eligible for the External assigner, not assigning anyone new.

[mateusbra]

This issue is also occurring on all subscreens from Settings Page

PROPOSAL

this issue is happening because within header.js we are using subtitle wrong:

App/src/components/Header.js

Lines 29 to 34 in 2c14f01

	</Text>
	{/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
	{_.isString(props.subtitle)
	? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text>
	: props.subtitle}
	</View>

props.subtitle will allways be a string, we must compare it with another way, and we also need return a fragment if we dont want to return a subtitle:
i suggest we change to:

const Header = props => (
    <View style={[styles.flex1, styles.flexRow]}>
        <View style={styles.mw100}>
            <Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
                {props.title}
            </Text>
            {/* If there's no subtitle then we dont want to display it */}
            {_.isString(props.subtitle) 
            ? Boolean(props.subtitle) && <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text> 
            : props.subtitle} 
        </View>
        {props.shouldShowEnvironmentBadge && (
            <EnvironmentBadge />
        )}
    </View>
);

SCREENSHOTS

Android:

IOS:

[mvtglobally]

Previously raised by the contributor here https://expensify.slack.com/archives/C01GTK53T8Q/p1643179669442200
Issue was not opened by applause earlier as there was no feedback on the issue from Expensify employees.

[adeel0202]

The issue is reproducible on iOS too.

[MitchExpensify]

Upwork Job