The material top tabs for react native is working fine on IOS but not on android, here is the video i have recorded of me showing it : video The pages are switched when clicked on the tab but only the tabindicator is not working. The dependencies are all up-to-date,and someone mentioned downgrading react native pager view herebut it didnt work. the code and the version of dependencies:
import {SafeAreaView} from 'react-native';
import {useTheme} from 'react-native-paper';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Masonry from './Masonry'; // Assuming Masonry is a properly defined and exported component
const Tab = createMaterialTopTabNavigator();
const BrowseScreen = () => {
const theme = useTheme();
return (
<SafeAreaView style={{flex: 1, backgroundColor: theme.colors.background}}>
<Tab.Navigator
screenOptions={{
tabBarIndicatorStyle: {backgroundColor: 'pink'},
}}>
<Tab.Screen name="tab1" component={Masonry} />
<Tab.Screen name="tab2" component={Masonry} />
<Tab.Screen name="tab3" component={Masonry} />
</Tab.Navigator>
</SafeAreaView>
);
};
export default BrowseScreen;
"dependencies": {
"@react-native-community/blur": "^4.3.2",
"@react-native-community/datetimepicker": "^7.6.2",
"@react-native-community/netinfo": "^11.2.1",
"@react-native-masked-view/masked-view": "^0.3.1",
"@react-native-picker/picker": "^2.6.1",
"@react-native-seoul/masonry-list": "^1.4.2",
"@react-navigation/bottom-tabs": "^6.5.11",
"@react-navigation/elements": "^1.3.21",
"@react-navigation/material-top-tabs": "^6.6.5",
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.17",
"@react-navigation/stack": "^6.3.20",
"@shopify/flash-list": "^1.6.3",
"axios": "^1.6.2",
"react": "18.2.0",
"react-native": "0.73.0",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "^2.14.0",
"react-native-image-picker": "^7.1.0",
"react-native-pager-view": "^6.2.3",
"react-native-paper": "^5.11.4",
"react-native-safe-area-context": "^4.8.0",
"react-native-screens": "^3.29.0",
"react-native-svg": "^14.1.0",
"react-native-tab-view": "^3.5.2",
"react-native-vector-icons": "^10.0.3",
"react-native-webview": "^13.6.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/plugin-transform-runtime": "^7.23.6",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.23.6",
"@react-native/babel-preset": "^0.73.18",
"@react-native/eslint-config": "^0.73.1",
"@react-native/metro-config": "^0.73.2",
"@react-native/typescript-config": "^0.73.1",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-native-svg-transformer": "^1.2.0",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},
all my import are good and on IOS everything works fine.
Someone has a solution?