react native navigation nested stack does not match - react-native

How to write the code on the back button (on the top left corner) of the calendar page to lead to the HomeCG page? It always leads to the main page. Please help
AuthStack.js
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import Login from "../screens/Login";
import Register from "../screens/Register"
import Forgot from "../screens/Forgot"
import ResetPass from "../screens/ResetPass"
import ConfirmReset from "../screens/ConfirmReset"
import InOutScreen from '../screens/InOutScreen';
import BottomTapCM from "./BottomTapCM";
import BottomTapCG from './BottomTapCG'
import CmCgScreen from '../screens/CmCgScreen';
const Stack = createStackNavigator();
const AuthStack = () => {
return (
<Stack.Navigator screenOptions={{}}>
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false}}
/>
<Stack.Screen
name="Register"
component={Register}
options={{headerShown: false}}
/>
<Stack.Screen
name="Forgot"
component={Forgot}
options={{headerShown: false}}
/>
<Stack.Screen
name="ResetPass"
component={ResetPass}
options={{headerShown: false}}
/>
<Stack.Screen
name="ConfirmReset"
component={ConfirmReset}
options={{headerShown: false}}
/>
<Stack.Screen
name="BottomTapCM"
component={BottomTapCM}
/>
<Stack.Screen
name="BottomTapCG"
component={BottomTapCG}
options={{headerShown: false}}
/>
<Stack.Screen
name="CmCgScreen"
component={CmCgScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="InOutScreen"
component={InOutScreen}
options={{ title: "ลงชื่อเข้า-ออกงาน" , headerTitleAlign:"center" }}
/>
</Stack.Navigator>
);
};
export default AuthStack;
BottomTapCG.js
import * as React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import {useNavigation} from '#react-navigation/native';
import HomeCg from '../screens/HomeCg';
import NotifyNav from './NotifyNav'
import CalendarNav from './CalendarNav';
import EditProfileNav from './EditProfileNav';
import SchCgNav from './SchCgNav';
import { View, Center } from 'native-base'
import { Ionicons ,FontAwesome5 ,AntDesign} from "#expo/vector-icons";
const Tab = createBottomTabNavigator();
export default function BottomTapCG() {
const navigation = useNavigation();
return (
<Tab.Navigator
screenOptions={{ tabBarShowLabel: false ,headerShown: false ,tabBarStyle:{ height: 60,shadowColor: '#000', }}}>
<Tab.Screen name="HomeCg"
component={HomeCg} options={{
tabBarIcon: ({ focused }) => (
<View style={{ top: '-3%'}} >
<Ionicons
name="home-sharp"
size={25}
color={focused ? '#35609C': 'gray'}
></Ionicons>
</View> )}} />
<Tab.Screen
name="CalendarNav"
component={CalendarNav}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ top: '-3%'}} >
<FontAwesome5
name="calendar-alt"
size={25}
color={focused ? '#35609C': 'gray'}
>
</FontAwesome5>
</View> )}} />
<Tab.Screen name="SchCgNav" component={SchCgNav}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ top: '-30%'}} >
<AntDesign
name="pluscircle"
size={50}
color={focused ? '#35609C': 'gray'}
></AntDesign>
</View> )}} />
<Tab.Screen name="NotifyNav" component={NotifyNav} options={{
tabBarIcon: ({ focused }) => (
<View style={{ top: '-3%'}} >
<Ionicons
name="notifications"
size={25}
color={focused ? '#35609C': 'gray'}
></Ionicons>
</View> )}} />
<Tab.Screen name="EditProfileNav" component={EditProfileNav} options={{
tabBarIcon: ({ focused }) => (
<View style={{ top: '-3%'}}>
<FontAwesome5
name="user-alt"
size={25}
color={focused ? '#35609C': 'gray'}
></FontAwesome5>
</View> )}} />
</Tab.Navigator>
);
}
CalendarNav.js
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import CalendarList from '../screens/CalendarList';
const Stack = createStackNavigator();
const CalendarNav = () => {
return (
<Stack.Navigator screenOptions={{}} >
<Stack.Screen
name="CalendarList"
component={CalendarList}
options={{title: "ปฎิทิน" , headerTitleAlign:"center"}}
/>
</Stack.Navigator>
);
};
export default CalendarNav;
Device preview 1:
Device preview 2:
Device preview 3:
Full project:
https://github.com/Naphaporn-Tangai/CEPP-project1

