octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

React Navigation v6 first try 

Android header needs attention
This commit is contained in:
Zhiyuan Zheng 2021-08-21 01:45:43 +02:00
parent bc72e637bb
commit b821fc4d16
14 changed files with 563 additions and 567 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ios/Podfile.lock
View File

@ -480,7 +480,7 @@ PODS:
- React-RCTVibration - React-RCTVibration
- ReactCommon/turbomodule/core - ReactCommon/turbomodule/core
- Yoga - Yoga
- RNScreens (3.3.0): - RNScreens (3.5.0):
- React-Core - React-Core
- React-RCTImage - React-RCTImage
- RNSentry (2.4.3): - RNSentry (2.4.3):
@ -876,7 +876,7 @@ SPEC CHECKSUMS:
RNFastImage: d4870d58f5936111c56218dbd7fcfc18e65b58ff RNFastImage: d4870d58f5936111c56218dbd7fcfc18e65b58ff
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad
RNScreens: bf59f17fbf001f1025243eeed5f19419d3c11ef2 RNScreens: 01ab149b5dd5c27f5ff26741b1d2bdf2cee1af35
RNSentry: 6f8f9ee7e4c939dcd35e5633b94d0e3782888e46 RNSentry: 6f8f9ee7e4c939dcd35e5633b94d0e3782888e46
RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d

177
package.json
View File

