Fix Android titles

This commit is contained in:
Zhiyuan Zheng 2021-12-18 23:44:08 +01:00
parent 9b4f23e61f
commit 200a3e4741
10 changed files with 44 additions and 67 deletions

View File

@ -187,7 +187,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
headerLeft: () => ( headerLeft: () => (
<HeaderLeft content='X' onPress={() => navigation.goBack()} /> <HeaderLeft content='X' onPress={() => navigation.goBack()} />
), ),
headerTitle: t('screenAnnouncements:heading') title: t('screenAnnouncements:heading')
})} })}
/> />
<Stack.Screen <Stack.Screen

View File

@ -372,25 +372,16 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
name='Screen-Compose-Root' name='Screen-Compose-Root'
component={ComposeRoot} component={ComposeRoot}
options={{ options={{
...Platform.select({ title: headerContent,
ios: { titleStyle: {
headerTitle: headerContent, fontWeight:
headerTitleStyle: { totalTextCount > maxTootChars
fontWeight: ? StyleConstants.Font.Weight.Bold
totalTextCount > maxTootChars : StyleConstants.Font.Weight.Normal,
? StyleConstants.Font.Weight.Bold fontSize: StyleConstants.Font.Size.M
: StyleConstants.Font.Weight.Normal, },
fontSize: StyleConstants.Font.Size.M headerTintColor:
}, totalTextCount > maxTootChars ? theme.red : theme.secondary,
headerTintColor:
totalTextCount > maxTootChars
? theme.red
: theme.secondary
},
android: {
headerCenter: () => <HeaderCenter content={headerContent} />
}
}),
headerLeft, headerLeft,
headerRight headerRight
}} }}

View File

