react-navigation go Back not navigate to previous screen - react-native

Question

I'm using new react-navigation 2.16.0 in my react-native app.
I have welcome (login and register) screen and then Main stack. main stack include all screens after success auth(login\register).
MainStack = createStackNavigator(
{
Welcome: {
screen: Welcome, navigationOptions: {
gesturesEnabled: false,
}
},
Main: {
screen: App, navigationOptions: {
gesturesEnabled: false,
}
}
}, {
headerMode: 'none',
lazy: true,
initialRouteName: UserStore.token ? 'Main' : 'Welcome',
gesturesEnabled: false,
cardStack: {
gesturesEnabled: false
},
cardStyle: {
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
borderTopWidth: 0
},
transitionConfig: () => ({
containerStyle: {
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
borderTopWidth: 0
}
}),
}
)`
Main stack render
render() {
// const splashDone = this.state.splashDone && this.state.backSplash
const ready = UserStore.storeHydrated
console.log('Current Routes', NavigationStore)
// console.log('AppStore.loading ', AppStore.loading)
return (
<View style={{ flex: 1,backgroundColor:'transparent'}}>
<StatusBar
barStyle="light-content"
/>
{!splashDone ? <SplashScreen /> : null}
{ready &&
<Provider {...stores}>
<MainStack
/>
</Provider>}
<InternetConnectionPopUp />
{AppStore.loading ?
<Spinner
color={colors.yellow}
style={{ position: 'absolute', right: 0, left: 0, top: 0, bottom: 0, zIndex: 99999 }} />
: null}
<View style={Platform.OS === 'ios' && this.state.flag ? { height: calcSize(25) } : {}} />
</View>
)
}
App.js
import React, { Component } from 'react'
import { BackHandler, Alert, AppState, View,Keyboard } from 'react-native'
import { inject, observer } from 'mobx-react/native'
import { AppStack } from '../../routes'
import { NavigationActions } from 'react-navigation'
import { Header } from '../../components';
let popupOpen = false
#inject('AppStore') #observer
class App extends Component {
constructor(props) {
super(props)
this.state = {
appState: AppState.currentState,
nowMounted: false
}
this.goBack = this.goBack.bind(this)
}
goBack() {
this.props.navigation.goBack(null)
}
componentWillMount() {
this.setState({ nowMounted: true })
}
render() {
return (
<View style={{ flex: 1 }}>
<Header onPressBack={this.goBack}/>
<AppStack/>
</View>
)
}
}
export default App
AppStack.js
import {
Dashboard,
Services,
Schedule,
ScheduleDays,
ScheduleTime,
CancelAppointment
} from '../screens'
import { createStackNavigator, NavigationActions } from 'react-navigation'
export const AppStack = createStackNavigator({
Dashboard: { screen: Dashboard, navigationOptions: {
gesturesEnabled: false,
} },
Services: { screen: Services, navigationOptions: {
gesturesEnabled: false,
} },
Schedule: { screen: Schedule, navigationOptions: {
gesturesEnabled: false,
} },
ScheduleDays: { screen: ScheduleDays, navigationOptions: {
gesturesEnabled: false,
} },
ScheduleTime: { screen: ScheduleTime, navigationOptions: {
gesturesEnabled: false,
} },
CancelAppointment: { screen: CancelAppointment, navigationOptions: {
gesturesEnabled: false,
} },
}, {
headerMode: 'none',
initialRouteName: 'Dashboard',
lazy: true,
gesturesEnabled: false,
cardStack: {
gesturesEnabled: false
},
})
goBack not works in createStackNavigator, it stay in same screen.
go Back not works at all.
when I navigate from dashboard to services screen and then press onBack in services it do nothing.
I also tried to change instead of createStackNavigator to createSwitchNavigator but still it not works.

Answer 1

Could you please put the code of the service screen where you call the goBack function, it could be helpful.
Generally you just call
this.props.navigation.goBack()
or
this.props.navigation.goBack(null)
you can also try
this.props.navigation.navigate('Dashboard')
if it's in the history of the stack it will go back to the previous screen from service screen instead of pushing it on top

Answer 2

This work for me.
<Button
title="go back"
onPress={(props) => { this.props.navigation.goBack(null) }}
/>
Dont forget to remove this for functional component.

Answer 3

Functional Component Approach
import {StyleSheet,Text,View,TouchableOpacity,} from 'react-native';
const ScreenName = ({ navigation }) => {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Text>
GoBack
</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container:{
flex:1,
display: 'flex',
justifyContent:'center',
alignItems: 'center',
}
});
export default ScreenName;

Answer 4

Navigation prop has a goBack helper.
class HomeScreen extends React.Component {
render() {
const {goBack} = this.props.navigation;
return (
<View>
<Text>This is the home screen of the app</Text>
<Button
onPress={() => goBack()}
title="Go to Brent's profile"
/>
</View>
)
}
}