React Native navigation fade transition with ternary

Viewed 244

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.

0 Answers
Related