@ -1,16 +1,15 @@
import { HeaderCenter, HeaderLeft } from '@components/Header' import { HeaderLeft } from '@components/Header'
import { createNativeStackNavigator } from '@react-navigation/native-stack' import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators' import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators'
import React, { useCallback } from 'react' import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Platform } from 'react-native'
import ComposeDraftsListRoot from './DraftsList/Root' import ComposeDraftsListRoot from './DraftsList/Root'
const Stack = createNativeStackNavigator() const Stack = createNativeStackNavigator()
const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps< const ComposeDraftsList: React.FC<
'Screen-Compose-DraftsList' ScreenComposeStackScreenProps<'Screen-Compose-DraftsList'>
>> = ({ > = ({
route: { route: {
params: { timestamp } params: { timestamp }
}, },
@ -40,12 +39,7 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<
children={children} children={children}
options={{ options={{
headerLeft, headerLeft,
headerTitle: t('content.draftsList.header.title'), title: t('content.draftsList.header.title'),
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter content={t('content.draftsList.header.title')} />
)
}),
headerShadowVisible: false headerShadowVisible: false
}} }}
/> />

View File

@ -49,7 +49,7 @@ const ComposeEditAttachment: React.FC<ScreenComposeStackScreenProps<
options={{ options={{
headerLeft, headerLeft,
headerRight: () => <ComposeEditAttachmentSubmit index={index} />, headerRight: () => <ComposeEditAttachmentSubmit index={index} />,
headerTitle: t('content.editAttachment.header.title') title: t('content.editAttachment.header.title')
}} }}
/> />
</Stack.Navigator> </Stack.Navigator>

View File

@ -21,7 +21,7 @@ const TabLocal = React.memo(
const screenOptionsRoot = useMemo( const screenOptionsRoot = useMemo(
() => ({ () => ({
headerTitle: t('tabs.local.name'), title: t('tabs.local.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => <HeaderCenter content={t('tabs.local.name')} /> headerCenter: () => <HeaderCenter content={t('tabs.local.name')} />
}), }),

View File

@ -38,7 +38,7 @@ const TabMe = React.memo(
name='Tab-Me-Bookmarks' name='Tab-Me-Bookmarks'
component={TabMeBookmarks} component={TabMeBookmarks}
options={({ navigation }: any) => ({ options={({ navigation }: any) => ({
headerTitle: t('me.stacks.bookmarks.name'), title: t('me.stacks.bookmarks.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.bookmarks.name')} /> <HeaderCenter content={t('me.stacks.bookmarks.name')} />
@ -51,7 +51,7 @@ const TabMe = React.memo(
name='Tab-Me-Conversations' name='Tab-Me-Conversations'
component={TabMeConversations} component={TabMeConversations}
options={({ navigation }: any) => ({ options={({ navigation }: any) => ({
headerTitle: t('me.stacks.conversations.name'), title: t('me.stacks.conversations.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.conversations.name')} /> <HeaderCenter content={t('me.stacks.conversations.name')} />
@ -64,7 +64,7 @@ const TabMe = React.memo(
name='Tab-Me-Favourites' name='Tab-Me-Favourites'
component={TabMeFavourites} component={TabMeFavourites}
options={({ navigation }: any) => ({ options={({ navigation }: any) => ({
headerTitle: t('me.stacks.favourites.name'), title: t('me.stacks.favourites.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.favourites.name')} /> <HeaderCenter content={t('me.stacks.favourites.name')} />
@ -77,7 +77,7 @@ const TabMe = React.memo(
name='Tab-Me-Lists' name='Tab-Me-Lists'
component={TabMeLists} component={TabMeLists}
options={({ navigation }: any) => ({ options={({ navigation }: any) => ({
headerTitle: t('me.stacks.lists.name'), title: t('me.stacks.lists.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.lists.name')} /> <HeaderCenter content={t('me.stacks.lists.name')} />
@ -90,7 +90,7 @@ const TabMe = React.memo(
name='Tab-Me-Lists-List' name='Tab-Me-Lists-List'
component={TabMeListsList} component={TabMeListsList}
options={({ route, navigation }: any) => ({ options={({ route, navigation }: any) => ({
headerTitle: t('me.stacks.list.name', { list: route.params.title }), title: t('me.stacks.list.name', { list: route.params.title }),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter <HeaderCenter
@ -117,7 +117,7 @@ const TabMe = React.memo(
options={({ navigation }) => ({ options={({ navigation }) => ({
presentation: 'modal', presentation: 'modal',
headerShown: true, headerShown: true,
headerTitle: t('me.stacks.push.name'), title: t('me.stacks.push.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.push.name')} /> <HeaderCenter content={t('me.stacks.push.name')} />
@ -135,12 +135,7 @@ const TabMe = React.memo(
name='Tab-Me-Settings' name='Tab-Me-Settings'
component={TabMeSettings} component={TabMeSettings}
options={({ navigation }: any) => ({ options={({ navigation }: any) => ({
headerTitle: t('me.stacks.settings.name'), title: t('me.stacks.settings.name'),
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter content={t('me.stacks.settings.name')} />
)
}),
headerLeft: () => <HeaderLeft onPress={() => navigation.pop(1)} /> headerLeft: () => <HeaderLeft onPress={() => navigation.pop(1)} />
})} })}
/> />
@ -148,7 +143,7 @@ const TabMe = React.memo(
name='Tab-Me-Settings-Fontsize' name='Tab-Me-Settings-Fontsize'
component={TabMeSettingsFontsize} component={TabMeSettingsFontsize}
options={({ navigation }: any) => ({ options={({ navigation }: any) => ({
headerTitle: t('me.stacks.fontSize.name'), title: t('me.stacks.fontSize.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.fontSize.name')} /> <HeaderCenter content={t('me.stacks.fontSize.name')} />
@ -163,7 +158,7 @@ const TabMe = React.memo(
options={({ navigation }) => ({ options={({ navigation }) => ({
presentation: 'modal', presentation: 'modal',
headerShown: true, headerShown: true,
headerTitle: t('me.stacks.switch.name'), title: t('me.stacks.switch.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.switch.name')} /> <HeaderCenter content={t('me.stacks.switch.name')} />

View File

@ -31,7 +31,7 @@ const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
<Stack.Screen <Stack.Screen
name='Tab-Me-Profile-Root' name='Tab-Me-Profile-Root'
options={{ options={{
headerTitle: t('me.stacks.profile.name'), title: t('me.stacks.profile.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.profile.name')} /> <HeaderCenter content={t('me.stacks.profile.name')} />
@ -56,7 +56,7 @@ const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
<Stack.Screen <Stack.Screen
name='Tab-Me-Profile-Name' name='Tab-Me-Profile-Name'
options={{ options={{
headerTitle: t('me.stacks.profileName.name'), title: t('me.stacks.profileName.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.profileName.name')} /> <HeaderCenter content={t('me.stacks.profileName.name')} />
@ -75,7 +75,7 @@ const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
<Stack.Screen <Stack.Screen
name='Tab-Me-Profile-Note' name='Tab-Me-Profile-Note'
options={{ options={{
headerTitle: t('me.stacks.profileNote.name'), title: t('me.stacks.profileNote.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.profileNote.name')} /> <HeaderCenter content={t('me.stacks.profileNote.name')} />
@ -94,7 +94,7 @@ const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
<Stack.Screen <Stack.Screen
name='Tab-Me-Profile-Fields' name='Tab-Me-Profile-Fields'
options={{ options={{
headerTitle: t('me.stacks.profileFields.name'), title: t('me.stacks.profileFields.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('me.stacks.profileFields.name')} /> <HeaderCenter content={t('me.stacks.profileFields.name')} />

View File

@ -109,7 +109,7 @@ const Collections: React.FC = () => {
iconBack='ChevronRight' iconBack='ChevronRight'
title={t('me.stacks.push.name')} title={t('me.stacks.push.name')}
content={ content={
instancePush instancePush.global.value
? t('me.root.push.content.enabled') ? t('me.root.push.content.enabled')
: t('me.root.push.content.disabled') : t('me.root.push.content.disabled')
} }

View File

@ -19,7 +19,7 @@ const TabNotifications = React.memo(
const screenOptionsRoot = useMemo( const screenOptionsRoot = useMemo(
() => ({ () => ({
headerTitle: t('tabs.notifications.name'), title: t('tabs.notifications.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter content={t('tabs.notifications.name')} /> <HeaderCenter content={t('tabs.notifications.name')} />

View File

@ -41,7 +41,7 @@ const TabSharedRoot = ({
headerStyle: { headerStyle: {
backgroundColor: `rgba(255, 255, 255, 0)` backgroundColor: `rgba(255, 255, 255, 0)`
}, },
headerTitle: '', title: '',
headerLeft: () => ( headerLeft: () => (
<HeaderLeft onPress={() => navigation.goBack()} background /> <HeaderLeft onPress={() => navigation.goBack()} background />
) )
@ -91,14 +91,7 @@ const TabSharedRoot = ({
options={({ options={({
route route
}: TabSharedStackScreenProps<'Tab-Shared-Hashtag'>) => ({ }: TabSharedStackScreenProps<'Tab-Shared-Hashtag'>) => ({
headerTitle: `#${decodeURIComponent(route.params.hashtag)}`, title: `#${decodeURIComponent(route.params.hashtag)}`
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter
content={`#${decodeURIComponent(route.params.hashtag)}`}
/>
)
})
})} })}
/> />
@ -109,6 +102,13 @@ const TabSharedRoot = ({
options={({ options={({
navigation navigation
}: TabSharedStackScreenProps<'Tab-Shared-Search'>) => ({ }: TabSharedStackScreenProps<'Tab-Shared-Search'>) => ({
...(Platform.OS === 'ios'
? {
headerLeft: () => (
<HeaderLeft onPress={() => navigation.goBack()} />
)
}
: { headerLeft: () => null }),
headerTitle: () => { headerTitle: () => {
const onChangeText = debounce( const onChangeText = debounce(
(text: string) => navigation.setParams({ text }), (text: string) => navigation.setParams({ text }),
@ -164,10 +164,7 @@ const TabSharedRoot = ({
name='Tab-Shared-Toot' name='Tab-Shared-Toot'
component={TabSharedToot} component={TabSharedToot}
options={{ options={{
headerTitle: t('shared.toot.name'), title: t('shared.toot.name')
...(Platform.OS === 'android' && {
headerCenter: () => <HeaderCenter content={t('shared.toot.name')} />
})
}} }}
/> />
@ -180,7 +177,7 @@ const TabSharedRoot = ({
params: { reference, type, count } params: { reference, type, count }
} }
}: TabSharedStackScreenProps<'Tab-Shared-Users'>) => ({ }: TabSharedStackScreenProps<'Tab-Shared-Users'>) => ({
headerTitle: t(`shared.users.${reference}.${type}`, { count }), title: t(`shared.users.${reference}.${type}`, { count }),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
headerCenter: () => ( headerCenter: () => (
<HeaderCenter <HeaderCenter