Related

How to add clickable Icons to reactNative navbar

I want to add clickable icons to my reactnative header component
Currently it looks like this
next to the title text on the right I want to add an audio symbol but i cant figure out on doing this.
I have seen plenty of answers that work with navigation but Im using drawers so i dnt understand how to add icons.
This is what my code looks like
app.js
<NavigationContainer >
<Drawer.Navigator initialRouteName="MetalDetector" screenOptions={{
drawerStyle: {
backgroundColor: '#3e4463',
width: 220
},
}}>
<Drawer.Screen name="MetalDetector" component={Home} options={{drawerLabel: '🔦 MetalDetector'}} />
<Drawer.Screen name="Settings" component={Settings} options={{drawerLabel: '🛠 Settings'}} />
<Drawer.Screen name="Calibrate" component={Home} options={{drawerLabel: '💡 Calibration'}}/>
<Drawer.Screen name="Feedback" component={Home} options={{drawerLabel: '👨‍👩‍👧‍👦 Feedback'}}/>
and this is my home.js file which renders content for the metaldetector page
<View style={styles.container}>
<View style={styles.buttonContainer}>
//Cde is below
</View>
</View>
);
}
So where would i add icons to the titlemenu?
I found this here, which covers on how to set the header using stackscreen
https://reactnavigation.org/docs/headers/
but since I use drawer.screen i dont know how to apply that
Option 1:
The DrawerContent file
import React, { useState } from 'react';
import { View, StyleSheet, Image, Alert, Text } from 'react-native';
import { Title, Drawer } from 'react-native-paper';
import { DrawerContentScrollView, DrawerItem } from '#react-navigation/drawer';
import { FontAwesome, MaterialIcons, AntDesign, Ionicons } from '#expo/vector-icons';
import colors from '../config/colors';
const AppDrawerItem = ({ label , icon, onPress, ...props }) => {
return (
<DrawerItem
icon={icon}
label={label}
onPress={onPress}
/>
);
}
export function DrawerContent(props) {
return (
<View style={{ flex: 1 }}>
<DrawerContentScrollView {...props}>
<Drawer.Section style={styles.drawerSection}>
<AppDrawerItem
onPress={() => { setIsDeletePressed(false); props.navigation.navigate('Dashboard') }}
label="Dashboard"
icon={({ color, size, focused }) => (
<MaterialIcons
name="dashboard"
color={focused ? colors.primary : color}
size={size}
/>
)}
{...props}
/>
<AppDrawerItem
onPress={() => { setIsDeletePressed(false); props.navigation.navigate('Messages') }}
label="Messages"
icon={({ color, size, focused }) => (
<MaterialIcons
name="notifications"
color={focused ? colors.primary : color}
size={size}
/>
)}
{...props}
/>
</Drawer.Section>
</DrawerContentScrollView >
</View >
);
}
DrawerNavigator
<Drawer.Navigator
screenOptions={{
headerTitleStyle: {
color: "black",
opacity: 0.9
},
headerTintColor: colors.primary,
swipeEnabled: false,
headerTitleAlign: 'center',
headerShadowVisible: false,
}} drawerContent={props => <DrawerContent {...props} />} > //---here you can add drawercontent component
<Drawer.Screen name="Dashboard" component={HomeScreen} />
<Drawer.Screen options={{ headerShown: true }} name="Messages" component={NotificationNavigator} />
</Drawer.Navigator >
Edit:
Option2:
You can add the icon in the <Drawer.Screen> tag.
<Drawer.Screen name="Feed" component={Feed} options={{
title: 'Home',
drawerIcon: ({focused, size}) => (
<Ionicons
name="md-home"
size={size}
color={focused ? '#7cc' : '#ccc'}
/>
),
}} />

