Passing data from one page to another via StackNavigator in DrawerNavigator

Question

For a hobby project I am building an app where my friends can check out our planned group events. Whenever someone presses on an event I want to show a screen with details about that specific event. So I want to go from my EventScreen which shows a FlatList with Events, to EventDetailScreen. Which needs to show one specific event.

So far I've got the navigation part working, but I cannot pass any data to the next screen...

I have tried to send the event as a param several ways. But I can't figure out what to do next. I've read something about needing to pass data from my DrawerNavigator to my StackNavigator, but when I tried this I got an error saying I need to define my navigation in the AppContainer.

MenuNavigator.js

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  //Top Navigation Header with Donute Button
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Ionicons
            name="md-menu"
            color="white"
            size={32}
            style={styles.menuIcon}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

//Stack Navigator for the First Option of Navigation Drawer
const HomeScreen_StackNavigator = createStackNavigator({
  //All the screen from the First Option will be indexed here
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#000',
      },
    }),
  },
});

//Stack Navigator for the Second Option of Navigation Drawer
const EventsScreen_StackNavigator = createStackNavigator({
  //All the screen from the Second Option will be indexed here
  EventsScreen: {
    screen: EventsScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#000',
      },
    }),
  },
});

//Stack Navigator for the Third Option of Navigation Drawer
const CalendarScreen_StackNavigator = createStackNavigator({
  //All the screen from the Third Option will be indexed here
  CalendarScreen: {
    screen: CalendarScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#000',
      },
    }),
  },
});

//Stack Navigator for the Fourth Option of Navigation Drawer
const PollScreen_StackNavigator = createStackNavigator({
  //All the screen from the Third Option will be indexed here
  PollScreen: {
    screen: PollScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#000',
      },
    }),
  },
});

//Stack Navigator for the Fifth Option of Navigation Drawer
const InfoScreen_StackNavigator = createStackNavigator({
  //All the screen from the Third Option will be indexed here
  InfoScreen: {
    screen: InfoScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#000',
      },
    }),
  },
});

//Stack Navigator for the EventDetailScreen of Navigation Drawer
const EventDetailScreen_StackNavigator = createStackNavigator({
  //All the screen from the Third Option will be indexed here
  EventDetailScreen: {
    screen: EventDetailScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#000',
      },
    }),
  },
});

const DrawerMenu = createDrawerNavigator(
  {
    HomeScreen: {
      screen: HomeScreen_StackNavigator,
    },
    EventsScreen: {
      screen: EventsScreen_StackNavigator,
    },
    CalendarScreen: {
      screen: CalendarScreen_StackNavigator,
    },
    PollScreen: {
      screen: PollScreen_StackNavigator,
    },
    InfoScreen: {
      screen: InfoScreen_StackNavigator,
    },
    EventDetailScreen: {
      screen: EventDetailScreen_StackNavigator,
    },
  },
  {
    // define customComponent here
    contentComponent: CustomSidebarMenu,
    drawerWidth: 300,
    drawerBackgroundColor: 'rgba(0,0,0,0.6)', // or 'rgba(0,0,0,0)'
  }
);

const styles = StyleSheet.create({
  menuIcon: {
    marginLeft: 15,
  },
});

export default createAppContainer(DrawerMenu);

Events.js

class EventsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: null,
      refreshing: false,
    };
  }

  async componentDidMount() {
    const events = await ajax.FetchEvents();
    this.setState({
      isLoading: false,
      dataSource: events,
      refreshing: false,
    });
  }

  handleRefresh = () => {
    this.setState(
      {
        refreshing: false,
      },
      () => {
        this.componentDidMount();
      }
    );
  };

  itemCard({ item }) {
    const { navigate } = this.props.navigation;
    return (
      <TouchableWithoutFeedback
        onPress={() =>
          navigate('EventDetailScreen', {
            data: 'test',
          })
        }>
        <View style={styles.card}>
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text numberOfLines={1} style={styles.desc}>
              {item.description}
            </Text>
            <View style={styles.row}>
              <View style={styles.iconColumn}>
                <Ionicons name="md-home" color="white" size={24} />
              </View>
              <View style={styles.textColumn}>
                <Text style={styles.location}>location</Text>
              </View>
            </View>
            <View style={styles.row}>
              <View style={styles.iconColumn}>
                <Ionicons name="md-calendar" color="white" size={24} />
              </View>
              <View style={styles.textColumn}>
                <Text style={styles.date}>{item.date}</Text>
              </View>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
          <FlatList
            data={this.state.dataSource}
            renderItem={({ item }) => this.itemCard({ item })}
            keyExtractor={item => item.id.toString()}
            onRefresh={() => this.handleRefresh()}
            refreshing={this.state.refreshing}
          />
        </View>
      );
    }
  }
}

EventDetailScreen.js

class EventDetailScreen extends Component {
  render() {
    let item = this.props.navigation.getParam('data', 'NO-DATA');

    return (
      <View>
        <Text>{item}</Text>
      </View>
    );
  }
}

export default EventDetailScreen;  

Whenever I click on an event, the EventDetailScreen will say 'NO-DATA' as the item is undefined. My intention is to pass the event, the user clicked on, to the next screen. So I can use the title, description etc. from that specific event.

And yes, I know the code is a bit messy. I'm new to React-Native and this is my first app (and also first post), so there's a lot to improve :)

Thanks in advance!

Answer 1

Found out I should use this.props.navigation.push instead of navigate. This way I can pass params to the next screen. Thanks!