Search code examples
react-nativeback-buttonreact-navigation

React Navigation : Back button doesn't go to previous scene but to initialRouteName

I'm using react-native 0.50.3 with the react-navigation package. I've some issues to go to previous scene using the back button of the phone. Is it related to the last version of RN ?

This is the used code :

App.js defining drawer and stacknavigator : 

import React from "react";
import {TabView, TabBarBottom} from 'react-navigation';
import { Platform } from "react-native";

import { Root } from "native-base";
import { StackNavigator, TabNavigator, DrawerNavigator  } from "react-navigation";


import SideBar from "./main_scenes/sidebar/";
import HomeServices from "./main_scenes/services/";
import Profile from "./main_scenes/profile/";


import Splashscreen from "./main_scenes/home/splash";
import Services from "./main_scenes/services/servicesdetails/";

const Drawer = DrawerNavigator(
  {

    Splashscreen:{screen:Splashscreen},
    Services:{screen:Services},

  },
  {
    initialRouteName: "Splashscreen",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  }
);

const Feedstack = StackNavigator(
    {
        Drawer: { screen: Drawer },
        HomeServices:{screen:HomeServices},
        Profile:{screen:Profile},
    },
    {
        initialRouteName: "Drawer",
        headerMode: "none",
    }
);

export default () =>
  <Root>
    <Feedstack />
  </Root>;

And this how i navigate from a scene to other :

From my scene called "services" to "servicesdetails". First, i've a array for all my data within the route as a variable 

    const datas = [
      {
        img: img1,
        text: "Some text,
        note: "Its time to build a difference . .",
        route: "Services",
      },
 {
    img: img2,
    text: "Some text",
    note: "Its time to build a difference . .",
    route : "Another_one_for_test"
  },
    ]

Then in the render(), i use : 

 <Content>
          <List
            dataArray={datas}
            renderRow={data =>
              <ListItem button thumbnail onPress={() => this.props.navigation.navigate(data.route)}>
                <Left>
                  <Thumbnail square size={80} source={data.img} />
                </Left>
                <Body>
                  <Text >{data.text}</Text>
                  <Text numberOfLines={1} note>{data.note}</Text>
                </Body>

              </ListItem>}
          />
        </Content>

My navigation goes very well, but from the scene details to the services's scene, cannot be back neither from the previous button, nor from the back button of the phone.

the function <Button transparent onPress={() => this.props.navigation.goBack()}> send me directly to "splashscreen" defined as the initialroutename in the app.js. Same for the back button.

Is there something i've done wrong ?

Thanks

Solution

  • Go back to previous screen and close current screen. back action creator takes in one optional parameter:

    • key - string or null - optional - If set, navigation will go back from the given key. If null, navigation will go back anywhere. Refer here

    You have to provide the key to goBack from current screen if its nested.

    this.props.navigation.goBack(this.props.navigation.state.key)}