MultiBar is a TabBar component with an advanced button to make extra actions.
npm install react-native-multibar-sidekickbash
yarn add react-native-multibar-sidekick
`
or
`bash
npm i react-native-multibar-sidekick
`
Usage
`javascript
export default function App() {
const Tab = React.useRef>(createBottomTabNavigator()).current;
return (
overlayProps={{
expandingMode: 'staging'
}}
data={[
({ params }) => (
name="chevron-left"
color="#E24E1B"
size={20}
onPress={() => {
if (params.canGoBack()) {
params.goBack();
}
}}
/>
),
({ params }) => (
name="flag"
color="#E24E1B"
size={20}
onPress={() => {
}}
/>
),
({ params }) => (
name="headphones"
color="#E24E1B"
size={20}
onPress={() => {
}}
/>
),
({ params }) => (
name="heart"
color="#E24E1B"
size={20}
onPress={() => {
}}
/>
),
({ params }) => (
name="star"
color="#E24E1B"
size={20}
onPress={() => {
}}
/>
),
({ params }) => (
name="music"
color="#E24E1B"
size={20}
onPress={() => {
}}
/>
),
]}
initialExtrasVisible={false}
>
tabBar={(props) => (
)}
>
name="Home"
component={DemoScreen}
options={{
tabBarIcon: ({ color, size }) => (
name="home"
style={{
fontSize: size,
color: color
}}
/>
)
}}
/>
name="Likes"
component={DemoScreen}
options={{
tabBarIcon: ({ color, size }) => (
name="star"
style={{
fontSize: size,
color: color
}}
/>
)
}}
/>
name="Center"
component={DemoScreen}
options={{
tabBarLabel: '',
tabBarButton: () => (
style={{
backgroundColor: '#E24E1B'
}}
>
name="add"
style={{
fontSize: 32,
color: '#EDF2F4'
}}
/>
)
}}
/>
name="Posts"
component={DemoScreen}
options={{
tabBarIcon: ({ color, size }) => (
name="message"
style={{
fontSize: size,
color: color
}}
/>
)
}}
/>
name="Settings"
component={DemoScreen}
options={{
tabBarIcon: ({ color, size }) => (
name="settings"
style={{
fontSize: size,
color: color
}}
/>
)
}}
/>
);
}
``