Not Navigating TO specific Screen in react native - react-native

Question

I am New to react native :
I have created Two files "Browse.js" and "Drawer.js"
I have some Buttons in "Browse.js" But when I Wrap Up my Complete "Browse.js" in "Drawer.js"
like this:=>
import React, { Component } from "react";
import { Image, StyleSheet, ScrollView, TextInput, View } from "react-native";
import Slider from "react-native-slider";
import { AntDesign } from "#expo/vector-icons";
import { Foundation } from "#expo/vector-icons";
import { FontAwesome } from "#expo/vector-icons";
import { Ionicons } from "#expo/vector-icons";
import { MaterialCommunityIcons } from "#expo/vector-icons";
import { RoleLogin } from "./Browse";
import Browse from "./Browse";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
import Login from "./Login"
import { Divider, Button, Block, Text, Switch } from "../components";
import { theme, mocks } from "../constants";
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Browse" openByDefault>
<Drawer.Screen name="Browse" component={Browse} />
</Drawer.Navigator>
</NavigationContainer>
);
}
then I cant navigate To specific screen from here means from Drawer screen:
Showing error like this => The action 'NAVIGATE' with payload was not handled by any navigator.
Here Is My Browse.js
import React, { Component } from "react";
import {
Dimensions,
Image,
StyleSheet,
ScrollView,
TouchableOpacity,
View,
} from "react-native";
import { ThemeColors } from "react-navigation";
import { Card, Badge, Button, Block, Text } from "../components";
import { theme, mocks } from "../constants";
import Settings from "./Settings";
import { NotificationsScreen, App } from "./Settings";
const { width } = Dimensions.get("window");
const Drawer = createDrawerNavigator();
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
import Drawer1 from "./Settings";
import Home from "./Settings";
class Browse extends Component {
state = {
// active: "Products",
// active: "Select_Acivity",
categories: [],
error: [],
// data: [],
roles: "",
username: "",
password: "",
lading: false,
title: "",
data: "",
};
//++++++++++++++++++++++++++++++Drawer fun start++++++++++++++++++++++++++++++++++
//++++++++++++++++++++++++++++++Drawer fun close++++++++++++++++++++++++++++++++++
//*******************navagte to setting when data fetch start*************************/
RoleLogin() {
// const { data } = this.state;
// const { username, password, roles } = this.state;
fetch(
"https://jsonplaceholder.typicode.com/todos/1",
//fetch(
// "https://nasdigital.tech/Android_API_CI/validate_login_details",
{
method: "GET",
headers: { "Content-Type": "application/json" },
// body: JSON.stringify([{ data}]),
}
)
.then((response) => response.json())
.then((json) => {
//login to check details from server and then display or navigate to another screen
if (json != "error") {
// if (response && response.length && response[0].message != "error")
alert(JSON.stringify(json));
this.props.navigation.navigate("Drawer", {
data: json.title,
});
// .navigate("Settings", { data: json.title });
// this.props.navigation.navigate("Settings",{data : json.title});
} else {
alert("Cehck Details");
}
})
.catch((error) => alert("Cehck Details"));
}
//*******************navagte to setting when data fetch close**************************** */
componentDidMount() {
this.setState({ categories: this.props.categories });
}
// handleTab = tab => {
// const { categories } = this.props;
// const filtered = categories.filter(category =>
// category.tags.includes(tab.toLowerCase())
// );
// this.setState({ active: tab, categories: filtered });
// };
renderTab(tab) {
const { active } = this.state;
const isActive = active === tab;
return (
<TouchableOpacity
key={`tab-${tab}`}
onPress={() => this.handleTab(tab)}
style={[styles.tab, isActive ? styles.active : null]}
>
<Text size={16} medium gray={!isActive} secondary={isActive}>
{tab}
</Text>
</TouchableOpacity>
);
}
render() {
const { profile, navigation } = this.props;
const { categories } = this.state;
// // const tabs = ["Products", "Inspirations", "Shop"];
// const tabs = ["Select_Activity", "Market_Visit"];
// const tabs = ["Select_Activity"];
const tabs = [""];
return (
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Text h1 bold>
Select Activity
</Text>
<Button onPress={() => this.RoleLogin()}>
<Image source={profile.avatar} style={styles.avatar} />
</Button>
{/* <Button onPress={() => navigation.navigate("Settings")}>
<Image source={profile.avatar} style={styles.avatar} />
</Button> */}
</Block>
<Block flex={false} row style={styles.tabs}>
{tabs.map((tab) => this.renderTab(tab))}
</Block>
<ScrollView
showsVerticalScrollIndicator={false}
style={{ paddingVertical: theme.sizes.base * 2 }}
>
<Block flex={false} row space="between" style={styles.categories}>
{categories.map((category) => (
<TouchableOpacity
key={category.name}
onPress={() => navigation.navigate("MarketVisit", { category })}
>
<Card center middle shadow style={styles.category}>
<Badge
margin={[0, 0, 15]}
size={90}
color="rgb(255, 163, 102)"
>
<Image source={category.image} />
</Badge>
<Text medium height={20}>
{category.name}
</Text>
<Text gray caption>
{category.count}
</Text>
</Card>
</TouchableOpacity>
))}
</Block>
</ScrollView>
</Block>
);
}
}
//+++++++++++++++++++++++++++++++++++++++++
//++++++++++++++++++++++++++++++++++++++
Browse.defaultProps = {
profile: mocks.profile,
categories: mocks.categories,
};
export default Browse;
const styles = StyleSheet.create({
header: {
paddingHorizontal: theme.sizes.base * 2,
},
avatar: {
height: theme.sizes.base * 1.0,
width: theme.sizes.base * 1.5,
},
tabs: {
borderBottomColor: theme.colors.gray2,
borderBottomWidth: StyleSheet.hairlineWidth,
marginVertical: theme.sizes.base,
marginHorizontal: theme.sizes.base * 2,
},
tab: {
marginRight: theme.sizes.base * 7,
paddingBottom: theme.sizes.base,
},
active: {
borderBottomColor: theme.colors.secondary,
borderBottomWidth: 3,
},
categories: {
flexWrap: "wrap",
paddingHorizontal: theme.sizes.base * 1.5,
marginBottom: theme.sizes.base * 2,
},
category: {
// this should be dynamic based on screen width
minWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
maxWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
maxHeight: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
},
});
and here is my navigation file
import React from "react";
import { Image } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { NavigationContainer } from "#react-navigation/native";
import { createDrawerNavigator } from "#react-navigation/drawer";
import Welcome from "../screens/Welcome";
import Login from "../screens/Login";
import SignUp from "../screens/SignUp";
import Forgot from "../screens/Forgot";
import Explore from "../screens/Explore";
// import Explore1 from "../screens/Explore1";
// import Explore2 from "../screens/Explore2";
// import Explore3 from "../screens/Explore3";
// import Explore4 from "../screens/Explore4";
// import Explore5 from "../screens/Explore5";
// import Explore6 from "../screens/Explore6";
// import Explore7 from "../screens/Explore7";
// import Explore8 from "../screens/Explore8";
import Browse from "../screens/Browse";
import Product from "../screens/Product";
//import Settings from "../screens/Settings";
import Drawer from "../screens/Drawer";
import MarketVisit from "../screens/MarketVisit";
import { theme } from "../constants";
const screens = createStackNavigator(
{
Welcome,
Login,
SignUp,
Forgot,
Explore,
Drawer,
//Browse,
//Product,
//Settings,
MarketVisit,
// NotificationsScreen,
// App,
},
{
defaultNavigationOptions: {
headerStyle: {
height: theme.sizes.base * 4,
backgroundColor: theme.colors.white, // or 'white
borderBottomColor: "transparent",
elevation: 0 // for android
},
// headerBackImage: <Image source={require("../assets/2.jpg")} />,
headerBackTitle: null,
headerLeftContainerStyle: {
alignItems: "center",
marginLeft: theme.sizes.base * 2,
paddingRight: theme.sizes.base
},
headerRightContainerStyle: {
alignItems: "center",
paddingRight: theme.sizes.base
}
}
}
);
export default createAppContainer(screens);