React Native trying to change the required image based on title - reactjs

Question

what I am trying to do is create a dynamic function to change the required image based on what the title is.
I have tried if statements with no success, though i am still new to react native, and i believe switch cases are hard if not possible in this case, but i have left it up there to help show my point.
What I wanted to do is the title of the tab that is passed in and see if its matched with one of the three, if it is, then i set the required image to a var icon and put that into a return image.
it will come back with no errors, but no images, any ideas are appreciated.
import React from 'react';
import styles from './styling/style.js';
import {StyleSheet, Text, Image, View} from 'react-native';
import {Router, Scene } from 'react-native-router-flux';
import Homepage from './homepage.js';
import Workout from './workouts';
import Settings from './settings';
const TabIcon = ({ selected, title}) => {
switch ({title}) {
case Homepage:
var icon = require("./images/tabHomePageIcon.png");
break;
case Workout:
var icon = require("./images/tabWorkoutIcon.png");
break;
case Settings:
var icon = require("./images/tabSettingIcon.png");
break;
}
return (
<View>
<Image source={icon}></Image>
<Text>{title}</Text>
</View>
);
};
const UniversalTitle = ({selected, title}) => {
return (
<Text style={styles.text}>
Ultimate Fitness Tracker {'\n'}
<Text style={styles.textBody}>The most comprehensive tracker available!
</Text>
</Text>
)
};
export default class Index extends React.Component {
render() {
return (
<Router>
<Scene key='root'>
<Scene key='tabbar' tabs tabBarStyle={styles.footer}>
<Scene key='tabHome' title='Homepage' titleStyle={styles.text} icon={TabIcon}>
<Scene key='pageOne' navigationBarStyle={styles.heading} component={Homepage} renderTitle={UniversalTitle} initial />
</Scene>
<Scene key='tabWorkout' titleStyle={styles.text} title='Workout' icon={TabIcon}>
<Scene key='pageTwo' component={Workout} navigationBarStyle={styles.heading} renderTitle={UniversalTitle} />
</Scene>
<Scene key='tabSettings' titleStyle={styles.text} title='Setting' icon={TabIcon}>
<Scene key='pageThree' component={Settings} navigationBarStyle={styles.heading} renderTitle={UniversalTitle} />
</Scene>
</Scene>
</Scene>
</Router>
)
}
}

Answer 1

In TabIcon Component, you have written
switch ({title})
It should be
switch (title)
and declare variable icon before switch statement.
Try this.
const TabIcon = ({ selected, title}) => {
let icon
switch (title) {
case Homepage:
icon = require("./images/tabHomePageIcon.png");
break;
case Workout:
icon = require("./images/tabWorkoutIcon.png");
break;
case Settings:
icon = require("./images/tabSettingIcon.png");
break;
}
return (
<View>
{icon && <Image source={icon}></Image>}
<Text>{title}</Text>
</View>
);
};
Hope, it solves your problem.