I am unable to overlap TopNavigation(TopNavigation.js) on Header(Inside Sidebar.js) of my react native app, Code:
App.js
import { NavigationContainer } from "@react-navigation/native";
import StackNavigation from "./src/routes/stackNavigation";
import { createNotifications } from "react-native-notificated";
import { SafeAreaView } from "react-native";
export default function App() {
return (
<SafeAreaView style={{flex:1}}>
<NavigationContainer>
<StackNavigation />
</NavigationContainer>
</SafeAreaView>
);
}
StackNavigation.js
import { createStackNavigator } from "@react-navigation/stack"
import AuthScreen from "../../screens/auth"
import SplashScreen from "../../screens/splash"
import Main from "../../screens/main"
const Stack = createStackNavigator()
export default StackNavigation = () =>{
return(
<Stack.Navigator
screenOptions={{
headerShown:false
}}
>
<Stack.Screen name="Splash" component={SplashScreen} />
<Stack.Screen name="Login" component={AuthScreen} />
<Stack.Screen name="Main" component={Main} />
</Stack.Navigator>
)
}
Main.js
import { View, Text } from 'react-native'
import React from 'react'
import Sidebar from '../../routes/appDrawer'
const Main = (navigation) => {
return (
<Sidebar />
)
}
export default Main
Sidebar.js
import { createDrawerNavigator, DrawerToggleButton} from "@react-navigation/drawer";
import ClientKudos from "../../screens/sidebarScreens/cliendKudos";
import BottomTab from "../bottomNavigation";
import { Button, Image } from "react-native";
import { View, Text } from "react-native";
import { useSelector } from "react-redux";
import Icon from 'react-native-vector-icons/FontAwesome';
import HamburgerIcon from '../../assets/icons/hamburger.svg'
import BellIcon from '../../assets/icons/bell.svg'
import AwardsScreen from "../../screens/bottomTabScreens/Awards";
const Drawer = createDrawerNavigator();
function Sidebar(){
return(
<Drawer.Navigator
drawerContent={(props)=>{
return(
<CustomSideBar {...props} />
)
}}
screenOptions={{
// headerShown:false,
drawerPosition:'left',
header:()=>(
<Header />
),
}} >
<Drawer.Screen name="BottomTab" component={BottomTab} />
</Drawer.Navigator>
)
}
function CustomSideBar({navigation}){
return(
<Button
title="Go somewhere"
onPress={()=>navigation.navigate('ClientKudos')}
/>
)
}
function Header({navigation}){
//Redux Selector
const profile = useSelector((state)=>state.profile)
return(
<View style={{
backgroundColor:'#071724',
height:100,
position: 'relative', // Allow overlap
zIndex: 1, // Ensure it stays behind the top navigation
}}>
<View style={{flexDirection:'row'}}>
<HamburgerIcon width={40} height={40} fill="#000000" />
<Image source={{
uri:profile.user_profile_src
}}
height={40}
width={40}
/>
<BellIcon />
</View>
</View>
)
}
export default Sidebar
BottomTab.js
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Main from "../../screens/main";
import HomeScreen from "../../screens/bottomTabScreens/home";
import AnnouncementsScreen from "../../screens/bottomTabScreens/Announcements";
import AloksCornerScreen from "../../screens/bottomTabScreens/AloksCorner";
import AwardsScreen from "../../screens/bottomTabScreens/Awards";
import { Text, View } from 'react-native';
import HomeIcon from '../../assets/icons/home.svg';
import WhatsNewIcon from '../../assets/icons/whatsNew.svg';
import RemoteCornerIcon from '../../assets/icons/RemoteCornerIcon.svg';
import AwardsIcon from '../../assets/icons/awards.svg';
import PostIcon from '../../assets/icons/postIcon.svg'
import ClientKudos from '../../screens/sidebarScreens/cliendKudos';
const Tab = createBottomTabNavigator();
// const Tab = createMaterialBottomTabNavigator();
function BottomTab(){
return(
<Tab.Navigator screenOptions={{
headerShown:false,
tabBarStyle:{
paddingHorizontal:25,
height:75,
paddingBottom:13,
shadowColor: '#B2B2B2',
shadowOffset: { width: -2, height: -3 },
shadowOpacity: 0.25,
shadowRadius: 10,
elevation: 5, // Android shadow
},
tabBarLabelStyle:{
fontSize:12
},
}}>
<Tab.Screen name="Home" options={{
title:"Home",
tabBarIcon:({color})=>{
return <HomeIcon />
}
}}
component={HomeScreen} />
<Tab.Screen name="Announcements"
options={{
title:'What's New',
tabBarIcon:({color})=>{
return <WhatsNewIcon />
}
}}
component={AnnouncementsScreen} />
<Tab.Screen
name="Post"
options={{
title:'Post',
tabBarLabelStyle:{color:'#1C2B41',fontSize:12,position:'absolute',bottom:5},
tabBarIcon:({color})=>(
<View style={{
position:'absolute',
bottom:10,
backgroundColor:'white',
borderTopLeftRadius:50 ,
borderTopRightRadius:50
}}>
<View style={{
}}>
<PostIcon />
</View>
</View>
)
}}
component={ClientKudos}
/>
<Tab.Screen
name="AloksCorner"
options={{
title:"Remote",
tabBarIcon:({color})=>{
return <RemoteCornerIcon />
}
}}
component={AloksCornerScreen} />
<Tab.Screen name="Awards"
options={{
title:"Awards",
tabBarIcon:()=>{
return <AwardsIcon />
}
}}
component={AwardsScreen} />
</Tab.Navigator>
)
}
export default BottomTab
HomeScreen.js
import { View, Text, Image } from 'react-native'
import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import Sidebar from '../../../routes/appDrawer'
import TopNavigation from '../../../routes/topNavigation'
const HomeScreen = (navigation) =>{
return(
<TopNavigation />
)
}
export default HomeScreen
TopNavigation.js
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import HomeScreen from '../../screens/bottomTabScreens/home';
import BlogScreen from '../../screens/topTabScreens/blogs';
import GalleryScreen from '../../screens/topTabScreens/gallery';
import EmagazineScreen from '../../screens/topTabScreens/eMagazine';
import TopWallNavigation from '../wallNavigation';
import BlogIcon from '../../assets/icons/blog.svg';
import PeopleIcon from '../../assets/icons/people.svg';
import GalleryIcon from '../../assets/icons/gallery.svg';
import EmagazineIcon from '../../assets/icons/eMagazine.svg';
import { View, StyleSheet, Dimensions } from 'react-native';
const TopTab = createMaterialTopTabNavigator();
const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
marginHorizontal: 8,
flex: 1,
position: 'absolute',
zIndex: 2, // Ensure it stays in front of the header
top: -100, // Adjust to overlap the header as desired
width: width - 16, // to account for marginHorizontal
height: '100%', // adjust as needed
},
iconContainer: {
justifyContent: 'center',
alignItems: 'center',
},
icon: {
width: 30, // Adjust the size as needed
height: 30
},
});
function TopNavigation() {
return (
<View style={styles.container}>
<TopTab.Navigator
screenOptions={{
tabBarItemStyle: {
width: 90,
},
// tabBarScrollEnabled: true,
tabBarLabelStyle: {
fontSize: 14,
marginTop:13,
color:''
},
}}
>
<TopTab.Screen
options={{
tabBarIcon: () => (
<View style={styles.iconContainer}>
<BlogIcon style={styles.icon} />
</View>
),
}}
name="wall"
component={TopWallNavigation}
/>
<TopTab.Screen
options={{
tabBarIcon: () => (
<View style={styles.iconContainer}>
<BlogIcon style={styles.icon} />
</View>
),
}}
name="blogs"
component={BlogScreen}
/>
<TopTab.Screen
options={{
tabBarIcon: () => (
<View style={styles.iconContainer}>
<PeopleIcon style={styles.icon} />
</View>
),
}}
name="people"
component={BlogScreen}
/>
<TopTab.Screen
options={{
tabBarIcon: () => (
<View style={styles.iconContainer}>
<GalleryIcon style={styles.icon} />
</View>
),
}}
name="gallery"
component={GalleryScreen}
/>
{/* <TopTab.Screen
options={{
tabBarIcon: () => (
<View style={styles.iconContainer}>
<EmagazineIcon style={styles.icon} />
</View>
),
}}
name="eMagazine"
component={EmagazineScreen}
/> */}
</TopTab.Navigator>
</View>
);
}
export default TopNavigation;
Required Design
enter image description here
What i coded
enter image description here
I want TopNavigation to render above header in react native app in ios and android both
New contributor
Shikhar Uttam is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.