React drawer Navigation lags while opening

I am nesting a drawer navigation on top of a stack navigator. It works, but the problem is that it lags excessively while opening the drawer. What could be the issue here?
import React, { useEffect, useState } from "react";
import CartIcon from "../CartIcon";
import Home from "../../screens/Home";
import Orders from "../../screens/Orders";
import ProductsScreen from "../../screens/ProductsScreen";
import Cart from "../../screens/Cart";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import HomeHeader from "../HomeHeader";
import OrdersDetails from "../../screens/OrdersDetails";
import { createDrawerNavigator } from "#react-navigation/drawer";
const Drawer = createDrawerNavigator()
const Stack = createNativeStackNavigator();
My drawer navigator here
const HomeScreen=()=> {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} options={() => ({
title: "BarPoint",
headerRight: () => <HomeHeader />,
})} />
</Drawer.Navigator>
);
}
stack navigator here
const AppStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ProductsScreen"
component={ProductsScreen}
options={({ navigation }) => ({
title: "Products",
headerRight: () => <CartIcon navigation={navigation} />,
})}
/>
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Orders" component={Orders} />
<Stack.Screen name="OrdersDetails" component={OrdersDetails} />
</Stack.Navigator>
);
};
export default AppStack;
Add useLegacyImplementation in Drawer.Navigator and compile.
const HomeScreen=()=> {
return (
<Drawer.Navigator
useLegacyImplementation //<- Add here
>
<Drawer.Screen name="Home" component={Home} options={() => ({
title: "BarPoint",
headerRight: () => <HomeHeader />,
})} />
</Drawer.Navigator>
);
}
It occurred an Error to me by adding useLegacyImplementation.
Here is my code.Also,I can't touch off my sidebar by navigation.openDrawer
my devices: xcode13 react-navigation6.x
import React ,{Component}from 'react';
import { Button, View ,Text,StyleSheet} from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer=createDrawerNavigator()
//two function
function HomeScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>Home Screen</Text>
<Button title={"Open Drawer"} onPress={()=>prop.navigation.openDrawer()}/>
<Button title={"Toggle Drawer"} onPress={()=>prop.navigation.toggleDrawer()}/>
</View>
)
}
function NewsScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>News Screen</Text>
<Button title={"jump to Home"} onPress={()=>prop.navigation.navigate('Home')}/>
</View>
)
}
export default class index extends Component{
render(){
return(
<Drawer.Navigator useLegacyImplementation={true} >
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="News" component={NewsScreen} />
</Drawer.Navigator>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems: 'center',
},
text:{
fontSize:40
}
})

State is updating but it is not updating the new value on scrren?