@ -24,103 +24,104 @@
"clean": "react-native-clean-project" "clean": "react-native-clean-project"
}, },
"dependencies": { "dependencies": {
"@expo/react-native-action-sheet": "^3.9.0", "@expo/react-native-action-sheet": "3.9.0",
"@neverdull-agency/expo-unlimited-secure-store": "^1.0.10", "@neverdull-agency/expo-unlimited-secure-store": "1.0.10",
"@react-native-async-storage/async-storage": "^1.15.4", "@react-native-async-storage/async-storage": "1.15.4",
"@react-native-community/blur": "^3.6.0", "@react-native-community/blur": "3.6.0",
"@react-native-community/cameraroll": "^4.0.4", "@react-native-community/cameraroll": "4.0.4",
"@react-native-community/masked-view": "0.1.11", "@react-native-community/masked-view": "0.1.11",
"@react-native-community/netinfo": "6.0.0", "@react-native-community/netinfo": "6.0.0",
"@react-native-community/segmented-control": "2.2.2", "@react-native-community/segmented-control": "2.2.2",
"@react-navigation/bottom-tabs": "^5.11.11", "@react-navigation/bottom-tabs": "6.0.5",
"@react-navigation/native": "^5.9.4", "@react-navigation/native": "6.0.2",
"@react-navigation/stack": "^5.14.5", "@react-navigation/native-stack": "^6.1.0",
"@reduxjs/toolkit": "^1.5.1", "@react-navigation/stack": "6.0.7",
"@sentry/react-native": "^2.4.3", "@reduxjs/toolkit": "1.5.1",
"@sharcoux/slider": "^5.3.0", "@sentry/react-native": "2.4.3",
"axios": "^0.21.1", "@sharcoux/slider": "5.3.0",
"expo": "^41.0.1", "axios": "0.21.1",
"expo-auth-session": "~3.2.3", "expo": "41.0.1",
"expo-av": "~9.1.2", "expo-auth-session": "3.2.3",
"expo-crypto": "~9.1.0", "expo-av": "9.1.2",
"expo-firebase-analytics": "~4.0.2", "expo-crypto": "9.1.0",
"expo-haptics": "~10.0.0", "expo-firebase-analytics": "4.0.2",
"expo-image-manipulator": "~9.1.0", "expo-haptics": "10.0.0",
"expo-image-picker": "~10.1.4", "expo-image-manipulator": "9.1.0",
"expo-linking": "~2.2.3", "expo-image-picker": "10.1.4",
"expo-localization": "~10.1.0", "expo-linking": "2.2.3",
"expo-notifications": "~0.11.6", "expo-localization": "10.1.0",
"expo-random": "~11.1.2", "expo-notifications": "0.11.6",
"expo-screen-capture": "^3.1.0", "expo-random": "11.1.2",
"expo-secure-store": "~10.1.0", "expo-screen-capture": "3.1.0",
"expo-splash-screen": "~0.10.2", "expo-secure-store": "10.1.0",
"expo-status-bar": "~1.0.4", "expo-splash-screen": "0.10.2",
"expo-store-review": "~4.0.2", "expo-status-bar": "1.0.4",
"expo-video-thumbnails": "~5.1.0", "expo-store-review": "4.0.2",
"expo-web-browser": "~9.1.0", "expo-video-thumbnails": "5.1.0",
"i18next": "^20.3.0", "expo-web-browser": "9.1.0",
"li": "^1.3.0", "i18next": "20.3.0",
"lodash": "^4.17.21", "li": "1.3.0",
"lodash": "4.17.21",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-i18next": "^11.9.0", "react-i18next": "11.9.0",
"react-native": "~0.64.1", "react-native": "0.64.1",
"react-native-animated-spinkit": "^1.5.2", "react-native-animated-spinkit": "1.5.2",
"react-native-blurhash": "^1.1.4", "react-native-blurhash": "1.1.4",
"react-native-fast-image": "^8.3.4", "react-native-fast-image": "8.3.4",
"react-native-feather": "^1.0.2", "react-native-feather": "1.0.2",
"react-native-flash-message": "^0.1.23", "react-native-flash-message": "0.1.23",
"react-native-gesture-handler": "~1.10.3", "react-native-gesture-handler": "1.10.3",
"react-native-htmlview": "^0.16.0", "react-native-htmlview": "0.16.0",
"react-native-pager-view": "5.1.9", "react-native-pager-view": "5.1.9",
"react-native-reanimated": "~2.1.0", "react-native-reanimated": "2.1.0",
"react-native-safe-area-context": "3.2.0", "react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.3.0", "react-native-screens": "^3.5.0",
"react-native-svg": "12.1.1", "react-native-svg": "12.1.1",
"react-native-swipe-list-view": "^3.2.7", "react-native-swipe-list-view": "3.2.7",
"react-native-tab-view": "^3.0.1", "react-native-tab-view": "3.0.1",
"react-native-unimodules": "~0.13.3", "react-native-unimodules": "0.13.3",
"react-query": "^3.16.0", "react-query": "3.16.0",
"react-redux": "^7.2.4", "react-redux": "7.2.4",
"react-timeago": "^5.2.0", "react-timeago": "5.2.0",
"redux-persist": "^6.0.0", "redux-persist": "6.0.0",
"rn-placeholder": "^3.0.3", "rn-placeholder": "3.0.3",
"sentry-expo": "^3.1.3", "sentry-expo": "3.1.3",
"tslib": "^2.2.0", "tslib": "2.2.0",
"valid-url": "^1.0.9" "valid-url": "1.0.9"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "~7.14.3", "@babel/core": "7.14.3",
"@babel/plugin-proposal-optional-chaining": "^7.14.2", "@babel/plugin-proposal-optional-chaining": "7.14.2",
"@babel/preset-typescript": "^7.13.0", "@babel/preset-typescript": "7.13.0",
"@expo/config": "^3.3.43", "@expo/config": "3.3.43",
"@jest/types": "^26.6.2", "@jest/types": "26.6.2",
"@testing-library/jest-native": "^4.0.1", "@testing-library/jest-native": "4.0.1",
"@testing-library/react-hooks": "^5.1.2", "@testing-library/react-hooks": "5.1.2",
"@testing-library/react-native": "^7.2.0", "@testing-library/react-native": "7.2.0",
"@types/jest": "^26.0.23", "@types/jest": "26.0.23",
"@types/lodash": "^4.14.170", "@types/lodash": "4.14.170",
"@types/react": "~17.0.8", "@types/react": "17.0.8",
"@types/react-dom": "~17.0.5", "@types/react-dom": "17.0.5",
"@types/react-native": "~0.64.6", "@types/react-native": "0.64.6",
"@types/react-navigation": "^3.4.0", "@types/react-navigation": "3.4.0",
"@types/react-redux": "^7.1.16", "@types/react-redux": "7.1.16",
"@types/react-test-renderer": "^17.0.1", "@types/react-test-renderer": "17.0.1",
"@types/react-timeago": "^4.1.2", "@types/react-timeago": "4.1.2",
"@types/valid-url": "^1.0.3", "@types/valid-url": "1.0.3",
"@welldone-software/why-did-you-render": "^6.1.4", "@welldone-software/why-did-you-render": "6.1.4",
"babel-jest": "~26.6.3", "babel-jest": "26.6.3",
"babel-plugin-module-resolver": "^4.1.0", "babel-plugin-module-resolver": "4.1.0",
"babel-plugin-transform-remove-console": "^6.9.4", "babel-plugin-transform-remove-console": "6.9.4",
"chalk": "^4.1.1", "chalk": "4.1.1",
"dotenv": "^10.0.0", "dotenv": "10.0.0",
"jest": "^26.6.3", "jest": "26.6.3",
"jest-expo": "^41.0.0", "jest-expo": "41.0.0",
"nock": "^13.0.11", "nock": "13.0.11",
"react-native-clean-project": "^3.6.4", "react-native-clean-project": "3.6.4",
"react-navigation": "^4.4.4", "react-navigation": "4.4.4",
"react-navigation-stack": "^2.10.4", "react-navigation-stack": "2.10.4",
"react-test-renderer": "^17.0.2", "react-test-renderer": "17.0.2",
"typescript": "~4.2.4" "typescript": "4.2.4"
} }
} }

33
src/Screens.tsx
View File

