MaterialTopBar Horizontal at top

[Ritik5Prasad]

Android

For iOS it's fine but in Android I got a border at tab bar I tried everything but it doesn't go away

Here is the code

import React, {useRef, useState} from 'react'; import CustomGradient from '../../components/global/CustomGradient'; import CustomSafeAreaView from '../../components/global/CustomSafeAreaView'; import { CollapsibleRef, MaterialTabBar, Tabs, } from 'react-native-collapsible-tab-view'; import ProfileDetails from '../../components/profile/ProfileDetails'; import ReelListTab from '../../components/profile/ReelListTab'; import {StyleSheet, TouchableOpacity} from 'react-native'; import {Colors} from '../../constants/Colors'; import Icon from 'react-native-vector-icons/Ionicons'; import {RFValue} from 'react-native-responsive-fontsize';

const MyTabs = [ { name: 'Reel', component: , icon: 'apps-sharp', }, { name: 'Liked', component: , icon: 'heart', }, { name: 'History', component: , icon: 'logo-tableau', }, ];

const ProfileScreen = () => { const containerRef = useRef(null); const [focusedIndex, setFocusedIndex] = useState(0);

const handleSetIndex = (newIndex: number) => { setFocusedIndex(newIndex); containerRef.current?.setIndex(newIndex); };

return (

} headerContainerStyle={styles.noOpacity} pagerProps={{ onPageSelected: event => { setFocusedIndex(event.nativeEvent.position); }, removeClippedSubviews: true, }} renderTabBar={props => ( ( handleSetIndex(index)}> )} /> )} containerStyle={{ backgroundColor: Colors.background, paddingVertical: 0, elevation: 0, shadowOffset: {height: 0, width: 0}, shadowColor: 'transparent', shadowOpacity: 0, }}> {MyTabs.map((item, index) => ( {item.component} ))}

); };

const styles = StyleSheet.create({ container: { paddingHorizontal: 0, overflow: 'hidden', paddingTop: 10, paddingVertical: 0, backgroundColor: Colors.background, }, indicatorStyle: { backgroundColor: 'white', height: 0.8, }, noOpacity: { shadowOpacity: 0, elevation: 0,

borderWidth: 0,

}, tabBar: { width: '33%', justifyContent: 'center', alignItems: 'center', padding: 10, }, });

export default ProfileScreen;