I have the following code to create a simple splash screen using a ternary based on a piece of state called isLoading.
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
{state.isLoading ? (
<Stack.Screen name="Splash" component={SplashScreen} />
) : (
<Stack.Screen name="App" component={App} />
)}
</Stack.Navigator>
</NavigationContainer>
)
}
I want to create a transition that will fade the splash screen into the app view, because the default is a slide animation. I've seen this stack overflow post, but it doesn't work in my case since I'm not actually navigating between screens, rather I'm replacing them.
I also want to keep using this ternary style because it's "protected routes" for a sign in system.
I've gotten close with the animationTypeForReplace option for a Screen, but it seems like it can only be 'push' or 'pop', not some sort of fade or no transition.