React Native - Switch two values

Question

I'm trying to see if I can switch between two values for my navigator: This works:

function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'The Market';

  switch (routeName) {
    case 'Stands':
      return 'The Market';
    case 'Map':
      return 'How to find the Market';
    case 'Favorites':
      return 'Favorites';
    case 'Info':
      return 'Info about the Market';
  }

  return routeName;
}

where I need I exec:

getHeaderTitle(route) // works

and I would like to add a value (color) to avoid to create a second one just for it:

function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'The Market';

  let color;

  switch ((routeName, color)) {
    case 'Stands':
      return 'The Market', (color = Colors.MarketColor);
    case 'Map':
      return 'How to find the Market', (color = Colors.MapColor);
    case 'Favorites':
      return 'Favorites', (color = Colors.FavColor);
    case 'Info':
      return 'Info about the Market', (color = Colors.InfoColor);
  }
  return routeName, color;
}

But it doesn't work. Any idea? thanks

Probably I would return an object in this case like `return { routeName, color }` instead. Also in other cases once you have more than 1 variable. [Return multiple values in JavaScript](https://stackoverflow.com/questions/2917175/return-multiple-values-in-javascript) will explain more about the topic. — norbitrial, Jun 01 '20 at 09:12

score 2 · Answer 1 · answered Jun 01 '20 at 09:23

As you have specific colors for each route, you can set it as an object and return it from switch. And switch doesnt support multiple variables. You will have to go with an if else. And rather than returning outside you can return using the default case with a default color.

function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params ?.screen || 'The Market';

  switch (routeName) {
    case 'Stands':
      return { route: 'The Market', color: Colors.MarketColor };
    case 'Map':
      return { route: 'How to find the Market', color: Colors.MapColor };
    case 'Favorites':
      return { route: 'Favorites', color: Colors.FavColor };
    case 'Info':
      return { route: 'Info about the Market', color: Colors.InfoColor };
    default:
      return { route: routeName, color: 'default color' };
  }

}

thanks it looks great! but strangely I get `objects are not valid as a react child use an array instead` — Marco Disco, Jun 01 '20 at 09:39
This returns an object, you will have to use one of the properties, route or color like const result = getHeaderTitle('Market'); result.route — Guruparan Giritharan, Jun 01 '20 at 09:44
thanks. I learned something new but it doesn't work. It doesn't switch the way I need — Marco Disco, Jun 02 '20 at 07:12

React Native - Switch two values

1 Answers1