Code snippet for medium article

App.tsx

interface Props {
    navigation: NavigationScreenProp<any, any>;
}

class Home extends React.Component<Props> {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "space-around", alignItems: "center" }}>
                <Text style={{ fontSize: 48, fontWeight: "bold" }}>Home Screen</Text>
                <Button title="Profile" onPress={() => this.props.navigation.push("Profile")} />
                <Button title="Settings" onPress={() => this.props.navigation.push("Settings")} />
            </View>
        )
    }
}
class Profile extends React.Component<Props> {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "space-around", alignItems: "center" }}>
                <Text style={{ fontSize: 48, fontWeight: "bold" }}>Profile Screen</Text>
                <Button title="Home" onPress={() => this.props.navigation.push("Home")} />
                <Button title="Settings" onPress={() => this.props.navigation.push("Settings")} />
            </View>
        )
    }
}
class Settings extends React.Component<Props> {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "space-around", alignItems: "center" }}>
                <Text style={{ fontSize: 48, fontWeight: "bold" }}>Settings Screen</Text>
                <Button title="Home" onPress={() => this.props.navigation.push("Home")} />
                <Button title="Profile" onPress={() => this.props.navigation.push("Profile")} />
            </View>
        )
    }
}


const transitioner = (): TransitionConfig => {
    return {
        transitionSpec: {
            duration: 600,
            useNativeDriver: true
        },
        screenInterpolator: (transitionProps: NavigationTransitionProps) => {
            const { position, scene } = transitionProps;
            const index = scene.index;

            return {
                opacity: position.interpolate({
                    inputRange: [index - 1, index],
                    outputRange: [0, 1]
                })
            }
        }
    }
}


const myStack = createStackNavigator({
    Home,
    Settings,
    Profile
}, {
        transitionConfig: transitioner
    })
    
const prevGetStateForAction = myStack.router.getStateForAction;
myStack.router.getStateForAction = (action, state) => {
    if (state && action.type === "Navigation/COMPLETE_TRANSITION") {
        let routes = state.routes;

        if (routes.length === 1) {
            return {
                ...state,
                index: 0,
            };
        }

        const lastScene: NavigationRoute = routes.slice(-1)[0];
        const lastSceneName = lastScene.routeName;

        routes = routes.filter((item: NavigationRoute, index: number) => {
            if (index === 0) {
                return true;
            }

            return (item.routeName !== lastSceneName)
        });

        routes.push(lastScene);

        return {
            ...state,
            index: routes.length - 1,
            routes
        };
    }

    return prevGetStateForAction(action, state);
};

export default myStack;