mirror of https://github.com/tooot-app/app
React Navigation v6 first try
Android header needs attention
This commit is contained in:
Zhiyuan Zheng
parent
bc72e637bb
commit
b821fc4d16
|
|
@ -480,7 +480,7 @@ PODS:
|
|||
- React-RCTVibration
|
||||
- ReactCommon/turbomodule/core
|
||||
- Yoga
|
||||
- RNScreens (3.3.0):
|
||||
- RNScreens (3.5.0):
|
||||
- React-Core
|
||||
- React-RCTImage
|
||||
- RNSentry (2.4.3):
|
||||
|
|
@ -876,7 +876,7 @@ SPEC CHECKSUMS:
|
|||
RNFastImage: d4870d58f5936111c56218dbd7fcfc18e65b58ff
|
||||
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
|
||||
RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad
|
||||
RNScreens: bf59f17fbf001f1025243eeed5f19419d3c11ef2
|
||||
RNScreens: 01ab149b5dd5c27f5ff26741b1d2bdf2cee1af35
|
||||
RNSentry: 6f8f9ee7e4c939dcd35e5633b94d0e3782888e46
|
||||
RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
|
||||
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
|
||||
|
|
|
|||
177
package.json
177
package.json
|
|
@ -24,103 +24,104 @@
|
|||
"clean": "react-native-clean-project"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/react-native-action-sheet": "^3.9.0",
|
||||
"@neverdull-agency/expo-unlimited-secure-store": "^1.0.10",
|
||||
"@react-native-async-storage/async-storage": "^1.15.4",
|
||||
"@react-native-community/blur": "^3.6.0",
|
||||
"@react-native-community/cameraroll": "^4.0.4",
|
||||
"@expo/react-native-action-sheet": "3.9.0",
|
||||
"@neverdull-agency/expo-unlimited-secure-store": "1.0.10",
|
||||
"@react-native-async-storage/async-storage": "1.15.4",
|
||||
"@react-native-community/blur": "3.6.0",
|
||||
"@react-native-community/cameraroll": "4.0.4",
|
||||
"@react-native-community/masked-view": "0.1.11",
|
||||
"@react-native-community/netinfo": "6.0.0",
|
||||
"@react-native-community/segmented-control": "2.2.2",
|
||||
"@react-navigation/bottom-tabs": "^5.11.11",
|
||||
"@react-navigation/native": "^5.9.4",
|
||||
"@react-navigation/stack": "^5.14.5",
|
||||
"@reduxjs/toolkit": "^1.5.1",
|
||||
"@sentry/react-native": "^2.4.3",
|
||||
"@sharcoux/slider": "^5.3.0",
|
||||
"axios": "^0.21.1",
|
||||
"expo": "^41.0.1",
|
||||
"expo-auth-session": "~3.2.3",
|
||||
"expo-av": "~9.1.2",
|
||||
"expo-crypto": "~9.1.0",
|
||||
"expo-firebase-analytics": "~4.0.2",
|
||||
"expo-haptics": "~10.0.0",
|
||||
"expo-image-manipulator": "~9.1.0",
|
||||
"expo-image-picker": "~10.1.4",
|
||||
"expo-linking": "~2.2.3",
|
||||
"expo-localization": "~10.1.0",
|
||||
"expo-notifications": "~0.11.6",
|
||||
"expo-random": "~11.1.2",
|
||||
"expo-screen-capture": "^3.1.0",
|
||||
"expo-secure-store": "~10.1.0",
|
||||
"expo-splash-screen": "~0.10.2",
|
||||
"expo-status-bar": "~1.0.4",
|
||||
"expo-store-review": "~4.0.2",
|
||||
"expo-video-thumbnails": "~5.1.0",
|
||||
"expo-web-browser": "~9.1.0",
|
||||
"i18next": "^20.3.0",
|
||||
"li": "^1.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"@react-navigation/bottom-tabs": "6.0.5",
|
||||
"@react-navigation/native": "6.0.2",
|
||||
"@react-navigation/native-stack": "^6.1.0",
|
||||
"@react-navigation/stack": "6.0.7",
|
||||
"@reduxjs/toolkit": "1.5.1",
|
||||
"@sentry/react-native": "2.4.3",
|
||||
"@sharcoux/slider": "5.3.0",
|
||||
"axios": "0.21.1",
|
||||
"expo": "41.0.1",
|
||||
"expo-auth-session": "3.2.3",
|
||||
"expo-av": "9.1.2",
|
||||
"expo-crypto": "9.1.0",
|
||||
"expo-firebase-analytics": "4.0.2",
|
||||
"expo-haptics": "10.0.0",
|
||||
"expo-image-manipulator": "9.1.0",
|
||||
"expo-image-picker": "10.1.4",
|
||||
"expo-linking": "2.2.3",
|
||||
"expo-localization": "10.1.0",
|
||||
"expo-notifications": "0.11.6",
|
||||
"expo-random": "11.1.2",
|
||||
"expo-screen-capture": "3.1.0",
|
||||
"expo-secure-store": "10.1.0",
|
||||
"expo-splash-screen": "0.10.2",
|
||||
"expo-status-bar": "1.0.4",
|
||||
"expo-store-review": "4.0.2",
|
||||
"expo-video-thumbnails": "5.1.0",
|
||||
"expo-web-browser": "9.1.0",
|
||||
"i18next": "20.3.0",
|
||||
"li": "1.3.0",
|
||||
"lodash": "4.17.21",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-i18next": "^11.9.0",
|
||||
"react-native": "~0.64.1",
|
||||
"react-native-animated-spinkit": "^1.5.2",
|
||||
"react-native-blurhash": "^1.1.4",
|
||||
"react-native-fast-image": "^8.3.4",
|
||||
"react-native-feather": "^1.0.2",
|
||||
"react-native-flash-message": "^0.1.23",
|
||||
"react-native-gesture-handler": "~1.10.3",
|
||||
"react-native-htmlview": "^0.16.0",
|
||||
"react-i18next": "11.9.0",
|
||||
"react-native": "0.64.1",
|
||||
"react-native-animated-spinkit": "1.5.2",
|
||||
"react-native-blurhash": "1.1.4",
|
||||
"react-native-fast-image": "8.3.4",
|
||||
"react-native-feather": "1.0.2",
|
||||
"react-native-flash-message": "0.1.23",
|
||||
"react-native-gesture-handler": "1.10.3",
|
||||
"react-native-htmlview": "0.16.0",
|
||||
"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-screens": "~3.3.0",
|
||||
"react-native-screens": "^3.5.0",
|
||||
"react-native-svg": "12.1.1",
|
||||
"react-native-swipe-list-view": "^3.2.7",
|
||||
"react-native-tab-view": "^3.0.1",
|
||||
"react-native-unimodules": "~0.13.3",
|
||||
"react-query": "^3.16.0",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-timeago": "^5.2.0",
|
||||
"redux-persist": "^6.0.0",
|
||||
"rn-placeholder": "^3.0.3",
|
||||
"sentry-expo": "^3.1.3",
|
||||
"tslib": "^2.2.0",
|
||||
"valid-url": "^1.0.9"
|
||||
"react-native-swipe-list-view": "3.2.7",
|
||||
"react-native-tab-view": "3.0.1",
|
||||
"react-native-unimodules": "0.13.3",
|
||||
"react-query": "3.16.0",
|
||||
"react-redux": "7.2.4",
|
||||
"react-timeago": "5.2.0",
|
||||
"redux-persist": "6.0.0",
|
||||
"rn-placeholder": "3.0.3",
|
||||
"sentry-expo": "3.1.3",
|
||||
"tslib": "2.2.0",
|
||||
"valid-url": "1.0.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "~7.14.3",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.14.2",
|
||||
"@babel/preset-typescript": "^7.13.0",
|
||||
"@expo/config": "^3.3.43",
|
||||
"@jest/types": "^26.6.2",
|
||||
"@testing-library/jest-native": "^4.0.1",
|
||||
"@testing-library/react-hooks": "^5.1.2",
|
||||
"@testing-library/react-native": "^7.2.0",
|
||||
"@types/jest": "^26.0.23",
|
||||
"@types/lodash": "^4.14.170",
|
||||
"@types/react": "~17.0.8",
|
||||
"@types/react-dom": "~17.0.5",
|
||||
"@types/react-native": "~0.64.6",
|
||||
"@types/react-navigation": "^3.4.0",
|
||||
"@types/react-redux": "^7.1.16",
|
||||
"@types/react-test-renderer": "^17.0.1",
|
||||
"@types/react-timeago": "^4.1.2",
|
||||
"@types/valid-url": "^1.0.3",
|
||||
"@welldone-software/why-did-you-render": "^6.1.4",
|
||||
"babel-jest": "~26.6.3",
|
||||
"babel-plugin-module-resolver": "^4.1.0",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"chalk": "^4.1.1",
|
||||
"dotenv": "^10.0.0",
|
||||
"jest": "^26.6.3",
|
||||
"jest-expo": "^41.0.0",
|
||||
"nock": "^13.0.11",
|
||||
"react-native-clean-project": "^3.6.4",
|
||||
"react-navigation": "^4.4.4",
|
||||
"react-navigation-stack": "^2.10.4",
|
||||
"react-test-renderer": "^17.0.2",
|
||||
"typescript": "~4.2.4"
|
||||
"@babel/core": "7.14.3",
|
||||
"@babel/plugin-proposal-optional-chaining": "7.14.2",
|
||||
"@babel/preset-typescript": "7.13.0",
|
||||
"@expo/config": "3.3.43",
|
||||
"@jest/types": "26.6.2",
|
||||
"@testing-library/jest-native": "4.0.1",
|
||||
"@testing-library/react-hooks": "5.1.2",
|
||||
"@testing-library/react-native": "7.2.0",
|
||||
"@types/jest": "26.0.23",
|
||||
"@types/lodash": "4.14.170",
|
||||
"@types/react": "17.0.8",
|
||||
"@types/react-dom": "17.0.5",
|
||||
"@types/react-native": "0.64.6",
|
||||
"@types/react-navigation": "3.4.0",
|
||||
"@types/react-redux": "7.1.16",
|
||||
"@types/react-test-renderer": "17.0.1",
|
||||
"@types/react-timeago": "4.1.2",
|
||||
"@types/valid-url": "1.0.3",
|
||||
"@welldone-software/why-did-you-render": "6.1.4",
|
||||
"babel-jest": "26.6.3",
|
||||
"babel-plugin-module-resolver": "4.1.0",
|
||||
"babel-plugin-transform-remove-console": "6.9.4",
|
||||
"chalk": "4.1.1",
|
||||
"dotenv": "10.0.0",
|
||||
"jest": "26.6.3",
|
||||
"jest-expo": "41.0.0",
|
||||
"nock": "13.0.11",
|
||||
"react-native-clean-project": "3.6.4",
|
||||
"react-navigation": "4.4.4",
|
||||
"react-navigation-stack": "2.10.4",
|
||||
"react-test-renderer": "17.0.2",
|
||||
"typescript": "4.2.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
||||
import { HeaderLeft } from '@components/Header'
|
||||
import { displayMessage, Message, removeMessage } from '@components/Message'
|
||||
import navigationRef from '@helpers/navigationRef'
|
||||
import { useNetInfo } from '@react-native-community/netinfo'
|
||||
import { NavigationContainer } from '@react-navigation/native'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import ScreenActions from '@screens/Actions'
|
||||
import ScreenAnnouncements from '@screens/Announcements'
|
||||
import ScreenCompose from '@screens/Compose'
|
||||
|
|
@ -22,7 +23,6 @@ import { addScreenshotListener } from 'expo-screen-capture'
|
|||
import React, { useCallback, useEffect, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Alert, Platform, StatusBar } from 'react-native'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import { onlineManager, useQueryClient } from 'react-query'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import * as Sentry from 'sentry-expo'
|
||||
|
|
@ -166,8 +166,8 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
|
|||
name='Screen-Actions'
|
||||
component={ScreenActions}
|
||||
options={{
|
||||
stackPresentation: 'transparentModal',
|
||||
stackAnimation: 'fade',
|
||||
presentation: 'transparentModal',
|
||||
animation: 'fade',
|
||||
headerShown: false
|
||||
}}
|
||||
/>
|
||||
|
|
@ -175,38 +175,33 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
|
|||
name='Screen-Announcements'
|
||||
component={ScreenAnnouncements}
|
||||
options={({ navigation }) => ({
|
||||
stackPresentation: 'transparentModal',
|
||||
stackAnimation: 'fade',
|
||||
presentation: 'transparentModal',
|
||||
animation: 'fade',
|
||||
headerShown: true,
|
||||
headerHideShadow: true,
|
||||
headerTopInsetEnabled: false,
|
||||
headerShadowVisible: false,
|
||||
headerTransparent: true,
|
||||
headerStyle: { backgroundColor: 'transparent' },
|
||||
headerLeft: () => (
|
||||
<HeaderLeft content='X' onPress={() => navigation.goBack()} />
|
||||
),
|
||||
headerTitle: t('screenAnnouncements:heading'),
|
||||
...(Platform.OS === 'android' && {
|
||||
headerCenter: () => (
|
||||
<HeaderCenter content={t('screenAnnouncements:heading')} />
|
||||
)
|
||||
})
|
||||
headerTitle: t('screenAnnouncements:heading')
|
||||
})}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name='Screen-Compose'
|
||||
component={ScreenCompose}
|
||||
options={{
|
||||
stackPresentation: 'fullScreenModal',
|
||||
...(Platform.OS === 'android' && { headerShown: false })
|
||||
headerShown: false,
|
||||
presentation: 'fullScreenModal'
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name='Screen-ImagesViewer'
|
||||
component={ScreenImagesViewer}
|
||||
options={{
|
||||
stackPresentation: 'fullScreenModal',
|
||||
stackAnimation: 'fade',
|
||||
...(Platform.OS === 'android' && { headerShown: false })
|
||||
headerShown: false,
|
||||
presentation: 'fullScreenModal',
|
||||
animation: 'fade'
|
||||
}}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import analytics from '@components/analytics'
|
||||
import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import { StackScreenProps } from '@react-navigation/stack'
|
||||
import haptics from '@root/components/haptics'
|
||||
import formatText from '@screens/Compose/formatText'
|
||||
|
|
@ -31,7 +32,6 @@ import {
|
|||
StyleSheet
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import * as Sentry from 'sentry-expo'
|
||||
|
|
@ -371,10 +371,7 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
|
|||
edges={hasKeyboard ? ['top'] : ['top', 'bottom']}
|
||||
>
|
||||
<ComposeContext.Provider value={{ composeState, composeDispatch }}>
|
||||
<Stack.Navigator
|
||||
screenOptions={{ headerTopInsetEnabled: false }}
|
||||
initialRouteName='Screen-Compose-Root'
|
||||
>
|
||||
<Stack.Navigator initialRouteName='Screen-Compose-Root'>
|
||||
<Stack.Screen
|
||||
name='Screen-Compose-Root'
|
||||
component={ComposeRoot}
|
||||
|
|
@ -405,18 +402,12 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
|
|||
<Stack.Screen
|
||||
name='Screen-Compose-DraftsList'
|
||||
component={ComposeDraftsList}
|
||||
options={{
|
||||
stackPresentation: 'modal',
|
||||
...(Platform.OS === 'android' && { headerShown: false })
|
||||
}}
|
||||
options={{ headerShown: false, presentation: 'modal' }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name='Screen-Compose-EditAttachment'
|
||||
component={ComposeEditAttachment}
|
||||
options={{
|
||||
stackPresentation: 'modal',
|
||||
...(Platform.OS === 'android' && { headerShown: false })
|
||||
}}
|
||||
options={{ headerShown: false, presentation: 'modal' }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</ComposeContext.Provider>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import { StackScreenProps } from '@react-navigation/stack'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform } from 'react-native'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import ComposeDraftsListRoot from './DraftsList/Root'
|
||||
|
||||
const Stack = createNativeStackNavigator()
|
||||
|
|
@ -37,7 +37,7 @@ const ComposeDraftsList: React.FC<ScreenComposeEditAttachmentProp> = ({
|
|||
)
|
||||
|
||||
return (
|
||||
<Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name='Screen-Compose-EditAttachment-Root'
|
||||
children={children}
|
||||
|
|
@ -49,7 +49,7 @@ const ComposeDraftsList: React.FC<ScreenComposeEditAttachmentProp> = ({
|
|||
<HeaderCenter content={t('content.draftsList.header.title')} />
|
||||
)
|
||||
}),
|
||||
headerHideShadow: true
|
||||
headerShadowVisible: false
|
||||
}}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
|
|
|
|||
|
|
@ -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 React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { KeyboardAvoidingView, Platform } from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import ComposeEditAttachmentRoot from './EditAttachment/Root'
|
||||
import ComposeEditAttachmentSubmit from './EditAttachment/Submit'
|
||||
|
||||
|
|
@ -45,21 +45,14 @@ const ComposeEditAttachment: React.FC<ScreenComposeEditAttachmentProp> = ({
|
|||
style={{ flex: 1 }}
|
||||
>
|
||||
<SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
|
||||
<Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name='Screen-Compose-EditAttachment-Root'
|
||||
children={children}
|
||||
options={{
|
||||
headerLeft,
|
||||
headerRight: () => <ComposeEditAttachmentSubmit index={index} />,
|
||||
headerTitle: t('content.editAttachment.header.title'),
|
||||
...(Platform.OS === 'android' && {
|
||||
headerCenter: () => (
|
||||
<HeaderCenter
|
||||
content={t('content.editAttachment.header.title')}
|
||||
/>
|
||||
)
|
||||
})
|
||||
headerTitle: t('content.editAttachment.header.title')
|
||||
}}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,12 @@ const ScreenTabs = React.memo(
|
|||
|
||||
const screenOptions = useCallback(
|
||||
({ 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: ({
|
||||
focused,
|
||||
color,
|
||||
|
|
@ -95,15 +100,7 @@ const ScreenTabs = React.memo(
|
|||
}),
|
||||
[instanceAccount?.avatarStatic, instanceActive]
|
||||
)
|
||||
const tabBarOptions = useMemo(
|
||||
() => ({
|
||||
activeTintColor: theme.primaryDefault,
|
||||
inactiveTintColor: theme.secondary,
|
||||
showLabel: false,
|
||||
...(Platform.OS === 'android' && { keyboardHidesTabBar: true })
|
||||
}),
|
||||
[mode]
|
||||
)
|
||||
|
||||
const composeListeners = useMemo(
|
||||
() => ({
|
||||
tabPress: (e: any) => {
|
||||
|
|
@ -133,7 +130,6 @@ const ScreenTabs = React.memo(
|
|||
<Tab.Navigator
|
||||
initialRouteName={instanceActive !== -1 ? previousTab : 'Tab-Me'}
|
||||
screenOptions={screenOptions}
|
||||
tabBarOptions={tabBarOptions}
|
||||
>
|
||||
<Tab.Screen name='Tab-Local' component={TabLocal} />
|
||||
<Tab.Screen name='Tab-Public' component={TabPublic} />
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { HeaderCenter, HeaderRight } from '@components/Header'
|
|||
import Timeline from '@components/Timeline'
|
||||
import TimelineDefault from '@components/Timeline/Default'
|
||||
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import { ScreenTabsParamList } from '@screens/Tabs'
|
||||
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
||||
import React, { useCallback, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform } from 'react-native'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import sharedScreens from './Shared/sharedScreens'
|
||||
|
||||
export type TabLocalProp = BottomTabScreenProps<
|
||||
|
|
@ -22,13 +22,6 @@ const TabLocal = React.memo(
|
|||
({ navigation }: TabLocalProp) => {
|
||||
const { t, i18n } = useTranslation('screenTabs')
|
||||
|
||||
const screenOptions = useMemo(
|
||||
() => ({
|
||||
headerHideShadow: true,
|
||||
headerTopInsetEnabled: false
|
||||
}),
|
||||
[]
|
||||
)
|
||||
const screenOptionsRoot = useMemo(
|
||||
() => ({
|
||||
headerTitle: t('tabs.local.name'),
|
||||
|
|
@ -64,7 +57,7 @@ const TabLocal = React.memo(
|
|||
)
|
||||
|
||||
return (
|
||||
<Stack.Navigator screenOptions={screenOptions}>
|
||||
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
|
||||
<Stack.Screen
|
||||
name='Tab-Local-Root'
|
||||
options={screenOptionsRoot}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform } from 'react-native'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import TabMeBookmarks from './Me/Bookmarks'
|
||||
import TabMeConversations from './Me/Cconversations'
|
||||
import TabMeFavourites from './Me/Favourites'
|
||||
|
|
@ -23,16 +23,14 @@ const TabMe = React.memo(
|
|||
const { t } = useTranslation('screenTabs')
|
||||
|
||||
return (
|
||||
<Stack.Navigator
|
||||
screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
|
||||
>
|
||||
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
|
||||
<Stack.Screen
|
||||
name='Tab-Me-Root'
|
||||
component={TabMeRoot}
|
||||
options={{
|
||||
headerTranslucent: true,
|
||||
headerShadowVisible: false,
|
||||
headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
|
||||
headerCenter: () => null
|
||||
headerShown: false
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
|
|
@ -108,15 +106,15 @@ const TabMe = React.memo(
|
|||
name='Tab-Me-Profile'
|
||||
component={TabMeProfile}
|
||||
options={{
|
||||
stackPresentation: 'modal',
|
||||
...(Platform.OS === 'android' && { headerShown: false })
|
||||
headerShown: false,
|
||||
presentation: 'modal'
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name='Tab-Me-Push'
|
||||
component={TabMePush}
|
||||
options={({ navigation }) => ({
|
||||
stackPresentation: 'modal',
|
||||
presentation: 'modal',
|
||||
headerShown: true,
|
||||
headerTitle: t('me.stacks.push.name'),
|
||||
...(Platform.OS === 'android' && {
|
||||
|
|
@ -162,7 +160,7 @@ const TabMe = React.memo(
|
|||
name='Tab-Me-Switch'
|
||||
component={TabMeSwitch}
|
||||
options={({ navigation }) => ({
|
||||
stackPresentation: 'modal',
|
||||
presentation: 'modal',
|
||||
headerShown: true,
|
||||
headerTitle: t('me.stacks.switch.name'),
|
||||
...(Platform.OS === 'android' && {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
||||
import { Message } from '@components/Message'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import { StackScreenProps } from '@react-navigation/stack'
|
||||
import React, { useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { KeyboardAvoidingView, Platform } from 'react-native'
|
||||
import FlashMessage from 'react-native-flash-message'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import TabMeProfileFields from './Profile/Fields'
|
||||
import TabMeProfileName from './Profile/Name'
|
||||
import TabMeProfileNote from './Profile/Note'
|
||||
|
|
@ -25,9 +25,7 @@ const TabMeProfile: React.FC<StackScreenProps<
|
|||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<Stack.Navigator
|
||||
screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
|
||||
>
|
||||
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
|
||||
<Stack.Screen
|
||||
name='Tab-Me-Profile-Root'
|
||||
options={{
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { HeaderCenter, HeaderRight } from '@components/Header'
|
|||
import Timeline from '@components/Timeline'
|
||||
import TimelineNotifications from '@components/Timeline/Notifications'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
|
||||
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
||||
import React, { useCallback, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform } from 'react-native'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
|
||||
const Stack = createNativeStackNavigator<Nav.TabNotificationsStackParamList>()
|
||||
|
||||
|
|
@ -17,13 +17,6 @@ const TabNotifications = React.memo(
|
|||
const navigation = useNavigation()
|
||||
const { t, i18n } = useTranslation('screenTabs')
|
||||
|
||||
const screenOptions = useMemo(
|
||||
() => ({
|
||||
headerHideShadow: true,
|
||||
headerTopInsetEnabled: false
|
||||
}),
|
||||
[]
|
||||
)
|
||||
const screenOptionsRoot = useMemo(
|
||||
() => ({
|
||||
headerTitle: t('tabs.notifications.name'),
|
||||
|
|
@ -62,7 +55,7 @@ const TabNotifications = React.memo(
|
|||
)
|
||||
|
||||
return (
|
||||
<Stack.Navigator screenOptions={screenOptions}>
|
||||
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
|
||||
<Stack.Screen
|
||||
name='Tab-Notifications-Root'
|
||||
children={children}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Timeline from '@components/Timeline'
|
|||
import TimelineDefault from '@components/Timeline/Default'
|
||||
import SegmentedControl from '@react-native-community/segmented-control'
|
||||
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import { ScreenTabsParamList } from '@screens/Tabs'
|
||||
import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
|
||||
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
||||
|
|
@ -11,7 +12,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
|
|||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Dimensions, StyleSheet } from 'react-native'
|
||||
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
||||
import { TabView } from 'react-native-tab-view'
|
||||
|
||||
export type TabPublicProps = BottomTabScreenProps<
|
||||
|
|
@ -40,16 +40,9 @@ const TabPublic = React.memo(
|
|||
key: 'Local'
|
||||
}
|
||||
]
|
||||
const screenOptions = useMemo(
|
||||
() => ({
|
||||
headerHideShadow: true,
|
||||
headerTopInsetEnabled: false
|
||||
}),
|
||||
[]
|
||||
)
|
||||
const screenOptionsRoot = useMemo(
|
||||
() => ({
|
||||
headerCenter: () => (
|
||||
headerTitle: () => (
|
||||
<SegmentedControl
|
||||
appearance={mode}
|
||||
values={pages.map(p => p.title)}
|
||||
|
|
@ -113,7 +106,7 @@ const TabPublic = React.memo(
|
|||
)
|
||||
|
||||
return (
|
||||
<Stack.Navigator screenOptions={screenOptions}>
|
||||
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
|
||||
<Stack.Screen
|
||||
name='Tab-Public-Root'
|
||||
options={screenOptionsRoot}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
||||
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 TabSharedAccount from '@screens/Tabs/Shared/Account'
|
||||
import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
|
||||
|
|
@ -14,11 +23,6 @@ import { debounce } from 'lodash'
|
|||
import React from 'react'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
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 =
|
||||
| Nav.TabLocalStackParamList
|
||||
|
|
@ -52,175 +56,184 @@ export type SharedUsersProp = StackScreenProps<BaseScreens, 'Tab-Shared-Users'>
|
|||
|
||||
const sharedScreens = (
|
||||
Stack: TypedNavigator<
|
||||
BaseScreens,
|
||||
StackNavigationState<Record<string, object | undefined>>,
|
||||
Nav.TabLocalStackParamList,
|
||||
StackNavigationState<ParamListBase>,
|
||||
NativeStackNavigationOptions,
|
||||
NativeStackNavigationEventMap,
|
||||
({ ...rest }: NativeStackNavigatorProps) => JSX.Element
|
||||
({}: NativeStackNavigatorProps) => JSX.Element
|
||||
>
|
||||
) => {
|
||||
const { mode, theme } = useTheme()
|
||||
const { t } = useTranslation('screenTabs')
|
||||
|
||||
return [
|
||||
<Stack.Screen
|
||||
key='Tab-Shared-Account'
|
||||
name='Tab-Shared-Account'
|
||||
component={TabSharedAccount}
|
||||
options={({ navigation }: SharedAccountProp) => {
|
||||
return {
|
||||
headerTranslucent: true,
|
||||
headerStyle: {
|
||||
backgroundColor: `rgba(255, 255, 255, 0)`
|
||||
return (
|
||||
<Stack.Group>
|
||||
<Stack.Screen
|
||||
key='Tab-Shared-Account'
|
||||
name='Tab-Shared-Account'
|
||||
component={TabSharedAccount}
|
||||
options={({ navigation }: SharedAccountProp) => {
|
||||
return {
|
||||
headerTransparent: true,
|
||||
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,
|
||||
headerLeft: () => (
|
||||
<HeaderLeft onPress={() => navigation.goBack()} background />
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>,
|
||||
<Stack.Screen
|
||||
key='Tab-Shared-Attachments'
|
||||
name='Tab-Shared-Attachments'
|
||||
component={TabSharedAttachments}
|
||||
options={({
|
||||
route: {
|
||||
params: { account }
|
||||
},
|
||||
navigation
|
||||
}: SharedAttachmentsProp) => {
|
||||
return {
|
||||
navigation
|
||||
}: SharedAttachmentsProp) => {
|
||||
return {
|
||||
headerLeft: () => (
|
||||
<HeaderLeft onPress={() => navigation.goBack()} />
|
||||
),
|
||||
headerTitle: () => (
|
||||
<Text numberOfLines={1}>
|
||||
<Trans
|
||||
i18nKey='screenTabs:shared.attachments.name'
|
||||
components={[
|
||||
<ParseEmojis
|
||||
content={account.display_name || account.username}
|
||||
emojis={account.emojis}
|
||||
fontBold
|
||||
/>,
|
||||
<Text
|
||||
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()} />,
|
||||
headerCenter: () => (
|
||||
<Text numberOfLines={1}>
|
||||
<Trans
|
||||
i18nKey='screenTabs:shared.attachments.name'
|
||||
components={[
|
||||
<ParseEmojis
|
||||
content={account.display_name || account.username}
|
||||
emojis={account.emojis}
|
||||
fontBold
|
||||
/>,
|
||||
<Text
|
||||
style={{
|
||||
...StyleConstants.FontStyle.M,
|
||||
headerTitle: () => {
|
||||
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
|
||||
}
|
||||
]}
|
||||
defaultValue={t('shared.search.header.prefix')}
|
||||
/>
|
||||
<TextInput
|
||||
accessibilityRole='search'
|
||||
keyboardAppearance={mode}
|
||||
style={[
|
||||
styles.textInput,
|
||||
{
|
||||
flex: 1,
|
||||
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()} />,
|
||||
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
|
||||
paddingLeft: StyleConstants.Spacing.XS
|
||||
}
|
||||
]}
|
||||
autoFocus
|
||||
onChangeText={onChangeText}
|
||||
autoCapitalize='none'
|
||||
autoCorrect={false}
|
||||
clearButtonMode='never'
|
||||
keyboardType='web-search'
|
||||
onSubmitEditing={({ nativeEvent: { text } }) =>
|
||||
navigation.setParams({ text })
|
||||
}
|
||||
]}
|
||||
defaultValue={t('shared.search.header.prefix')}
|
||||
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 })}
|
||||
/>
|
||||
<TextInput
|
||||
accessibilityRole='search'
|
||||
keyboardAppearance={mode}
|
||||
style={[
|
||||
styles.textInput,
|
||||
{
|
||||
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 })}
|
||||
/>
|
||||
)
|
||||
})
|
||||
})}
|
||||
/>
|
||||
]
|
||||
)
|
||||
})
|
||||
})}
|
||||
/>
|
||||
</Stack.Group>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
|
|
|||
Loading…
Reference in New Issue