37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import { View, Text } from 'react-native'
|
|
import { TabBar as TVTabBar} from 'react-native-tab-view'
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style';
|
|
|
|
interface Props {
|
|
/**
|
|
* The properties from the individual tab bar in tabs.
|
|
*/
|
|
item: Object
|
|
}
|
|
|
|
const TabBar = (props: Props) => {
|
|
const { item } = props;
|
|
|
|
const RenderLabel = ({route, focused}) => {
|
|
return (
|
|
<View style={{alignItems: 'center'}}>
|
|
<Elements.icon resizeMode="contain" name={focused ? route.activeIcon : route.inActiveIcon} size={20} />
|
|
<Text style={{fontSize: 13, padding: 5, color: focused ? "white" : Theme.colors.lightGray, fontFamily: 'Arial'}}>{route.title}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<TVTabBar
|
|
{...item}
|
|
activeColor="white"
|
|
style={{backgroundColor: Theme.colors.primary}}
|
|
indicatorStyle={{ backgroundColor: 'white'}}
|
|
renderLabel={(labelProps) => RenderLabel(labelProps)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default TabBar |