React navigation reset first pops and then navigates - reactjs

Question

I am using react navigation in my app, and when i am using reset for clearing the stack and navigating to other screen , it is showing weird animation, like first all the screens that were in stack are poped and then it navigates to the new screen.
Here is the code
//code for resetting the stack
Login.js
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName: 'Home'})
],
})
this.props.navigation.dispatch(resetAction)
Route.js
Home: {
screen: Tab,
navigationOptions: {
...headerStyle,
}
},
Intro: {
screen: IntroScreen,
navigationOptions: {
header: null
}
},
LogIn: {
screen: LogIn,
navigationOptions: {
...headerStyle,
title: 'LogIn',
}
},
So it first goes to into screen and then to home screen, how to fix this so it directly goes to Home screen

Answer 1

If you remove
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName: 'Home'})
],
})
this.props.navigation.dispatch(resetAction)
from your Login.js then the stack navigator automatically goes to the first screen in the StackNavigator , which in this case will be your Home: {...} screen.
There is no need for you to reset the stack.
If you want to navigate to another screen by pressing a button for example then use
import React, { Component } from 'react';
import {
View,
Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class Initial extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Button
onPress={() => navigate('Login')}
title="Go to Login"
color="#357DED"
/>
</View>
);
}
}