I don't seem to have any problems using setState in other pages of my project but in the app.js it just does not work? I am very new to react native.
I am calling the function 'handleacount' from another page and it gets the data and I just want to update the 'Acount'
The state is updating because it alerts but it does not update when it has already been rendered? Am I missing something?
The page App.js is :
import 'react-native-gesture-handler';
import React, { useState, Component } from "react";
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Constants from 'expo-constants';
import IconBadge from 'react-native-icon-badge';
import { Text, View, StyleSheet } from 'react-native';
import HomeScreen from './pages/HomeScreen';
import SearchScreen from './pages/SearchScreen';
import SettingsScreen from './pages/SettingsScreen';
import MapScreen from './pages/MapScreen';
import NotificationsScreen from './pages/NotificationsScreen';
import { ListItem, Avatar, Badge, Icon, withBadge } from 'react-native-elements'
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const MessagesIcon = ({ tintColor }) => (
<Icon
type="MaterialCommunityIcons"
name="checkcircle"
size={24}
color={tintColor}
/>
);
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Home Page', headerShown: false }}
/>
<Stack.Screen
name="Search"
component={SearchScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Notifications"
component={NotificationsScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Map"
component={MapScreen}
changeoptions={{ headerShown: false }}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
changeoptions={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
function SettingsStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
function App() {
function App() {
const [Acount, setAcount] = useState(0)
this.state = {
Acount: 2
};
handleacount = (data) => {
this.state = {
Acount: 9
};
alert(this.state.acount)
}
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#b08cf3',
inactiveTintColor: 'black',
}}>
<Tab.Screen
name="HomeStack"
component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={30} />
),
}}
/>
<Tab.Screen
name="SearchStack"
component={SearchScreen}
options={{
tabBarLabel: 'Search',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="account-search"
color={color}
size={30}
/>
),
}}
/>
<Tab.Screen
name="NotificationsStack"
component={NotificationsScreen}
options={{
tabBarBadge: 5,
tabBarLabel: 'Notifications',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="bell" color={color} size={30} />
),
}}
/>
<Tab.Screen
name="MapStack"
component={MapScreen}
options={{
tabBarLabel: 'Map',
tabBarIcon: ({ focused, color, size }) => {
return (
<View>
<MaterialCommunityIcons name="map-marker" size={30} color='rgb(68,68,68)' style={{ marginTop:0 }}/>
<View style={{position:'absolute', bottom:32, left:-38 }}>
<IconBadge
MainElement={
<View>
</View>
}
BadgeElement={
// here your text in badge icon
<Text style={{fontWeight: 900,fontFamily: "sans-serif-medium",
fontSize: 14,color:'#FFFFFF', Top:10 }}>{ this.state.acount }</Text>
}
IconBadgeStyle={
{width:20,
height:20,
borderWidth: 2,
borderColor: "#b5b5b5",
backgroundColor: '#ff8a8a'}
}
/></View>
</View>
);
},
}}
/>
<Tab.Screen
name="SettingsStack"
component={SettingsScreen}
options={{
tabBarLabel: 'Account',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="account"
color={color}
size={30}
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
export default App;
State belongs to the component so you should move it inside the App component like this
function App() {
const [account, setAccount] = useState(0)
...
}
But how do you call the setAccount from another page you wonder and there you need to have a look into React Context or Redux.
Context: https://reactjs.org/docs/context.html
Redux: https://redux.js.org/
I sorted it by place this in another page:
<Button
onPress={() => {increment(2)}} title="Click Me"
/>
Then in the function App I added
// State: a counter value
const [counter, setCounter] = useState(0)
increment = (data) => {
setCounter(data)
}
Not entirely sure how or why this works though?

react navigation version 5, hide top bar when render tab screen

I've created nested navigation using react-navigation version 5, But when tab screen render I need to hide top bar, I've follow step from here https://reactnavigation.org/docs/hiding-tabbar-in-screens/ but still not working
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {navigationRef} from './NavigationService';
import {Home, Appointment, Settings, Map, ProviderDetails} from 'app/screens';
import {PRIMARY_COLOR, SECONDARY_COLOR} from '../config/color';
import ThemeController from '../components/ThemeController';
import {StatusBar} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
const Stack = createStackNavigator();
const homeOptions = {
title: 'Home',
headerTitleStyle: {
fontWeight: 'bold',
},
headerRight: () => <ThemeController />,
};
const HomeStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
};
const MapStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Map" component={Map} />
<Stack.Screen name="ProviderDetails" component={ProviderDetails} />
</Stack.Navigator>
);
};
const Tab = createBottomTabNavigator();
function App(props) {
const {theme} = props;
return (
<NavigationContainer ref={navigationRef} theme={theme}>
<StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
<Tab.Navigator
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
if (route.name === 'Home') {
return <MaterialIcons name="home" size={size} color={color} />;
} else if (route.name === 'Map') {
return (
<FontAwesome5 name="map-marked-alt" size={size} color={color} />
);
} else if (route.name === 'Appointment') {
return (
<FontAwesome5 name="calendar-alt" size={size} color={color} />
);
} else if (route.name === 'More') {
return (
<MaterialIcons name="more-horiz" size={size} color={color} />
);
}
},
})}
tabBarOptions={{
activeTintColor: PRIMARY_COLOR,
inactiveTintColor: SECONDARY_COLOR,
}}>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Map" component={MapStack} />
<Tab.Screen name="Appointment" component={Appointment} />
<Tab.Screen name="More" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
Create HomeStack and MapStack stack navigator and pass that value to Tab Navigator,
In bellow image you can see in Home and Map tab display top bar.
Use headerShown option
const HomeStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" options={{ headerShown: false }} component={Home} />
</Stack.Navigator>
);
};

