How to navigate from ListItem (react-native-elements) to new screen?

Question

How do I navigate to a new screen on touching a ListItem ? I have ListItems with Chevrons towards right, giving an impression that touching the ListItem would take to detailed screen. A detialed screen would then take back to original ListItem screen.

My ListItem is in Menu.js, I have a screen Home.js, imported into Menu.js I then put Home screen in

const ListitemDetail = createStackNavigator({
  Home: Home
});

I then used ListitemDetail react element in my ListItem

          <ListItem
              key={i}
              title={item.title}
              leftIcon={{ name: item.icon }}
              bottomDivider={true}
              chevron
              onPress={() => this.props.navigation.navigate("ListitemDetail")}
          />

It is not navigating to ListitemDetial's Home.

But when I use 'Home' directly, it is taking me to Home screen, downside of doing this is, I can not go back (back arrow wont show up on header, obviously)

onPress={() => this.props.navigation.navigate("Home")}

Here is my Menu.js

import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  Animated,
  ScrollView,
  SectionList,
  SafeAreaView,
  FlatList
} from "react-native";
import { createStackNavigator } from "react-navigation";
import Home from "./Home";
import { ListItem } from "react-native-elements";

const ListitemDetail = createStackNavigator({
  Home: Home
});

const list2 = [
  {
    title: "Appointments",
    icon: "av-timer"
  },
  {
    title: "Trips",
    icon: "flight-takeoff"
  }
];
export default class Menu extends Component {
  render() {
    return (
      <SafeAreaView>
        <ScrollView>
          <View>
            {list2.map((item, i) => (
              <ListItem
                key={i}
                title={item.title}
                leftIcon={{ name: item.icon }}
                bottomDivider={true}
                chevron
                onPress={() => this.props.navigation.navigate("ListitemDetail")}
              />
            ))}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

Ideally what i want to achieve is something like a 'Setting' screen on whatsapp or 'Menu' screen on Facebook. Is there a better way of doing this ?

Answer 1

You have some issues with your Screens. You only have one Screen in createStackNavigator, which is called Home. This way, if you call an non existing Screen, it falls back to the first one declared in createStackNavigator.

So try it like this:

const MyApp = createStackNavigator({
  Home: { screen: HomeScreen },
  DetailScreen: { screen: DetailScreen },
});
AppRegistry.registerComponent('MyApp', () => createAppContainer(MyApp));

This way, Home is the first Screen comes up after starting the app.

I assume, you have your ListItem-Component in HomeScreen, and you use withNavigation() in the export of this ScreenComponent to make your navigator available via the props. Then you can switch to another Screen simply by using:

onPress={() => this.props.navigation.navigate(
    "DetailScreen",
    { myParamsToThisScreen: 
        {test: true, 
         param1: false
        }
    })}

Give it a try this way (and don't forget to vote up this answer if it's helps you out)