Routing with React Navigation in React Native

Question

I'm creating an app in React Native, and I'm using React Navigation. In the main page, I have an array of services. I want to be able to route to different screens in the app based on the indices of the services. This is a snippet of the code. How do I do that?

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicator,
  AppRegistry,
  Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { addNavigationHelpers } from 'react-navigation';
import SelectMultiple from './SelectMultiple';
import PackingPage from './PackingPage';

const services = 
['Packing Items in Boxes for Shipping and Moving', 
'Unpacking Boxes', 
'Wrap Furniture for Moving and Shipping',
'Wrap Machinery',
'Loading / Lumper Services',
'Unloading / Lumper Services',
'Custom Crating for Boxes, Furniture and Machinery',
'Palletizing Services for Boxes, Furniture and Machinery',
'Shipping / Moving Service to 2nd location',
'Heat Shrink wrapping',
'Shipping Food in AC trucks',
'Shipping Food in Non AC Truck',
'Shipping Cars']

class PackingApp extends Component{

  static navigationOptions = {
    title: '',
  };

  state = { selectedServices: [] }

  onSelectionsChange = (selectedServices) => {
    this.setState({ selectedServices })
  }

I also have this snippet of code for a stack navigator with two screens so far. I'd like to add a screen for each service based on its index. I've tried doing that with an if/else, but I cannot get it to work.

const PackingNav = StackNavigator({
  Home: { screen: HomePage },
  PackingPage: { screen: PackingPage },
}, 
{
  headerMode: "none"
});

Answer 1

There's no automatic way to connect your screens in React Navigation to your array of services, you'll need to do that manually:

const services = [
   { key:'SomeUniqueIdentifier', name:'Packing Items in Boxes for Shipping and Moving' },
   { key:'AnotherUniqueIdentifier', name:'Unpacking Boxes' },
   ...
];

const PackingNav = StackNavigator({
   Home: { screen:HomePageComponent },
   SomeUniqueIdentifier: { screen:PackingPageComponent },
   AnotherUniqueIdentifier: { screen:UnpackingPageComponent },
   ...
});

Then in your HomePageComponent (or whichever component you're linking to the services from), you can do something along the lines of:

render() {
   const { navigate } = this.props.navigation;
   let menu = [];
   services.forEach(service => {
      menu.push(<Button
         onPress={() => navigate(service.key)}
         title={service.name}
      />);
   });
   return (
      <View>
         {menu}
      </View>
   );
}