Estoy usando @react-navigation/material-top-tabs y necesito personalizar el estilo predeterminado. imagen esperada

código,

 <Tab.Navigator style={{ marginTop: 100 }} tabBarOptions={{ activeTintColor: '#FFFFFF', labelStyle: { textTransform: 'none', }, inactiveTintColor: '#FFFFFF', indicatorStyle: { height: 30, top: '10%', bottom: '10%', width: '45%', left: '2.5%', borderRadius: 10, backgroundColor: '#0099CC', }, style: { alignSelf: 'center', width: '70%', borderRadius: 10, borderColor: 'blue', backgroundColor: '#434343', elevation: 5, // shadow on Android shadowOpacity: 0.1, // shadow on iOS, shadowRadius: 4, // shadow blur on iOS }, tabStyle: { borderRadius: 10, }, }} swipeEnabled={true}>

Cómo convertir esto para reaccionar a la navegación 6 y cómo agregarlo como componente personalizado. Nota: estaba usando reaccionar navegación 6