Bottom navigation is not working on react-native

https://reactnavigation.org/docs/material-bottom-tab-navigator
Using the above blog ,i have created bottom navigation bar.Error says on line 29 "component" predefined property of Tab.Screen should be capital.
Error in App
This is my BottomNavigation.js file
import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import NotificationsNoneIcon from '#material-ui/icons/NotificationsNone';
import AddCircleOutlineTwoToneIcon from '#material-ui/icons/AddCircleOutlineTwoTone';
import HomeOutlinedIcon from '#material-ui/icons/HomeOutlined';
import WbIncandescentOutlinedIcon from '#material-ui/icons/WbIncandescentOutlined';
import HomeScreen from '../screens/HomeScreen';
import AddDocument from '../screens/Notification';
import Notification from '../screens/AddDocument';
import AddProject from '../screens/AddProject';
const Tab = createMaterialBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
labeled="false"
activeColor="black"
labelStyle={{fontSize: 12}}
//style={{ backgroundColor: "black" }}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{tabBarIcon: () => <HomeOutlinedIcon />}}
/>
<Tab.Screen
name="AddDocument"
component={AddDocument}
options={{tabBarIcon: () => <AddCircleOutlineTwoToneIcon />}}
/>
<Tab.Screen
name="AddProject"
component={AddProject}
options={{tabBarIcon: () => <WbIncandescentOutlinedIcon />}}
tabBarOptions={{showLabel: false}}
/>
<Tab.Screen
name="Notification"
component={Notification}
options={{tabBarIcon: () => <NotificationsNoneIcon />}}
/>
</Tab.Navigator>
);
}
export default class BottomNavigation extends React.Component {
render() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
}
component is a property of Tab.screen but I am still getting error
Please help me
Thanks in advance
I was returning "NavigationContainer", Now I am simply returning Tab.Navigator to my App.js after that i am able to get bottom Navigator
My App.js looks like
export default function App() {
return (
<NavigationContainer>
<BottomNavigation />
</NavigationContainer>
);
}
i just removed NavigationContainer from BottomNavigation.But now my icon isn't getting displayed.
Modified BottomNavigation.js File
import * as React from 'react';
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import HomeScreen from '../screens/HomeScreen';
import AddDocument from '../screens/Notification';
import Notification from '../screens/AddDocument';
import AddProject from '../screens/AddProject';
const Tab = createMaterialBottomTabNavigator();
export default function BottomNavigation(props) {
return (
<Tab.Navigator
// labeled="false"
labelStyle={{fontSize: 12}}
inactiveColor="white"
activeColor="white"
//style={{backgroundColor: 'black'}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({color}) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={26}
/>
),
}}
/>
<Tab.Screen
name="AddDocument"
component={AddDocument}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="addfile" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="AddProject"
component={AddProject}
options={{
tabBarIcon: ({color}) => (
<SimpleLineIcons name="magnifier-add" color={color} size={26} />
),
}}
tabBarOptions={{showLabel: false}}
/>
<Tab.Screen
name="Notification"
component={Notification}
options={{
tabBarIcon: ({color}) => (
<MaterialCommunityIcons
name="bell-outline"
color={color}
size={26}
/>
),
}}
/>
</Tab.Navigator>
);
}
My icons were not getting displayed so I referred to https://github.com/oblador/react-native-vector-icons/issues/463 just executed
react-native link
and now my bottom Navigation Bar is working perfectly.