title: Switch Case Doesn't work in React Native
body: <p>I am relatively new to JS and RN. But I have gotten my self stuck in this mess.</p>
  
  <p>I am, in React Native, trying to call a rendering of a badge depicting ones "Rank" which will change depending on what the calling will use for id.</p>
  
  <p>To do this, I am calling a js-file with a Switch in the function so that, depending on the id I call the Rank with, it will return different ones.</p>
  
  <p>My code currently looks like this:</p>
  
  <pre><code>'use strict';
  import React, {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TouchableOpacity,
  } from 'react-native';
  
  var colors = require('../Styles/colorscheme');
  import {Actions} from 'react-native-router-flux';
  
  var id = this.id;
  var Rank = React.createClass({
    render: function() {
      switch (id) {
        case 'smallone':
          return (
            &lt;View style={styles.lvl2}&gt;
              &lt;Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /&gt;
            &lt;/View&gt;
            );
        case 'bigone':
          return (
            &lt;View style={styles.lvl2}&gt;
              &lt;Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /&gt;
            &lt;/View&gt;
            );
        case 'smalltwo':
          return (
            &lt;View style={styles.lvl2}&gt;
              &lt;Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /&gt;
              &lt;Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /&gt;
            &lt;/View&gt;
            );
        case 'bigtwo':
          return (
            &lt;View style={styles.lvl2}&gt;
              &lt;Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /&gt;
              &lt;Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /&gt;
            &lt;/View&gt;
            );
        default:
          return (
            &lt;View style={styles.lvl2}&gt;
              &lt;Text&gt;Null&lt;/Text&gt;
            &lt;/View&gt;
            );
        }
      }
    });
  
  var styles = StyleSheet.create({
    lvl2: {
      flexDirection: 'row',
      backgroundColor: colors.General.background,
      justifyContent: 'center',
      alignItems: 'center',
    },
    lvl1: {
      padding: 10,
      flexDirection: 'row',
      backgroundColor: colors.General.hardline,
      justifyContent: 'center',
      alignItems: 'center',
    },  
  });
  
  module.exports = Rank;
  </code></pre>
  
  <p>And I call this simply by:</p>
  
  <pre><code>var Rank = require('../Components/Rank')
  .
  .
  .
  &lt;Rank id={'smallone'} /&gt;
  </code></pre>
  
  <p>But it always returns the default. And I have tried out many different variations in declaring the variable and so on. But I have no idea on where I have gone wrong.</p>