The BottomNavigation is a great choice for mobile navigation, but for the web version, I have a different preference inspired by Instagram:
https://i.sstatic.net/9XTlb.png
Navbar.tsx:
import React from 'react'
import {Appbar, BottomNavigation} from 'react-native-paper'
type NavbarProps = React.ComponentProps<typeof Appbar> &
React.ComponentProps<typeof BottomNavigation>
export const Navbar: React.FC<NavbarProps> = (props: NavbarProps) => {
return (
<Appbar {...props}>
{props.children}
<BottomNavigation {...props} />
</Appbar>
)
}
Example of usage:
const App = () => {
const colorScheme = Appearance.getColorScheme()
const isDarkTheme = colorScheme === 'dark'
const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme
const [searchQuery, setSearchQuery] = React.useState('')
const onChangeSearch = (query: React.SetStateAction<string>) => {
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 (
<PaperProvider theme={theme}>
<React.Fragment>
<style type="text/css">{`
@font-face {
font-family: 'MaterialCommunityIcons';
src: url('fonts/MaterialCommunityIcons.ttf') format('truetype');
}
`}</style>
<Navbar
style={styles.navbar}
labeled={false}
navigationState={{index, routes}}
onIndexChange={setIndex}
renderScene={renderScene}
activeColor="#f50057">
<Navbar.Content title="My cool navbar" />
<Navbar.Search
theme={theme}
placeholder="Search..."
value={searchQuery}
onChangeText={onChangeSearch}
/>
</Navbar>
</React.Fragment>
</PaperProvider>
)
}
This implementation provides the desired navigation bar, but there is an issue with rendering scenes. The scenes are drawn inside the Appbar with zero height, which is expected.
https://i.sstatic.net/EfsOq.jpg
When examining the source code of BottomNavigation, it renders BottomNavigationRouteScreen with icons below the bar.
How can I enhance BottomNavigation to include a title and search input at the start of the navigation bar and then render BottomNavigationRouteScreen below the bar?
P.S. Omitted code related to Navbar.Content and Navbar.Search as they are not relevant to the issue.
P.P.S. I am relatively new to React.js and React Native.