@ -1,8 +1,9 @@
import { HeaderCenter, HeaderLeft } from '@components/Header' import { HeaderLeft } from '@components/Header'
import { displayMessage, Message, removeMessage } from '@components/Message' import { displayMessage, Message, removeMessage } from '@components/Message'
import navigationRef from '@helpers/navigationRef' import navigationRef from '@helpers/navigationRef'
import { useNetInfo } from '@react-native-community/netinfo' import { useNetInfo } from '@react-native-community/netinfo'
import { NavigationContainer } from '@react-navigation/native' import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import ScreenActions from '@screens/Actions' import ScreenActions from '@screens/Actions'
import ScreenAnnouncements from '@screens/Announcements' import ScreenAnnouncements from '@screens/Announcements'
import ScreenCompose from '@screens/Compose' import ScreenCompose from '@screens/Compose'
@ -22,7 +23,6 @@ import { addScreenshotListener } from 'expo-screen-capture'
import React, { useCallback, useEffect, useRef } from 'react' import React, { useCallback, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Alert, Platform, StatusBar } from 'react-native' import { Alert, Platform, StatusBar } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { onlineManager, useQueryClient } from 'react-query' import { onlineManager, useQueryClient } from 'react-query'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import * as Sentry from 'sentry-expo' import * as Sentry from 'sentry-expo'
@ -166,8 +166,8 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
name='Screen-Actions' name='Screen-Actions'
component={ScreenActions} component={ScreenActions}
options={{ options={{
stackPresentation: 'transparentModal', presentation: 'transparentModal',
stackAnimation: 'fade', animation: 'fade',
headerShown: false headerShown: false
}} }}
/> />
@ -175,38 +175,33 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
name='Screen-Announcements' name='Screen-Announcements'
component={ScreenAnnouncements} component={ScreenAnnouncements}
options={({ navigation }) => ({ options={({ navigation }) => ({
stackPresentation: 'transparentModal', presentation: 'transparentModal',
stackAnimation: 'fade', animation: 'fade',
headerShown: true, headerShown: true,
headerHideShadow: true, headerShadowVisible: false,
headerTopInsetEnabled: false, headerTransparent: true,
headerStyle: { backgroundColor: 'transparent' }, headerStyle: { backgroundColor: 'transparent' },
headerLeft: () => ( headerLeft: () => (
<HeaderLeft content='X' onPress={() => navigation.goBack()} /> <HeaderLeft content='X' onPress={() => navigation.goBack()} />
), ),
headerTitle: t('screenAnnouncements:heading'), headerTitle: t('screenAnnouncements:heading')
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter content={t('screenAnnouncements:heading')} />
)
})
})} })}
/> />
<Stack.Screen <Stack.Screen
name='Screen-Compose' name='Screen-Compose'
component={ScreenCompose} component={ScreenCompose}
options={{ options={{
stackPresentation: 'fullScreenModal', headerShown: false,
...(Platform.OS === 'android' && { headerShown: false }) presentation: 'fullScreenModal'
}} }}
/> />
<Stack.Screen <Stack.Screen
name='Screen-ImagesViewer' name='Screen-ImagesViewer'
component={ScreenImagesViewer} component={ScreenImagesViewer}
options={{ options={{
stackPresentation: 'fullScreenModal', headerShown: false,
stackAnimation: 'fade', presentation: 'fullScreenModal',
...(Platform.OS === 'android' && { headerShown: false }) animation: 'fade'
}} }}
/> />
</Stack.Navigator> </Stack.Navigator>

17
src/screens/Compose.tsx
View File

@ -1,5 +1,6 @@
import analytics from '@components/analytics' import analytics from '@components/analytics'
import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header' import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { StackScreenProps } from '@react-navigation/stack' import { StackScreenProps } from '@react-navigation/stack'
import haptics from '@root/components/haptics' import haptics from '@root/components/haptics'
import formatText from '@screens/Compose/formatText' import formatText from '@screens/Compose/formatText'
@ -31,7 +32,6 @@ import {
StyleSheet StyleSheet
} from 'react-native' } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context' import { SafeAreaView } from 'react-native-safe-area-context'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { useQueryClient } from 'react-query' import { useQueryClient } from 'react-query'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import * as Sentry from 'sentry-expo' import * as Sentry from 'sentry-expo'
@ -371,10 +371,7 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
edges={hasKeyboard ? ['top'] : ['top', 'bottom']} edges={hasKeyboard ? ['top'] : ['top', 'bottom']}
> >
<ComposeContext.Provider value={{ composeState, composeDispatch }}> <ComposeContext.Provider value={{ composeState, composeDispatch }}>
<Stack.Navigator <Stack.Navigator initialRouteName='Screen-Compose-Root'>
screenOptions={{ headerTopInsetEnabled: false }}
initialRouteName='Screen-Compose-Root'
>
<Stack.Screen <Stack.Screen
name='Screen-Compose-Root' name='Screen-Compose-Root'
component={ComposeRoot} component={ComposeRoot}
@ -405,18 +402,12 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
<Stack.Screen <Stack.Screen
name='Screen-Compose-DraftsList' name='Screen-Compose-DraftsList'
component={ComposeDraftsList} component={ComposeDraftsList}
options={{ options={{ headerShown: false, presentation: 'modal' }}
stackPresentation: 'modal',
...(Platform.OS === 'android' && { headerShown: false })
}}
/> />
<Stack.Screen <Stack.Screen
name='Screen-Compose-EditAttachment' name='Screen-Compose-EditAttachment'
component={ComposeEditAttachment} component={ComposeEditAttachment}
options={{ options={{ headerShown: false, presentation: 'modal' }}
stackPresentation: 'modal',
...(Platform.OS === 'android' && { headerShown: false })
}}
/> />
</Stack.Navigator> </Stack.Navigator>
</ComposeContext.Provider> </ComposeContext.Provider>

