I am implementing a react native project in which I have to add bottomtab navigation as well as right and left side drawer navigation all the screens.
I have successfully implemented the tab navigation but I am getting errors while trying to implement the drawer navigation for both the drawers.
Every time I click on the buttons for opening the drawers, I get an error saying
cannot read property opendrawer of undefined
.
Here is the reference to my code
App.js
<code>import React from 'react';
import SignInScreen from './components/Screens/SignInScreen';
import SignUpScreen from './components/Screens/SignUpScreen';
import Welcome from './components/Screens/Welcome';
import Dashboard from './components/Screens/Dashboard';
import DetailsScreen from "./components/Screens/DetailsScreen";
import NiftyEnergyDetails from "./components/Screens/NiftyEnergyDetails"
import BankTrDetails from './components/Screens/BankTrDetails';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Summary from './components/Screens/Summary';
import {
Text,
useColorScheme,
View,
} from 'react-native';
function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Welcome' screenOptions={{headerShown: false}} >
{/* <Stack.Navigator initialRouteName='Welcome'> */}
{/* <Stack.Navigator initialRouteName='Dashboard' screenOptions={{headerShown: false}}> */}
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} options={{ title:"Pavan" }} />
<Stack.Screen name="Details" component={DetailsScreen} />
<Stack.Screen name="Niftyenergydetails" component={NiftyEnergyDetails} />
<Stack.Screen name="Banktrdetails" component={BankTrDetails} />
<Stack.Screen name="Summary" component={Summary} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
</code>
<code>import React from 'react';
import SignInScreen from './components/Screens/SignInScreen';
import SignUpScreen from './components/Screens/SignUpScreen';
import Welcome from './components/Screens/Welcome';
import Dashboard from './components/Screens/Dashboard';
import DetailsScreen from "./components/Screens/DetailsScreen";
import NiftyEnergyDetails from "./components/Screens/NiftyEnergyDetails"
import BankTrDetails from './components/Screens/BankTrDetails';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Summary from './components/Screens/Summary';
import {
Text,
useColorScheme,
View,
} from 'react-native';
function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Welcome' screenOptions={{headerShown: false}} >
{/* <Stack.Navigator initialRouteName='Welcome'> */}
{/* <Stack.Navigator initialRouteName='Dashboard' screenOptions={{headerShown: false}}> */}
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} options={{ title:"Pavan" }} />
<Stack.Screen name="Details" component={DetailsScreen} />
<Stack.Screen name="Niftyenergydetails" component={NiftyEnergyDetails} />
<Stack.Screen name="Banktrdetails" component={BankTrDetails} />
<Stack.Screen name="Summary" component={Summary} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
</code>
import React from 'react';
import SignInScreen from './components/Screens/SignInScreen';
import SignUpScreen from './components/Screens/SignUpScreen';
import Welcome from './components/Screens/Welcome';
import Dashboard from './components/Screens/Dashboard';
import DetailsScreen from "./components/Screens/DetailsScreen";
import NiftyEnergyDetails from "./components/Screens/NiftyEnergyDetails"
import BankTrDetails from './components/Screens/BankTrDetails';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Summary from './components/Screens/Summary';
import {
Text,
useColorScheme,
View,
} from 'react-native';
function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Welcome' screenOptions={{headerShown: false}} >
{/* <Stack.Navigator initialRouteName='Welcome'> */}
{/* <Stack.Navigator initialRouteName='Dashboard' screenOptions={{headerShown: false}}> */}
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} options={{ title:"Pavan" }} />
<Stack.Screen name="Details" component={DetailsScreen} />
<Stack.Screen name="Niftyenergydetails" component={NiftyEnergyDetails} />
<Stack.Screen name="Banktrdetails" component={BankTrDetails} />
<Stack.Screen name="Summary" component={Summary} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Dashboard.js
<code>import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator, DrawerActions } from '@react-navigation/drawer';
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import SignUpScreen from './SignUpScreen';
import SignInScreen from './SignInScreen';
import Watchlist from './Watchlist';
import AlgoTrader from './AlgoTrader';
import Portfolio from './Portfolio';
import Insights from './Insights';
import Home from './Home';
import Welcome from './Welcome';
import Hamburger from "../Assets/Hamburger";
import ProfilePhoto from "../Assets/ProfilePhoto";
import HomeActive from '../Assets/HomeActive';
import HomeInactive from '../Assets/HomeInactive';
import WatchlistActive from '../Assets/WatchlistActive';
import WatchlistInactive from '../Assets/WatchlistInactive';
import AlgoTraderActive from '../Assets/AlgoTraderActive';
import AlgoTraderInactive from '../Assets/AlgoTraderInactive';
import PortfolioActive from '../Assets/PortfolioActive';
import PortfolioInactive from '../Assets/PortfolioInactive';
import InsightsActive from '../Assets/InsightsActive';
import InsightsInactive from '../Assets/InsightsInactive';
import Icon from 'react-native-ionicons';
const insightsData = "NIFTY";
const Tab = createBottomTabNavigator();
const LeftDrawer = createDrawerNavigator();
const RightDrawer = createDrawerNavigator();
const CustomDrawerContent = () => (
<View>
<Text>Left drawer</Text>
</View>
);
const CustomRightDrawerContent = () => (
<View>
<Text>Right Drawer</Text>
</View>
);
const HomeScreen = ({ navigation }) => {
React.useEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity onPress={() => { navigation.getParent('RightDrawer').openDrawer() }}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
)
});
}, [navigation]);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home Screen</Text>
</View>
);
};
const RightScreenDisplay = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Right Screen</Text>
</View>
);
};
const TabNavigator = () => {
const navigation = useNavigation();
const openLeftDrawer = () => {
navigation.dispatch(DrawerActions.openDrawer());
};
const openRightDrawer = () => {
navigation.getParent('RightDrawer').dispatch(DrawerActions.openDrawer());
};
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Home}
options={{
headerShown: true,
title: "Home",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Home</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <HomeActive width={25} height={25} /> : <HomeInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Watchlist"
component={Watchlist}
options={{
headerShown: true,
title: "FTSM Watchlist",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Watchlist</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <WatchlistActive width={25} height={25} /> : <WatchlistInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Algo Trader"
component={AlgoTrader}
options={{
headerShown: true,
title: "Algo Traders",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Algo Trader</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <AlgoTraderActive width={25} height={25} /> : <AlgoTraderInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Portfolio"
component={Portfolio}
options={{
headerShown: true,
title: "My Portfolio",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Portfolio</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <PortfolioActive width={25} height={25} /> : <PortfolioInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Insights"
component={Insights}
initialParams={{ data: insightsData }}
options={{
headerShown: true,
title: "Insights",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Insights</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <InsightsActive width={25} height={25} /> : <InsightsInactive width={25} height={25} />
),
}}
/>
</Tab.Navigator>
);
};
const LeftScreenDrawer = () => {
return (
<LeftDrawer.Navigator
drawerContent={CustomDrawerContent}
screenOptions={{
drawerPosition: "left",
drawerLabelStyle: {
textAlign: "center",
color: "blue"
}
}}>
<LeftDrawer.Screen name="Tabs" component={TabNavigator} options={{ headerShown: false }} />
</LeftDrawer.Navigator>
);
};
const RightScreenDrawer = () => {
return (
<RightDrawer.Navigator
drawerContent={CustomRightDrawerContent}
screenOptions={{ drawerPosition: "right" }}
id="RightDrawer"
// drawerContent={(props)=><RightScreenDisplay {...props} />}
>
<RightDrawer.Screen options={{ headerShown: false }} name="LeftDrawer" component={LeftScreenDrawer} />
</RightDrawer.Navigator>
);
};
const Dashboard = () => {
return (
<RightScreenDrawer />
);
};
export default Dashboard;
</code>
<code>import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator, DrawerActions } from '@react-navigation/drawer';
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import SignUpScreen from './SignUpScreen';
import SignInScreen from './SignInScreen';
import Watchlist from './Watchlist';
import AlgoTrader from './AlgoTrader';
import Portfolio from './Portfolio';
import Insights from './Insights';
import Home from './Home';
import Welcome from './Welcome';
import Hamburger from "../Assets/Hamburger";
import ProfilePhoto from "../Assets/ProfilePhoto";
import HomeActive from '../Assets/HomeActive';
import HomeInactive from '../Assets/HomeInactive';
import WatchlistActive from '../Assets/WatchlistActive';
import WatchlistInactive from '../Assets/WatchlistInactive';
import AlgoTraderActive from '../Assets/AlgoTraderActive';
import AlgoTraderInactive from '../Assets/AlgoTraderInactive';
import PortfolioActive from '../Assets/PortfolioActive';
import PortfolioInactive from '../Assets/PortfolioInactive';
import InsightsActive from '../Assets/InsightsActive';
import InsightsInactive from '../Assets/InsightsInactive';
import Icon from 'react-native-ionicons';
const insightsData = "NIFTY";
const Tab = createBottomTabNavigator();
const LeftDrawer = createDrawerNavigator();
const RightDrawer = createDrawerNavigator();
const CustomDrawerContent = () => (
<View>
<Text>Left drawer</Text>
</View>
);
const CustomRightDrawerContent = () => (
<View>
<Text>Right Drawer</Text>
</View>
);
const HomeScreen = ({ navigation }) => {
React.useEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity onPress={() => { navigation.getParent('RightDrawer').openDrawer() }}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
)
});
}, [navigation]);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home Screen</Text>
</View>
);
};
const RightScreenDisplay = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Right Screen</Text>
</View>
);
};
const TabNavigator = () => {
const navigation = useNavigation();
const openLeftDrawer = () => {
navigation.dispatch(DrawerActions.openDrawer());
};
const openRightDrawer = () => {
navigation.getParent('RightDrawer').dispatch(DrawerActions.openDrawer());
};
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Home}
options={{
headerShown: true,
title: "Home",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Home</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <HomeActive width={25} height={25} /> : <HomeInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Watchlist"
component={Watchlist}
options={{
headerShown: true,
title: "FTSM Watchlist",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Watchlist</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <WatchlistActive width={25} height={25} /> : <WatchlistInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Algo Trader"
component={AlgoTrader}
options={{
headerShown: true,
title: "Algo Traders",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Algo Trader</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <AlgoTraderActive width={25} height={25} /> : <AlgoTraderInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Portfolio"
component={Portfolio}
options={{
headerShown: true,
title: "My Portfolio",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Portfolio</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <PortfolioActive width={25} height={25} /> : <PortfolioInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Insights"
component={Insights}
initialParams={{ data: insightsData }}
options={{
headerShown: true,
title: "Insights",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Insights</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <InsightsActive width={25} height={25} /> : <InsightsInactive width={25} height={25} />
),
}}
/>
</Tab.Navigator>
);
};
const LeftScreenDrawer = () => {
return (
<LeftDrawer.Navigator
drawerContent={CustomDrawerContent}
screenOptions={{
drawerPosition: "left",
drawerLabelStyle: {
textAlign: "center",
color: "blue"
}
}}>
<LeftDrawer.Screen name="Tabs" component={TabNavigator} options={{ headerShown: false }} />
</LeftDrawer.Navigator>
);
};
const RightScreenDrawer = () => {
return (
<RightDrawer.Navigator
drawerContent={CustomRightDrawerContent}
screenOptions={{ drawerPosition: "right" }}
id="RightDrawer"
// drawerContent={(props)=><RightScreenDisplay {...props} />}
>
<RightDrawer.Screen options={{ headerShown: false }} name="LeftDrawer" component={LeftScreenDrawer} />
</RightDrawer.Navigator>
);
};
const Dashboard = () => {
return (
<RightScreenDrawer />
);
};
export default Dashboard;
</code>
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator, DrawerActions } from '@react-navigation/drawer';
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import SignUpScreen from './SignUpScreen';
import SignInScreen from './SignInScreen';
import Watchlist from './Watchlist';
import AlgoTrader from './AlgoTrader';
import Portfolio from './Portfolio';
import Insights from './Insights';
import Home from './Home';
import Welcome from './Welcome';
import Hamburger from "../Assets/Hamburger";
import ProfilePhoto from "../Assets/ProfilePhoto";
import HomeActive from '../Assets/HomeActive';
import HomeInactive from '../Assets/HomeInactive';
import WatchlistActive from '../Assets/WatchlistActive';
import WatchlistInactive from '../Assets/WatchlistInactive';
import AlgoTraderActive from '../Assets/AlgoTraderActive';
import AlgoTraderInactive from '../Assets/AlgoTraderInactive';
import PortfolioActive from '../Assets/PortfolioActive';
import PortfolioInactive from '../Assets/PortfolioInactive';
import InsightsActive from '../Assets/InsightsActive';
import InsightsInactive from '../Assets/InsightsInactive';
import Icon from 'react-native-ionicons';
const insightsData = "NIFTY";
const Tab = createBottomTabNavigator();
const LeftDrawer = createDrawerNavigator();
const RightDrawer = createDrawerNavigator();
const CustomDrawerContent = () => (
<View>
<Text>Left drawer</Text>
</View>
);
const CustomRightDrawerContent = () => (
<View>
<Text>Right Drawer</Text>
</View>
);
const HomeScreen = ({ navigation }) => {
React.useEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity onPress={() => { navigation.getParent('RightDrawer').openDrawer() }}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
)
});
}, [navigation]);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home Screen</Text>
</View>
);
};
const RightScreenDisplay = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Right Screen</Text>
</View>
);
};
const TabNavigator = () => {
const navigation = useNavigation();
const openLeftDrawer = () => {
navigation.dispatch(DrawerActions.openDrawer());
};
const openRightDrawer = () => {
navigation.getParent('RightDrawer').dispatch(DrawerActions.openDrawer());
};
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Home}
options={{
headerShown: true,
title: "Home",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Home</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <HomeActive width={25} height={25} /> : <HomeInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Watchlist"
component={Watchlist}
options={{
headerShown: true,
title: "FTSM Watchlist",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Watchlist</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <WatchlistActive width={25} height={25} /> : <WatchlistInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Algo Trader"
component={AlgoTrader}
options={{
headerShown: true,
title: "Algo Traders",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Algo Trader</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <AlgoTraderActive width={25} height={25} /> : <AlgoTraderInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Portfolio"
component={Portfolio}
options={{
headerShown: true,
title: "My Portfolio",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Portfolio</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <PortfolioActive width={25} height={25} /> : <PortfolioInactive width={25} height={25} />
),
}}
/>
<Tab.Screen
name="Insights"
component={Insights}
initialParams={{ data: insightsData }}
options={{
headerShown: true,
title: "Insights",
headerTintColor: "#0B588D",
headerTitleAlign: 'center',
headerTitleStyle: { fontWeight: "600" },
headerLeft: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openLeftDrawer}>
<Hamburger height="30" width="30" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{ marginTop: 10 }} onPress={openRightDrawer}>
<ProfilePhoto height="30" width="30" />
</TouchableOpacity>
),
tabBarLabel: ({ focused }) => (
<Text style={{ textDecorationLine: focused ? 'underline' : 'none', color: focused ? '#0B588D' : 'gray' }}>Insights</Text>
),
tabBarIcon: ({ focused }) => (
focused ? <InsightsActive width={25} height={25} /> : <InsightsInactive width={25} height={25} />
),
}}
/>
</Tab.Navigator>
);
};
const LeftScreenDrawer = () => {
return (
<LeftDrawer.Navigator
drawerContent={CustomDrawerContent}
screenOptions={{
drawerPosition: "left",
drawerLabelStyle: {
textAlign: "center",
color: "blue"
}
}}>
<LeftDrawer.Screen name="Tabs" component={TabNavigator} options={{ headerShown: false }} />
</LeftDrawer.Navigator>
);
};
const RightScreenDrawer = () => {
return (
<RightDrawer.Navigator
drawerContent={CustomRightDrawerContent}
screenOptions={{ drawerPosition: "right" }}
id="RightDrawer"
// drawerContent={(props)=><RightScreenDisplay {...props} />}
>
<RightDrawer.Screen options={{ headerShown: false }} name="LeftDrawer" component={LeftScreenDrawer} />
</RightDrawer.Navigator>
);
};
const Dashboard = () => {
return (
<RightScreenDrawer />
);
};
export default Dashboard;
Home.js
<code>import { View, Text, Image, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
const Home = () => {
return (
<View>
<Text>Home</Text>
</View>
)
}
</code>
<code>import { View, Text, Image, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
const Home = () => {
return (
<View>
<Text>Home</Text>
</View>
)
}
</code>
import { View, Text, Image, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
const Home = () => {
return (
<View>
<Text>Home</Text>
</View>
)
}
export default Home
Can someone please help me out in fixing this error. Any feedback would be appreciated.