estoy usando

 const Tab = createMaterialTopTabNavigator();

para crear una pestaña de navegación. Todo parece funcionar, pero no puedo alinear el indicador de la barra de pestañas con el elemento de la barra de pestañas individual. Según el diseño, se supone que el ancho del indicador tabBar es 100 , ¿hay alguna forma de hacerlo?

 const Faq = () => { return ( <SafeAreaView style={styles.container}> <View style={{ alignSelf: "flex-start", margin: 5 }}> <BackButton /> </View> <Text style={styles.title}>FAQ</Text> <Tab.Navigator screenOptions={({ route }) => ({ tabBarStyle: { height: 65, elevation: 0, marginBottom: 20, }, tabBarContentContainerStyle: {}, tabBarItemStyle: {}, tabBarIndicatorContainerStyle: { // borderWidth: 1, }, tabBarLabelStyle: styles.tabBarLabel, tabBarIndicatorStyle: styles.tabBarIndicator, tabBarActiveTintColor: "#3E3E3E", tabBarInactiveTintColor: "#A4A8AE", headerShown: false, })} > <Tab.Screen name="Shopping" component={BuyerScreen} /> <Tab.Screen name="Setting" component={BusinessScreen} /> </Tab.Navigator> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "white", paddingHorizontal: 20, }, title: { marginTop: 15, fontSize: 55, fontFamily: "PhotographSignature", letterSpacing: 1, textAlign: "center", color: "#3e3e3e", }, tabBarLabel: { fontSize: 16, fontFamily: "Raleway-Regular", textAlign: "center", lineHeight: 18.78, letterSpacing: 1, }, tabBarIndicatorContainerStyle: { borderColor: "black", borderWidth: 1, }, tabBarIndicator: { width: 100, height: 5, backgroundColor: "#B8D2C7", }, });