CODEWITHSUNDEEP
react-nativereact-navigation
Manspof
Manspof

Reputation: 357

react-navigation go Back not navigate to previous screen

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.

Upvotes: 1

Views: 28667

Answers (4)

Gimnath
Gimnath

Reputation: 1078

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;

Upvotes: 1

lamazing
lamazing

Reputation: 533

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

Upvotes: 12

Parveen Chauhan
Parveen Chauhan

Reputation: 1496

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>
     )
   }
}

Upvotes: 0

Qui-Gon Jinn
Qui-Gon Jinn

Reputation: 4408

This work for me.

  <Button
      title="go back"
      onPress={(props) => { this.props.navigation.goBack(null) }}
  />

Dont forget to remove this for functional component.

Upvotes: 5

Related Questions