title: React Conditional Render and Navbar
body: <p>I am controlling what component should be shown on my applications screen via the state and a switch statement in the main render function. I am writing this in react-native but this is a react structure question.</p>
  
  <p>I also have a Navbar component that I would ideally like to only rerender when the user clicks on a link in the Navbar itself, but I don't know of a great way to do this with how I have the switch statement setup now, it seems like I will have to rerender the Navbar every time depending on what condition is met by the state.</p>
  
  <p>My question is, is there a way that I can still use conditional rendering of components in the render method like I am below AND have a component that is always rendered at the top of the screen like the Navbar? I know this is possible with things like React Router, but is there a better way to structure it without using a tool like React Router or having to rerender the NavBar component every time?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  
  import GPS from './GPS/gps';
  import Home from './Home';
  import Photo from './Camera/Photo';
  
  export default class App extends React.Component {
    constructor() {
      super();
  
      this.state = {
        hasCameraPermission: null,
        type: Camera.Constants.Type.back,
        currentView: null,
        currentImage: null,
        navigation: 'Overview'
      };
  
      this.updateNavigation = this.updateNavigation.bind(this);
    }
  
    updateNavigation(view) { //Update view function
      this.setState({currentView: view});
    }
  
  
    render() {
      const { currentView } = this.state;
  
      switch(currentView) {
        case null:
        return (
          &lt;Home updateNav={this.updateNavigation} /&gt;
          );
          break;
  
        case 'GPS':
        return (
          &lt;View&gt;
            &lt;GPS /&gt;
            &lt;Text onPress={() =&gt; this.setState({currentView: null})}&gt;Back&lt;/Text&gt;
          &lt;/View&gt;
        );
          break;
  
        case 'Camera':
        return (
            &lt;Photo updateNav={this.updateNavigation} /&gt;
         );
         break;
  
         case 'viewPicture':
         return (
          &lt;View&gt;
            &lt;Image source={{uri: this.state.currentImage.uri}} style={{width: this.state.currentImage.width/10, height: this.state.currentImage.height/12}} /&gt;
          &lt;/View&gt;
         );
         break;
  
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>