title: How can I change a tab bar to a segmented control in react native?
body: <p>I am learning react native right now and new to how it works. I am currently tweeking with a project trying to change it up a little. <a href="https://github.com/denodenodeno/employee" rel="nofollow noreferrer">https://github.com/denodenodeno/employee</a></p>
  
  <p>The project has a tab bar at the bottom, which I want to change to become a segmented control in the top. This is what I have done and received as a result.</p>
  
  <p><strong>Original Code with Tab Bar</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      StyleSheet,
      TabBarIOS
  } from 'react-native';
  import {bind} from '../utils/utils';
  import EmployeesTab from './EmployeesTab';
  import SearchTab from './SearchTab';
  
  const employeesIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
  
  class App extends Component {
  
      constructor(props, context) {
          super(props, context);
          this.state = {
              selectedTab: 'employees'
          };
          bind(this)('_searchOnPress', '_employeesOnPress');
      }
  
      _employeesOnPress() {
          this.setState({
              selectedTab: 'employees'
          })
      }
  
      _searchOnPress() {
          this.setState({
              selectedTab: 'search'
          })
      }
  
      render() {
          return (
              &lt;TabBarIOS
                  selectedTab={this.state.selectedTab}&gt;
                  &lt;TabBarIOS.Item
                      title="Employees"
                      selected={this.state.selectedTab === 'employees'}
                      icon={{uri: employeesIcon, scale: 3}}
                      onPress={this._employeesOnPress}&gt;
                      &lt;EmployeesTab /&gt;
                  &lt;/TabBarIOS.Item&gt;
                  &lt;TabBarIOS.Item
                      title="Search"
                      selected={this.state.selectedTab === 'search'}
                      systemIcon="search"
                      onPress={this._searchOnPress}&gt;
                      &lt;SearchTab /&gt;
                  &lt;/TabBarIOS.Item&gt;
              &lt;/TabBarIOS&gt;
          )
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NIMKz.png" rel="nofollow noreferrer">Tab Bar</a></p>
  
  <p><strong>Attempt at Segmented Control</strong></p>
  
  <p>I changed the segment inside the render and return to this</p>
  
  <pre><code>&lt;SegmentedControlIOS
      values={['Employees', 'Search']}
      selectedIndex={0}
      tintColor={'#D6573D'}
      onValueChange={(val) =&gt; {
      if (val === "Employees"){
          this._employeesOnPress;
      }
      else if (val === "Search") {
          this._searchOnPress;
      }}}
      onChange={(val) =&gt; {
      if (val === "Employees"){
          &lt;EmployeesTab /&gt;
      }
      else if (val === "Search") {
          &lt;SearchTab /&gt;
      }}}
  /&gt;
  </code></pre>
  
  <p>which gave me <a href="https://i.stack.imgur.com/5ip62.png" rel="nofollow noreferrer">this segmented control with nothing else rendered</a></p>
  
  <p>I'm not understanding the issue. Any help would be appreciated! Thank you</p>