2021-04-09 21:43:12 +02:00
|
|
|
import GracefullyImage from '@components/GracefullyImage'
|
2021-01-30 01:29:15 +01:00
|
|
|
import haptics from '@components/haptics'
|
|
|
|
import Icon from '@components/Icon'
|
2022-08-07 01:18:10 +02:00
|
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
|
2022-12-11 01:08:38 +01:00
|
|
|
import { RootStackScreenProps, ScreenTabsStackParamList } from '@utils/navigation/navigators'
|
2022-12-28 23:41:36 +01:00
|
|
|
import { getGlobalStorage, useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
|
2021-01-30 01:29:15 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-12-21 14:42:44 +01:00
|
|
|
import React, { useCallback, useMemo } from 'react'
|
2021-05-09 21:59:03 +02:00
|
|
|
import { Platform } from 'react-native'
|
2022-12-28 23:41:36 +01:00
|
|
|
import TabLocal from './Local'
|
|
|
|
import TabMe from './Me'
|
|
|
|
import TabNotifications from './Notifications'
|
|
|
|
import TabPublic from './Public'
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-08-29 15:25:38 +02:00
|
|
|
const Tab = createBottomTabNavigator<ScreenTabsStackParamList>()
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2022-12-24 01:18:20 +01:00
|
|
|
const ScreenTabs = ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
|
|
|
|
const { colors } = useTheme()
|
2021-03-02 01:17:06 +01:00
|
|
|
|
2022-12-28 23:41:36 +01:00
|
|
|
const [accountActive] = useGlobalStorage.string('account.active')
|
|
|
|
const [avatarStatic] = useAccountStorage.string('auth.account.avatar_static')
|
2021-02-28 17:41:21 +01:00
|
|
|
|
2022-12-24 01:18:20 +01:00
|
|
|
const composeListeners = useMemo(
|
|
|
|
() => ({
|
|
|
|
tabPress: (e: any) => {
|
|
|
|
e.preventDefault()
|
|
|
|
haptics('Light')
|
|
|
|
navigation.navigate('Screen-Compose')
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
const composeComponent = useCallback(() => null, [])
|
2021-02-10 00:40:44 +01:00
|
|
|
|
2022-12-24 01:18:20 +01:00
|
|
|
const meListeners = useMemo(
|
|
|
|
() => ({
|
|
|
|
tabLongPress: () => {
|
|
|
|
haptics('Light')
|
|
|
|
//@ts-ignore
|
|
|
|
navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })
|
|
|
|
//@ts-ignore
|
|
|
|
navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
[]
|
|
|
|
)
|
2022-02-02 22:47:30 +01:00
|
|
|
|
2022-12-24 01:18:20 +01:00
|
|
|
return (
|
|
|
|
<Tab.Navigator
|
2022-12-28 23:41:36 +01:00
|
|
|
initialRouteName={accountActive ? getGlobalStorage.string('app.prev_tab') : 'Tab-Me'}
|
2022-12-24 01:18:20 +01:00
|
|
|
screenOptions={({ route }) => ({
|
|
|
|
headerShown: false,
|
|
|
|
tabBarActiveTintColor: colors.primaryDefault,
|
|
|
|
tabBarInactiveTintColor: colors.secondary,
|
|
|
|
tabBarShowLabel: false,
|
|
|
|
...(Platform.OS === 'android' && { tabBarHideOnKeyboard: true }),
|
2022-12-28 23:41:36 +01:00
|
|
|
tabBarStyle: { display: accountActive ? 'flex' : 'none' },
|
2022-12-24 01:18:20 +01:00
|
|
|
tabBarIcon: ({
|
|
|
|
focused,
|
|
|
|
color,
|
|
|
|
size
|
|
|
|
}: {
|
|
|
|
focused: boolean
|
|
|
|
color: string
|
|
|
|
size: number
|
|
|
|
}) => {
|
|
|
|
switch (route.name) {
|
|
|
|
case 'Tab-Local':
|
|
|
|
return <Icon name='Home' size={size} color={color} />
|
|
|
|
case 'Tab-Public':
|
|
|
|
return <Icon name='Globe' size={size} color={color} />
|
|
|
|
case 'Tab-Compose':
|
|
|
|
return <Icon name='Plus' size={size} color={color} />
|
|
|
|
case 'Tab-Notifications':
|
|
|
|
return <Icon name='Bell' size={size} color={color} />
|
|
|
|
case 'Tab-Me':
|
|
|
|
return (
|
|
|
|
<GracefullyImage
|
2022-12-28 23:41:36 +01:00
|
|
|
uri={{ original: avatarStatic }}
|
2022-12-24 01:18:20 +01:00
|
|
|
dimension={{
|
|
|
|
width: size,
|
|
|
|
height: size
|
|
|
|
}}
|
|
|
|
style={{
|
|
|
|
borderRadius: size,
|
|
|
|
overflow: 'hidden',
|
|
|
|
borderWidth: focused ? 2 : 0,
|
|
|
|
borderColor: focused ? colors.secondary : color
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
default:
|
|
|
|
return <Icon name='AlertOctagon' size={size} color={color} />
|
2022-08-07 01:18:10 +02:00
|
|
|
}
|
2022-12-24 01:18:20 +01:00
|
|
|
}
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<Tab.Screen name='Tab-Local' component={TabLocal} />
|
|
|
|
<Tab.Screen name='Tab-Public' component={TabPublic} />
|
|
|
|
<Tab.Screen name='Tab-Compose' component={composeComponent} listeners={composeListeners} />
|
|
|
|
<Tab.Screen name='Tab-Notifications' component={TabNotifications} />
|
|
|
|
<Tab.Screen name='Tab-Me' component={TabMe} listeners={meListeners} />
|
|
|
|
</Tab.Navigator>
|
|
|
|
)
|
|
|
|
}
|
2021-01-30 01:29:15 +01:00
|
|
|
|
|
|
|
export default ScreenTabs
|