title: How to create Custom Bottom Tab Bar in React Native?
body: <p>I want to create a bottom tab bar like given below without using any library like <a href="https://github.com/timomeh/react-native-material-bottom-navigation" rel="nofollow noreferrer">react-native-material-bottom-navigation</a> as I don't want any label for my Bottom Tabbars &amp; the library has no option for making label optional. Also it provides animation which looks pretty weird when I used it.</p>
  
  <p><a href="https://i.stack.imgur.com/NrOMx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NrOMx.png" alt="Bottom Tab Bar"></a></p>
  
  <p>Now I tried implementing a simple tab bar navigation like follows -</p>
  
  <h3>App.js</h3>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = { screen: 1 };
      this.changeScreen = this.changeScreen.bind(this);
    }
  
    changeScreen() {
      switch (this.state.screen) {
        case 1:
          return &lt;FirstTabScreen /&gt;;
        case 2:
          return &lt;SecondTabScreen /&gt;;
      }
    }
  
    changeActiveTab(screen) {
      this.setState({ screen });
    }
  
    render() {
      return (
        &lt;View&gt;
          &lt;View&gt;
            {this.changeScreen()}
          &lt;/View&gt;
          &lt;Footer changeActiveTab={this.changeActiveTab} /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <h3>Footer.js</h3>
  
  <pre><code>class Footer extends Component {
    render() {
      const { changeActiveTab } = this.props;
      return (
        &lt;View&gt;
          &lt;TouchableOpacity onPress={() =&gt; changeActiveTab(1)}&gt;
            &lt;Icon name="FirstTabScreen" /&gt;
            &lt;Icon name="SecondTabScreen" /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
       );
    }
  }
  </code></pre>
  
  <p>Its giving an error <code>this.setState()</code> is not a function </p>
  
  <p>How to implement this?</p>