import React from 'react' ; import { StyleSheet , Text , TouchableOpacity , View } from 'react-native' ; import { useSafeAreaInsets } from 'react-native-safe-area-context' ; import { useTheme } from 'stream-chat-react-native' ; import { UnreadCountBadge } from './UnreadCountBadge' ; import { ChatsTab } from '../icons/ChatsTab' ; import { MentionsTab } from '../icons/MentionsTab' ; import type { BottomTabBarProps } from '@react-navigation/bottom-tabs' ; const styles = StyleSheet . create ( { notification : { left : 25 , position : 'absolute' , } , tabContainer : { alignItems : 'center' , flex : 1 , justifyContent : 'center' , paddingVertical : 8 , } , tabListContainer : { borderTopColor : 'rgba(0, 0, 0, 0.0677)' , borderTopWidth : 1 , flexDirection : 'row' , } , tabTitle : { fontSize : 12 , marginTop : 7 , textAlign : 'center' , } , } ) ; export const BottomTabs = ( props ) => { const { navigation , state } = props ; const { theme : { colors : { black , grey , white } , } , } = useTheme ( ) ; const { bottom } = useSafeAreaInsets ( ) ; const getTab = ( key ) => { switch ( key ) { case 'ChatScreen' : return { icon : < ChatsTab />, iconActive : < ChatsTab active / > , notification : < UnreadCountBadge />, title : 'Chats' , } ; case 'MentionsScreen' : return { icon : < MentionsTab />, iconActive : < MentionsTab active / > , title : 'Mentions' , } ; default : return null ; } } ; return ( < View style = { [ styles . tabListContainer , { backgroundColor : white , paddingBottom : bottom , } , ] } > { state . routes . map ( ( route , index ) => { const tab = getTab ( route . name ) ; if ( ! tab ) return null ; const isFocused = state . index === index ; const onPress = ( ) => { navigation . emit ( { canPreventDefault : true , target : route . key , type : 'tabPress' , } ) ; if ( ! isFocused ) { navigation . navigate ( route . name ) ; } } ; return ( < TouchableOpacity key = { index } onPress = { onPress } style = { styles . tabContainer } > < View > { isFocused ? tab . iconActive : tab . icon } { tab . notification && < View style = { styles . notification } > { tab . notification } < /View>} < /View> < Text style = { [ styles . tabTitle , { color : isFocused ? black : grey , } , ] } > { tab . title } < /Text> < /TouchableOpacity>); } ) } < /View>); } ;