6
src/screens/Compose/DraftsList.tsx
View File

@ -1,9 +1,9 @@
import { HeaderCenter, HeaderLeft } from '@components/Header' import { HeaderCenter, HeaderLeft } from '@components/Header'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { StackScreenProps } from '@react-navigation/stack' import { StackScreenProps } from '@react-navigation/stack'
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 { Platform } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import ComposeDraftsListRoot from './DraftsList/Root' import ComposeDraftsListRoot from './DraftsList/Root'
const Stack = createNativeStackNavigator() const Stack = createNativeStackNavigator()
@ -37,7 +37,7 @@ const ComposeDraftsList: React.FC<ScreenComposeEditAttachmentProp> = ({
) )
return ( return (
<Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}> <Stack.Navigator>
<Stack.Screen <Stack.Screen
name='Screen-Compose-EditAttachment-Root' name='Screen-Compose-EditAttachment-Root'
children={children} children={children}
@ -49,7 +49,7 @@ const ComposeDraftsList: React.FC<ScreenComposeEditAttachmentProp> = ({
<HeaderCenter content={t('content.draftsList.header.title')} /> <HeaderCenter content={t('content.draftsList.header.title')} />
) )
}), }),
headerHideShadow: true headerShadowVisible: false
}} }}
/> />
</Stack.Navigator> </Stack.Navigator>

15
src/screens/Compose/EditAttachment.tsx
View File

@ -1,10 +1,10 @@
import { HeaderCenter, HeaderLeft } from '@components/Header' import { HeaderLeft } from '@components/Header'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { StackScreenProps } from '@react-navigation/stack' import { StackScreenProps } from '@react-navigation/stack'
import React, { useCallback } from 'react' import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { KeyboardAvoidingView, Platform } from 'react-native' import { KeyboardAvoidingView, Platform } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context' import { SafeAreaView } from 'react-native-safe-area-context'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import ComposeEditAttachmentRoot from './EditAttachment/Root' import ComposeEditAttachmentRoot from './EditAttachment/Root'
import ComposeEditAttachmentSubmit from './EditAttachment/Submit' import ComposeEditAttachmentSubmit from './EditAttachment/Submit'
@ -45,21 +45,14 @@ const ComposeEditAttachment: React.FC<ScreenComposeEditAttachmentProp> = ({
style={{ flex: 1 }} style={{ flex: 1 }}
> >
<SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}> <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
<Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}> <Stack.Navigator>
<Stack.Screen <Stack.Screen
name='Screen-Compose-EditAttachment-Root' name='Screen-Compose-EditAttachment-Root'
children={children} children={children}
options={{ options={{
headerLeft, headerLeft,
headerRight: () => <ComposeEditAttachmentSubmit index={index} />, headerRight: () => <ComposeEditAttachmentSubmit index={index} />,
headerTitle: t('content.editAttachment.header.title'), headerTitle: t('content.editAttachment.header.title')
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter
content={t('content.editAttachment.header.title')}
/>
)
})
}} }}
/> />
</Stack.Navigator> </Stack.Navigator>

18
src/screens/Tabs.tsx
View File

