title: How to combine Appbar with BottomNavigation from React Native Paper?
body: <p>The <strong>BottomNavigation</strong> is a great navigator for mobile devices but for web version I would prefer to have a something as below (inspired by Instagram):</p>
  <p><a href="https://i.stack.imgur.com/9XTlb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9XTlb.png" alt="Screenshot" /></a></p>
  <p><strong>Navbar.tsx:</strong></p>
  <pre><code>import React from 'react'
  import {Appbar, BottomNavigation} from 'react-native-paper'
  
  type NavbarProps = React.ComponentProps&lt;typeof Appbar&gt; &amp;
    React.ComponentProps&lt;typeof BottomNavigation&gt;
  
  export const Navbar: React.FC&lt;NavbarProps&gt; = (props: NavbarProps) =&gt; {
    return (
      &lt;Appbar {...props}&gt;
        {props.children}
        &lt;BottomNavigation {...props} /&gt;
      &lt;/Appbar&gt;
    )
  }
  </code></pre>
  <p><strong>Example of usage:</strong></p>
  <pre><code>const App = () =&gt; {
    const colorScheme = Appearance.getColorScheme()
    const isDarkTheme = colorScheme === 'dark'
    const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme
  
    const [searchQuery, setSearchQuery] = React.useState('')
    const onChangeSearch = (query: React.SetStateAction&lt;string&gt;) =&gt; {
      setSearchQuery(query)
    }
  
    const [index, setIndex] = React.useState(0)
    const [routes] = React.useState([
      {key: 'home', icon: 'home'},
      {key: 'map', icon: 'compass'},
      {key: 'post', icon: 'plus-box'},
      {key: 'chat', icon: 'forum'},
      {key: 'profile', icon: 'account'},
    ])
  
    const renderScene = BottomNavigation.SceneMap({
      home: HomeScreen,
      map: MapScreen,
      post: PostScreen,
      chat: ChatScreen,
      profile: ProfileScreen,
    })
  
    return (
      &lt;PaperProvider theme={theme}&gt;
        &lt;React.Fragment&gt;
          &lt;style type=&quot;text/css&quot;&gt;{`
            @font-face {
              font-family: 'MaterialCommunityIcons';
              src: url('fonts/MaterialCommunityIcons.ttf') format('truetype');
            }
          `}&lt;/style&gt;
          &lt;Navbar
            style={styles.navbar}
            labeled={false}
            navigationState={{index, routes}}
            onIndexChange={setIndex}
            renderScene={renderScene}
            activeColor=&quot;#f50057&quot;&gt;
            &lt;Navbar.Content title=&quot;My cool navbar&quot; /&gt;
            &lt;Navbar.Search
              theme={theme}
              placeholder=&quot;Search...&quot;
              value={searchQuery}
              onChangeText={onChangeSearch}
            /&gt;
          &lt;/Navbar&gt;
        &lt;/React.Fragment&gt;
      &lt;/PaperProvider&gt;
    )
  }
  </code></pre>
  <p>This code gives me the bar that I need but it doesn't render a scene. To be more precise, it draws the scene, but inside the Appbar and with zero height, which is logical.</p>
  <p><a href="https://i.stack.imgur.com/EfsOq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EfsOq.jpg" alt="Screenshot 2" /></a></p>
  <p>If to look at <a href="https://github.com/callstack/react-native-paper/blob/main/src/components/BottomNavigation/BottomNavigation.tsx" rel="nofollow noreferrer">source code</a> of <strong>BottomNavigation</strong>, it renders <strong>BottomNavigationRouteScreen</strong> and below its bar with icons.</p>
  <p>How can I extend <strong>BottomNavigation</strong> to add the title and search (just some nested views) at the beginning of the bar from <strong>BottomNavigation</strong> and render <strong>BottomNavigationRouteScreen</strong> below the bar?</p>
  <p><strong>P.S.</strong> I didn't post a code related to <strong>Navbar.Content</strong> and <strong>Navbar.Search</strong> because of it doesn't play any role in my problem.<br />
  <strong>P.P.S.</strong> I am a noobie in <strong>React.js</strong> and <strong>React Native</strong>.</p>