import { Colors } from '../../../theme';
import { Dimensions, PixelRatio } from 'react-native';

export const widthPercentageToDP = (widthPercent: number) => {
  const screenWidth = Dimensions.get('window').width;
  return PixelRatio.roundToNearestPixel((screenWidth * widthPercent) / 100);
};

export const navigationOpts = {
  tabBarStyle: { backgroundColor: 'rgba(0,0,0,0)' },
  tabBarIndicatorStyle: {
    backgroundColor: Colors.DARK_BLUE,
    width: widthPercentageToDP(23),
    marginHorizontal: 15
  },
  tabBarInactiveTintColor: 'rgba(15, 63, 79, 0.4)',
  tabBarActiveTintColor: Colors.DARK_BLUE,
  tabBarItemStyle: { height: 40 }
};
