0

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>
  )
}
}
RandomC
  • 3
  • 6
  • Can you add a height and width property to the styling? See [Image](https://facebook.github.io/react-native/docs/image.html) documentation. – martwetzels Jun 30 '17 at 09:45
  • @martwetzels no luck, thanks anyway – RandomC Jun 30 '17 at 19:33
  • Can you try the following as image source with backticks. require('./images/tab${title}Icon.png'). I am on my phone so cannot check this idea. So you wouldn't need the switch if the title as a string is in the filename. – martwetzels Jun 30 '17 at 19:38
  • no luck either, but thought it was going to work, ill put it on the back burner as of now, since its a small ascetic choice anyway. – RandomC Jun 30 '17 at 20:11

1 Answers1

0

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.

Ritesh Bansal
  • 3,108
  • 2
  • 16
  • 23