React Navigation Issue with NavigationActions - react-native

Question

I have an application in which I am trying to apply navigation in some case. For example, A, B, C, D are my tabs and in the tab A, I have 3 pages as 1, 2, 3. Now in a situation where I am on tab A and on page 3, there is one button present in which I have to navigate back to page 1 on the same tab itself (A).
But somehow, my navigation is not working in this case. Below are my codes:
SkippedTask.js
import React from "react";
import {
View,
StyleSheet,
Text,
AsyncStorage,
Dimensions,
Image,
ScrollView,
Alert
} from "react-native";
import ButtonC from "../../components/ButtonC";
import { NavigationActions } from "react-navigation";
import Server from "../../provider/Server";
var { width, height } = Dimensions.get("window");
export default class SkippedTask extends React.Component {
constructor(props) {
super(props);
this.state = {
loadingState: false,
api: new Server(),
mobile: "",
arrayLenght: "",
tasklist: [],
taskTitle: []
};
}
renderSkippedQues() {
return (
<View style={{ marginTop: 0 }}>
{this.state.taskTitle.map((item, key) => (
<View key={key} style={{ marginTop: 0 }}>
<Text style={{}}>
<Text style={{ fontSize: 18, color: "#000" }}>{"\u2022"} </Text>{" "}
{item}
</Text>
</View>
))}
</View>
);
}
handleNav = () => {
this.props.navigation.dispatch(
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "DashboardTab" })]
})
);
};
render() {
if (this.state.arrayLenght <= 0) {
return <View />;
} else {
return (
<ScrollView>
<View
style={{
justifyContent: "center",
alignItems: "center",
marginTop: height / 40
}}
>
<Text style={{ fontSize: 16, color: "black", marginTop: 30 }}>
List of skipped task are :
</Text>
{this.renderSkippedQues()}
<View style={{ marginTop: 40 }} />
<ButtonC
title=" Click here to complete remaining task "
onPress={this.handleNav}
/>
</View>
</ScrollView>
);
}
}
}
Below is my App.js file in which I am using StackNavigator of react-navigation.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import SessionCheck from './src/screens/SessionCheck';
import LoginScreen from './src/screens/LoginScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import WalletsScreen from './src/screens/WalletsScreen';
import DashboardAccept from './src/screens/DashboardAccept';
import TermsConditionsScreen from './src/screens/TermsConditionsScreen';
import DashboardTabScreen from './src/screens/DashboardTabScreen';
import Person from './src/components/profile/Person';
import Payment from './src/components/profile/Payment';
import List from './src/components/task/List';
const App = StackNavigator({
// DashboardTab: { screen:DashboardTabScreen },
Home: { screen: SessionCheck },
Login: { screen: LoginScreen },
Register: { screen: RegisterScreen },
Profile: { screen:ProfileScreen },
Wallets: { screen:WalletsScreen },
DashboardAccept: { screen:DashboardAccept },
TermsConditions: { screen:TermsConditionsScreen },
DashboardTab: { screen:DashboardTabScreen },
Person: {screen: Person},
Payment : {screen: Payment},
AllTask:{screen: List}
});
export default App;
Now my case lies that I need to navigate from the SkippedTask page to AllTask screen as mentioned in the App.js file. But somehow I am not able to resolve this issue.
Any leads are appreciated. Thanks.