React Native Screen white blinking when moving between tabs - react-native

Question

im working on a App and im Using a BottomTabBar and in there are StackNavigators. When i switch the screens the screens gets white, it seems like they are loading. but i just want it without a loading animation or transition. i just want it like whatsapp or instagram so i can swap between my screens but i need a header for my application.
import React from "react";
import News from "../screens/News";
import Favorites from "../screens/Favorites";
import NewRecipe from "../screens/NewRecipe";
import Ingredients from "../screens/Ingredients";
import Profile from "../screens/Profile";
import { NavigationContainer } from "#react-navigation/native";
import { createMaterialBottomTabNavigator } from "#react-navigation/material-bottom-tabs";
import { MaterialIcons } from "#expo/vector-icons";
import { SafeAreaView } from "react-native-safe-area-context";
import { createStackNavigator } from "#react-navigation/stack";
export default function AppScreen() {
const Tab = createMaterialBottomTabNavigator();
const NewsStack = createStackNavigator();
const FavoritesStack = createStackNavigator();
const NewRecipeStack = createStackNavigator();
const IngredientsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function NewsNav() {
return (
<NewsStack.Navigator
screenOptions={{
animationEnabled: false,
}}
>
<NewsStack.Screen
name="News"
component={News}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
animationEnabled: false,
}}
/>
</NewsStack.Navigator>
);
}
function FavoritesNav() {
return (
<FavoritesStack.Navigator>
<FavoritesStack.Screen
name="Favoriten"
component={Favorites}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</FavoritesStack.Navigator>
);
}
function NewRecipeNav() {
return (
<NewRecipeStack.Navigator
screenOptions={{
cardStyle: {
opacity: 1,
},
}}
>
<NewRecipeStack.Screen
name="Neue Rezepte"
component={NewRecipe}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</NewRecipeStack.Navigator>
);
}
function IngredientsNav() {
return (
<IngredientsStack.Navigator>
<IngredientsStack.Screen
name="Zutaten"
component={Ingredients}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</IngredientsStack.Navigator>
);
}
function ProfileNav() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen
name="Profil"
component={Profile}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</ProfileStack.Navigator>
);
}
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({}) => {
let iconName;
if (route.name == "News") {
iconName = "language";
} else if (route.name == "Favoriten") {
iconName = "star-border";
} else if (route.name == "Hinzufügen") {
iconName = "add-circle-outline";
} else if (route.name == "Zutaten") {
iconName = "shopping-cart";
} else if (route.name == "Profil") {
iconName = "person";
}
return (
<MaterialIcons
name={iconName}
color={"#277093"}
size={25}
></MaterialIcons>
);
},
})}
tabBarOptions={{
activeTintColor: "green",
}}
barStyle={{ backgroundColor: "#272727" }}
>
<Tab.Screen
name="News"
component={NewsNav}
options={{ animationEnabled: false }}
/>
<Tab.Screen name="Favoriten" component={FavoritesNav} />
<Tab.Screen name="Hinzufügen" component={NewRecipeNav} />
<Tab.Screen name="Zutaten" component={IngredientsNav} />
<Tab.Screen name="Profil" component={ProfileNav} />
</Tab.Navigator>
</NavigationContainer>
);
}
nsition but i cant fix it

Answer 1

Lower react-native-screen package version to 2.18.1 . Solution was obtained from this discussion.
https://github.com/react-navigation/react-navigation/issues/9593
Other solutions like setting the theme in Navigation Container, setting the cardInterpolatorStyle, and other modifications to the screen options of the navigator did not work.
This issue was visible only on Android in my case.