@ -52,7 +52,12 @@ const ScreenTabs = React.memo(
const screenOptions = useCallback( const screenOptions = useCallback(
({ route }): BottomTabNavigationOptions => ({ ({ route }): BottomTabNavigationOptions => ({
tabBarVisible: instanceActive !== -1, headerShown: false,
tabBarActiveTintColor: theme.primaryDefault,
tabBarInactiveTintColor: theme.secondary,
tabBarShowLabel: false,
...(Platform.OS === 'android' && { tabBarHideOnKeyboard: true }),
tabBarStyle: { display: instanceActive !== -1 ? 'flex' : 'none' },
tabBarIcon: ({ tabBarIcon: ({
focused, focused,
color, color,
@ -95,15 +100,7 @@ const ScreenTabs = React.memo(
}), }),
[instanceAccount?.avatarStatic, instanceActive] [instanceAccount?.avatarStatic, instanceActive]
) )
const tabBarOptions = useMemo(
() => ({
activeTintColor: theme.primaryDefault,
inactiveTintColor: theme.secondary,
showLabel: false,
...(Platform.OS === 'android' && { keyboardHidesTabBar: true })
}),
[mode]
)
const composeListeners = useMemo( const composeListeners = useMemo(
() => ({ () => ({
tabPress: (e: any) => { tabPress: (e: any) => {
@ -133,7 +130,6 @@ const ScreenTabs = React.memo(
<Tab.Navigator <Tab.Navigator
initialRouteName={instanceActive !== -1 ? previousTab : 'Tab-Me'} initialRouteName={instanceActive !== -1 ? previousTab : 'Tab-Me'}
screenOptions={screenOptions} screenOptions={screenOptions}
tabBarOptions={tabBarOptions}
> >
<Tab.Screen name='Tab-Local' component={TabLocal} /> <Tab.Screen name='Tab-Local' component={TabLocal} />
<Tab.Screen name='Tab-Public' component={TabPublic} /> <Tab.Screen name='Tab-Public' component={TabPublic} />

11
src/screens/Tabs/Local.tsx
View File

@ -3,12 +3,12 @@ import { HeaderCenter, HeaderRight } from '@components/Header'
import Timeline from '@components/Timeline' import Timeline from '@components/Timeline'
import TimelineDefault from '@components/Timeline/Default' import TimelineDefault from '@components/Timeline/Default'
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs' import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { ScreenTabsParamList } from '@screens/Tabs' import { ScreenTabsParamList } from '@screens/Tabs'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline' import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React, { useCallback, useMemo } from 'react' import React, { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Platform } from 'react-native' import { Platform } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import sharedScreens from './Shared/sharedScreens' import sharedScreens from './Shared/sharedScreens'
export type TabLocalProp = BottomTabScreenProps< export type TabLocalProp = BottomTabScreenProps<
@ -22,13 +22,6 @@ const TabLocal = React.memo(
({ navigation }: TabLocalProp) => { ({ navigation }: TabLocalProp) => {
const { t, i18n } = useTranslation('screenTabs') const { t, i18n } = useTranslation('screenTabs')
const screenOptions = useMemo(
() => ({
headerHideShadow: true,
headerTopInsetEnabled: false
}),
[]
)
const screenOptionsRoot = useMemo( const screenOptionsRoot = useMemo(
() => ({ () => ({
headerTitle: t('tabs.local.name'), headerTitle: t('tabs.local.name'),
@ -64,7 +57,7 @@ const TabLocal = React.memo(
) )
return ( return (
<Stack.Navigator screenOptions={screenOptions}> <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
<Stack.Screen <Stack.Screen
name='Tab-Local-Root' name='Tab-Local-Root'
options={screenOptionsRoot} options={screenOptionsRoot}

18
src/screens/Tabs/Me.tsx
View File

@ -1,8 +1,8 @@
import { HeaderCenter, HeaderLeft } from '@components/Header' import { HeaderCenter, HeaderLeft } from '@components/Header'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import React from 'react' import React from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Platform } from 'react-native' import { Platform } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import TabMeBookmarks from './Me/Bookmarks' import TabMeBookmarks from './Me/Bookmarks'
import TabMeConversations from './Me/Cconversations' import TabMeConversations from './Me/Cconversations'
import TabMeFavourites from './Me/Favourites' import TabMeFavourites from './Me/Favourites'
@ -23,16 +23,14 @@ const TabMe = React.memo(
const { t } = useTranslation('screenTabs') const { t } = useTranslation('screenTabs')
return ( return (
<Stack.Navigator <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
>
<Stack.Screen <Stack.Screen
name='Tab-Me-Root' name='Tab-Me-Root'
component={TabMeRoot} component={TabMeRoot}
options={{ options={{
headerTranslucent: true, headerShadowVisible: false,
headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' }, headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
headerCenter: () => null headerShown: false
}} }}
/> />
<Stack.Screen <Stack.Screen
@ -108,15 +106,15 @@ const TabMe = React.memo(
name='Tab-Me-Profile' name='Tab-Me-Profile'
component={TabMeProfile} component={TabMeProfile}
options={{ options={{
stackPresentation: 'modal', headerShown: false,
...(Platform.OS === 'android' && { headerShown: false }) presentation: 'modal'
}} }}
/> />
<Stack.Screen <Stack.Screen
name='Tab-Me-Push' name='Tab-Me-Push'
component={TabMePush} component={TabMePush}
options={({ navigation }) => ({ options={({ navigation }) => ({
stackPresentation: 'modal', presentation: 'modal',
headerShown: true, headerShown: true,
headerTitle: t('me.stacks.push.name'), headerTitle: t('me.stacks.push.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {
@ -162,7 +160,7 @@ const TabMe = React.memo(
name='Tab-Me-Switch' name='Tab-Me-Switch'
component={TabMeSwitch} component={TabMeSwitch}
options={({ navigation }) => ({ options={({ navigation }) => ({
stackPresentation: 'modal', presentation: 'modal',
headerShown: true, headerShown: true,
headerTitle: t('me.stacks.switch.name'), headerTitle: t('me.stacks.switch.name'),
...(Platform.OS === 'android' && { ...(Platform.OS === 'android' && {

6
src/screens/Tabs/Me/Profile.tsx
View File

@ -1,11 +1,11 @@
import { HeaderCenter, HeaderLeft } from '@components/Header' import { HeaderCenter, HeaderLeft } from '@components/Header'
import { Message } from '@components/Message' import { Message } from '@components/Message'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { StackScreenProps } from '@react-navigation/stack' import { StackScreenProps } from '@react-navigation/stack'
import React, { useRef } from 'react' import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { KeyboardAvoidingView, Platform } from 'react-native' import { KeyboardAvoidingView, Platform } from 'react-native'
import FlashMessage from 'react-native-flash-message' import FlashMessage from 'react-native-flash-message'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import TabMeProfileFields from './Profile/Fields' import TabMeProfileFields from './Profile/Fields'
import TabMeProfileName from './Profile/Name' import TabMeProfileName from './Profile/Name'
import TabMeProfileNote from './Profile/Note' import TabMeProfileNote from './Profile/Note'
@ -25,9 +25,7 @@ const TabMeProfile: React.FC<StackScreenProps<
style={{ flex: 1 }} style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
> >
<Stack.Navigator <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
>
<Stack.Screen <Stack.Screen
name='Tab-Me-Profile-Root' name='Tab-Me-Profile-Root'
options={{ options={{

11
src/screens/Tabs/Notifications.tsx
View File

@ -3,12 +3,12 @@ import { HeaderCenter, HeaderRight } from '@components/Header'
import Timeline from '@components/Timeline' import Timeline from '@components/Timeline'
import TimelineNotifications from '@components/Timeline/Notifications' import TimelineNotifications from '@components/Timeline/Notifications'
import { useNavigation } from '@react-navigation/native' import { useNavigation } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import sharedScreens from '@screens/Tabs/Shared/sharedScreens' import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline' import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React, { useCallback, useMemo } from 'react' import React, { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Platform } from 'react-native' import { Platform } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
const Stack = createNativeStackNavigator<Nav.TabNotificationsStackParamList>() const Stack = createNativeStackNavigator<Nav.TabNotificationsStackParamList>()
@ -17,13 +17,6 @@ const TabNotifications = React.memo(
const navigation = useNavigation() const navigation = useNavigation()
const { t, i18n } = useTranslation('screenTabs') const { t, i18n } = useTranslation('screenTabs')
const screenOptions = useMemo(
() => ({
headerHideShadow: true,
headerTopInsetEnabled: false
}),
[]
)
const screenOptionsRoot = useMemo( const screenOptionsRoot = useMemo(
() => ({ () => ({
headerTitle: t('tabs.notifications.name'), headerTitle: t('tabs.notifications.name'),
@ -62,7 +55,7 @@ const TabNotifications = React.memo(
) )
return ( return (
<Stack.Navigator screenOptions={screenOptions}> <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
<Stack.Screen <Stack.Screen
name='Tab-Notifications-Root' name='Tab-Notifications-Root'
children={children} children={children}

13
src/screens/Tabs/Public.tsx
View File

@ -4,6 +4,7 @@ import Timeline from '@components/Timeline'
import TimelineDefault from '@components/Timeline/Default' import TimelineDefault from '@components/Timeline/Default'
import SegmentedControl from '@react-native-community/segmented-control' import SegmentedControl from '@react-native-community/segmented-control'
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs' import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { ScreenTabsParamList } from '@screens/Tabs' import { ScreenTabsParamList } from '@screens/Tabs'
import sharedScreens from '@screens/Tabs/Shared/sharedScreens' import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline' import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
@ -11,7 +12,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo, useState } from 'react' import React, { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Dimensions, StyleSheet } from 'react-native' import { Dimensions, StyleSheet } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { TabView } from 'react-native-tab-view' import { TabView } from 'react-native-tab-view'
export type TabPublicProps = BottomTabScreenProps< export type TabPublicProps = BottomTabScreenProps<
@ -40,16 +40,9 @@ const TabPublic = React.memo(
key: 'Local' key: 'Local'
} }
] ]
const screenOptions = useMemo(
() => ({
headerHideShadow: true,
headerTopInsetEnabled: false
}),
[]
)
const screenOptionsRoot = useMemo( const screenOptionsRoot = useMemo(
() => ({ () => ({
headerCenter: () => ( headerTitle: () => (
<SegmentedControl <SegmentedControl
appearance={mode} appearance={mode}
values={pages.map(p => p.title)} values={pages.map(p => p.title)}
@ -113,7 +106,7 @@ const TabPublic = React.memo(
) )
return ( return (
<Stack.Navigator screenOptions={screenOptions}> <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
<Stack.Screen <Stack.Screen
name='Tab-Public-Root' name='Tab-Public-Root'
options={screenOptionsRoot} options={screenOptionsRoot}

339
src/screens/Tabs/Shared/sharedScreens.tsx
View File

@ -1,6 +1,15 @@
import { HeaderCenter, HeaderLeft } from '@components/Header' import { HeaderCenter, HeaderLeft } from '@components/Header'
import { ParseEmojis } from '@components/Parse' import { ParseEmojis } from '@components/Parse'
import { StackNavigationState, TypedNavigator } from '@react-navigation/native' import {
ParamListBase,
StackNavigationState,
TypedNavigator
} from '@react-navigation/native'
import {
NativeStackNavigationEventMap,
NativeStackNavigationOptions,
NativeStackNavigatorProps
} from '@react-navigation/native-stack/lib/typescript/src/types'
import { StackScreenProps } from '@react-navigation/stack' import { StackScreenProps } from '@react-navigation/stack'
import TabSharedAccount from '@screens/Tabs/Shared/Account' import TabSharedAccount from '@screens/Tabs/Shared/Account'
import TabSharedAttachments from '@screens/Tabs/Shared/Attachments' import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
@ -14,11 +23,6 @@ import { debounce } from 'lodash'
import React from 'react' import React from 'react'
import { Trans, useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
import { Platform, StyleSheet, Text, TextInput, View } from 'react-native' import { Platform, StyleSheet, Text, TextInput, View } from 'react-native'
import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript/native-stack'
import {
NativeStackNavigationEventMap,
NativeStackNavigatorProps
} from 'react-native-screens/lib/typescript/native-stack/types'
export type BaseScreens = export type BaseScreens =
| Nav.TabLocalStackParamList | Nav.TabLocalStackParamList
@ -52,175 +56,184 @@ export type SharedUsersProp = StackScreenProps<BaseScreens, 'Tab-Shared-Users'>
const sharedScreens = ( const sharedScreens = (
Stack: TypedNavigator< Stack: TypedNavigator<
BaseScreens, Nav.TabLocalStackParamList,
StackNavigationState<Record<string, object | undefined>>, StackNavigationState<ParamListBase>,
NativeStackNavigationOptions, NativeStackNavigationOptions,
NativeStackNavigationEventMap, NativeStackNavigationEventMap,
({ ...rest }: NativeStackNavigatorProps) => JSX.Element ({}: NativeStackNavigatorProps) => JSX.Element
> >
) => { ) => {
const { mode, theme } = useTheme() const { mode, theme } = useTheme()
const { t } = useTranslation('screenTabs') const { t } = useTranslation('screenTabs')
return [ return (
<Stack.Screen <Stack.Group>
key='Tab-Shared-Account' <Stack.Screen
name='Tab-Shared-Account' key='Tab-Shared-Account'
component={TabSharedAccount} name='Tab-Shared-Account'
options={({ navigation }: SharedAccountProp) => { component={TabSharedAccount}
return { options={({ navigation }: SharedAccountProp) => {
headerTranslucent: true, return {
headerStyle: { headerTransparent: true,
backgroundColor: `rgba(255, 255, 255, 0)` headerStyle: {
backgroundColor: `rgba(255, 255, 255, 0)`
},
headerTitle: '',
headerLeft: () => (
<HeaderLeft onPress={() => navigation.goBack()} background />
)
}
}}
/>
<Stack.Screen
key='Tab-Shared-Attachments'
name='Tab-Shared-Attachments'
component={TabSharedAttachments}
options={({
route: {
params: { account }
}, },
headerCenter: () => null, navigation
headerLeft: () => ( }: SharedAttachmentsProp) => {
<HeaderLeft onPress={() => navigation.goBack()} background /> return {
) headerLeft: () => (
} <HeaderLeft onPress={() => navigation.goBack()} />
}} ),
/>, headerTitle: () => (
<Stack.Screen <Text numberOfLines={1}>
key='Tab-Shared-Attachments' <Trans
name='Tab-Shared-Attachments' i18nKey='screenTabs:shared.attachments.name'
component={TabSharedAttachments} components={[
options={({ <ParseEmojis
route: { content={account.display_name || account.username}
params: { account } emojis={account.emojis}
}, fontBold
navigation />,
}: SharedAttachmentsProp) => { <Text
return { style={{
...StyleConstants.FontStyle.M,
color: theme.primaryDefault,
fontWeight: StyleConstants.Font.Weight.Bold
}}
/>
]}
/>
</Text>
)
}
}}
/>
<Stack.Screen
key='Tab-Shared-Hashtag'
name='Tab-Shared-Hashtag'
component={TabSharedHashtag}
options={({ route, navigation }: SharedHashtagProp) => ({
headerTitle: `#${decodeURIComponent(route.params.hashtag)}`,
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter
content={`#${decodeURIComponent(route.params.hashtag)}`}
/>
)
}),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})}
/>
<Stack.Screen
key='Tab-Shared-Search'
name='Tab-Shared-Search'
component={TabSharedSearch}
options={({ navigation }: SharedSearchProp) => ({
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />, headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
headerCenter: () => ( headerTitle: () => {
<Text numberOfLines={1}> const onChangeText = debounce(
<Trans (text: string) => navigation.setParams({ text }),
i18nKey='screenTabs:shared.attachments.name' 1000,
components={[ {
<ParseEmojis trailing: true
content={account.display_name || account.username} }
emojis={account.emojis} )
fontBold return (
/>, <View style={styles.searchBar}>
<Text <TextInput
style={{ editable={false}
...StyleConstants.FontStyle.M, style={[
styles.textInput,
{
color: theme.primaryDefault
}
]}
defaultValue={t('shared.search.header.prefix')}
/>
<TextInput
accessibilityRole='search'
keyboardAppearance={mode}
style={[
styles.textInput,
{
flex: 1,
color: theme.primaryDefault, color: theme.primaryDefault,
fontWeight: StyleConstants.Font.Weight.Bold paddingLeft: StyleConstants.Spacing.XS
}} }
/> ]}
]} autoFocus
/> onChangeText={onChangeText}
</Text> autoCapitalize='none'
) autoCorrect={false}
} clearButtonMode='never'
}} keyboardType='web-search'
/>, onSubmitEditing={({ nativeEvent: { text } }) =>
<Stack.Screen navigation.setParams({ text })
key='Tab-Shared-Hashtag'
name='Tab-Shared-Hashtag'
component={TabSharedHashtag}
options={({ route, navigation }: SharedHashtagProp) => ({
headerTitle: `#${decodeURIComponent(route.params.hashtag)}`,
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter
content={`#${decodeURIComponent(route.params.hashtag)}`}
/>
)
}),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})}
/>,
<Stack.Screen
key='Tab-Shared-Search'
name='Tab-Shared-Search'
component={TabSharedSearch}
options={({ navigation }: SharedSearchProp) => ({
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
headerCenter: () => {
const onChangeText = debounce(
(text: string) => navigation.setParams({ text }),
1000,
{
trailing: true
}
)
return (
<View style={styles.searchBar}>
<TextInput
editable={false}
style={[
styles.textInput,
{
color: theme.primaryDefault
} }
]} placeholder={t('shared.search.header.placeholder')}
defaultValue={t('shared.search.header.prefix')} placeholderTextColor={theme.secondary}
returnKeyType='go'
/>
</View>
)
}
})}
/>
<Stack.Screen
key='Tab-Shared-Toot'
name='Tab-Shared-Toot'
component={TabSharedToot}
options={({ navigation }: SharedTootProp) => ({
headerTitle: t('shared.toot.name'),
...(Platform.OS === 'android' && {
headerCenter: () => <HeaderCenter content={t('shared.toot.name')} />
}),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})}
/>
<Stack.Screen
key='Tab-Shared-Users'
name='Tab-Shared-Users'
component={TabSharedUsers}
options={({
navigation,
route: {
params: { reference, type, count }
}
}: SharedUsersProp) => ({
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
headerTitle: t(`shared.users.${reference}.${type}`, { count }),
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter
content={t(`shared.users.${reference}.${type}`, { count })}
/> />
<TextInput )
accessibilityRole='search' })
keyboardAppearance={mode} })}
style={[ />
styles.textInput, </Stack.Group>
{ )
flex: 1,
color: theme.primaryDefault,
paddingLeft: StyleConstants.Spacing.XS
}
]}
autoFocus
onChangeText={onChangeText}
autoCapitalize='none'
autoCorrect={false}
clearButtonMode='never'
keyboardType='web-search'
onSubmitEditing={({ nativeEvent: { text } }) =>
navigation.setParams({ text })
}
placeholder={t('shared.search.header.placeholder')}
placeholderTextColor={theme.secondary}
returnKeyType='go'
/>
</View>
)
}
})}
/>,
<Stack.Screen
key='Tab-Shared-Toot'
name='Tab-Shared-Toot'
component={TabSharedToot}
options={({ navigation }: SharedTootProp) => ({
headerTitle: t('shared.toot.name'),
...(Platform.OS === 'android' && {
headerCenter: () => <HeaderCenter content={t('shared.toot.name')} />
}),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})}
/>,
<Stack.Screen
key='Tab-Shared-Users'
name='Tab-Shared-Users'
component={TabSharedUsers}
options={({
navigation,
route: {
params: { reference, type, count }
}
}: SharedUsersProp) => ({
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
headerTitle: t(`shared.users.${reference}.${type}`, { count }),
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter
content={t(`shared.users.${reference}.${type}`, { count })}
/>
)
})
})}
/>
]
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({

462
yarn.lock
View File

File diff suppressed because it is too large Load Diff