Independent stack navigation outside tab and drawer navigation in React-Native - react-native

I use
react-native:0.68.2
react-navigation/bottom-tabs:6.3.1
react-navigation/drawer:6.4.1
react-navigation/native:6.0.10
react-navigation/stack:6.2.1
And I have next navigation structure:
<Drawer.Navigator>
<Tab.Navigator>
<Stack.Navigator>
<Screen1>
<Screen2>
</Stack.Navigator>
</Tab.Navigator>
</Drawer.Navigator>
It looks like drawer slide menu from left side and bottom tabs on the main screen. You can see short video of it by next link
What do I want
I want to open new screen from Screen1 like independent screen (without tabs and drawer). It looks like new Activity in Android or new view controller in iOS.

you need to try this
const TabStack = () => {
return (
<Tab.Navigator
initialRouteName="LiveRate"
screenOptions={{
tabBarActiveBackgroundColor: colors.activeTabColor,
tabBarInactiveBackgroundColor: colors.inactiveTabColor,
tabBarStyle: {
backgroundColor: '#f46023',
height:60
},
}}>
<Tab.Screen
name="LiveRate"
component={LiveRateScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Live Rate</Text>)
},
headerShown: false,
tabBarIcon: ({ focused }) => (
<Image
source={
focused
? Images.liverate
: Images.liverate
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
// padding:5
}}
/>
),
}}
/>
<Tab.Screen
name="AboutUs"
component={AboutUsScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>About Us</Text>)
},
headerShown: false,
tabBarIcon: ({ focused, color, size }) => (
<Image
source={
focused
? Images.aboutus
: Images.aboutus
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
// padding:5
}}
/>
),
}}
/>
<Tab.Screen
name="booking"
component={BookingNumberScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Booking Number</Text>)
},
headerShown: false,
tabBarIcon: ({ focused, color, size }) => (
<Image
source={
focused
? Images.booking
: Images.booking
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
}}
/>
),
}}
/>
<Tab.Screen
name="notification"
component={NotificationScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Notification</Text>)
},
headerShown: false,
tabBarIcon: ({ focused, color, size }) => (
<Image
source={
focused
? Images.notificationbell
: Images.notificationbell
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
}}
/>
),
}}
/>
</Tab.Navigator>
);
};
const NavigationUtil = () => {
return (
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName="SlpashScreen">
<Stack.Screen
name="tabStack"
component={TabStack} <----- you also pass your drawer stack
options={{headerShown: false}}
/>
<Stack.Screen
name="Registration"
component={RegistrationScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="SlpashScreen"
component={SlpashScreen}
options={{headerShown: false}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
this is my code
hop it's working

Related

whenever I am trying to navigate to another page, react-navigation is pushing me to the previous page

I find difficulty navigating to another page using react-native-navigation,
the workflow which I am looking for is A -> B and then when I press any button in B should go to A,
what is happening whenever I am clicking the button in A it is going to B but without clicking any button it is redirecting me to A again, the same issue happens in the bottom tab navigator too.
this is my code for stack and bottom tab navigator,
function MyTabs() {
const isDarkMode = useColorScheme() === 'dark';
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarShowLabel: false,
gestureEnabled: false,
tabBarStyle: {
backgroundColor: isDarkMode ? Color.Black : Color.White,
borderTopWidth: 1,
borderColor: isDarkMode ? Color.White : Color.White,
height: 80,
},
tabBarIcon: ({ focused }) => (
<View>
{route.name === 'Profile' ? (
<MaterialIcons
name="person"
size={30}
color={isDarkMode ? (focused ? Color.White : Color.DarkGrey) : (focused ? Color.Black : Color.LightGrey)}
style={{
textAlign: 'center',
marginTop: 10
}}
/>
) : (
<Image
source={Images.Explore}
resizeMode="contain"
style={{
width: 30,
height: 30,
tintColor: isDarkMode ? (focused ? Color.White : Color.DarkGrey) : (focused ? Color.Black : Color.LightGrey),
marginTop: 8
}}
/>
)}
</View>
),
tabBarLabelStyle: {
fontSize: 15,
}
})}
>
<Tab.Screen name="Explore" component={Explore} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
}
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Splash"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="Splash" component={Splash} options={{ headerShown: false }} />
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Register" component={Register} options={{ headerShown: false }} />
<Stack.Screen name="BottomTabs" component={MyTabs} options={{ headerShown: false, gestureEnabled: false, }} />
</Stack.Navigator>
</NavigationContainer>
);
}
I thing you need to know this
click here

Adding padding to react-native bottomTabNavigator

I am trying to figure out how to add some top and bottom padding around my bottom tabs navigator in my react native app. So far any changes I make have no effect. For instance, I tried adding padding: 20 to my style within screenOptions, but this made no difference.
This is my relevant code:
export const ClientScreen = (props) => {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: Colors.primary,
},
headerTintColor: Colors.light,
title: `${props.client?.firstName} ${props.client?.lastName}`,
tabBarActiveTintColor: Colors.light,
tabBarInactiveTintColor: Colors.lightInactive,
tabBarActiveBackgroundColor: Colors.primary,
tabBarInactiveBackgroundColor: Colors.primary,
headerLeft: () => (
<Feather
name='chevron-left'
size={24}
onPress={() => props.navigation.goBack()}
color={styles.colors.textInverse}
style={styles.layout.padding.horizontal}
/>
),
}}
initialRouteName={'Sessions'}
>
<Tab.Screen
name='Sessions'
component={SessionsTab}
initialParams={props}
options={{
tabBarLabel: 'SESSIONS',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Chart'
component={ChartTab}
initialParams={props}
options={{
tabBarLabel: 'CHARTS',
tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Goals'
component={GoalsTab}
initialParams={props}
options={{
tabBarLabel: 'GOALS',
tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
}}
/>
</Tab.Navigator>
);
};
based on the react-native-navigation docs you need to use the option tabBarStyle here's a the docs
or just add this:
<Tab.Navigator
screenOptions={{
tabBarStyle: { padding: 20 },
}}
>

Redirecting to a Stack navigator page from bottomTabNavigator

I have a project with a Stack and bottomTab navigator and I want to redirect to a stack navigator page from the bottomTabNavigator
Here is the code for my project:
Routes.js i.e Stack Navigator
<UserContext.Provider value={{userDetails, setUserDetails}}>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({scene, previous, navigation}) => {
const {options} = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return <Header title={title} />;
},
}}>
{userDetails ? (
<>
<Stack.Screen
name="home"
options={{title: 'Home'}}
component={BottomTabNavigator}
/>
<Stack.Screen
name="library"
component={Library}
options={() => ({
headerTitle: 'My Library',
})}
/>
<Stack.Screen
name="bookDetails"
component={BookDetails}
options={{title: 'Book Details'}}
/>
<Stack.Screen
name="reviews"
component={AllReviews}
options={{headerTitle: 'View all Reviews'}}
/>
</>
) : (
<Stack.Screen name="Login" component={Login} />
)}
</Stack.Navigator>
</UserContext.Provider>
bottomTabNavigator.js:
<Tab.Navigator
tabBarOptions={{activeTintColor: 'green', style: {height: tabBarHeight}}}>
<Tab.Screen
name={'Home'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="home" size={27} color={color} />
),
}}
/>
<Tab.Screen
name={'Search'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="search1" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'My Library'}
component={Library}
options={{
tabBarIcon: ({color}) => {
return (
<View
style={{
position: 'absolute',
bottom: 7,
height: 65,
width: 65,
borderRadius: 65,
backgroundColor: 'green',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
}}>
<AntDesign name="book" size={40} color={'white'} />
</View>
);
},
}}
/>
<Tab.Screen
name={'Browse'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="earth" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'More'}
component={More}
options={{
tabBarIcon: ({color}) => (
<Feather name="more-horizontal" size={30} color={color} />
),
}}
/>
</Tab.Navigator>
What I want to do is when I tap on My Library in the tabNavigator the headerTitle still says home, I want it to say ""
Here is how I tried to achieve this:
useLayoutEffect(() => {
navigation.setOptions({headerTitle: 'My Library'});
}, [navigation, route]);
Any help is appreciated
Thanks
I tried doing it automatically but I couldn't figure it out, but what I did was use my custom header component on each screen and hardcode the title of the screen, so the process may not be as efficient as letting react navigation do all the work, but it works fine for me
One workaround you can use is to hide the header in the Home Component of your Stack navigator. You can then create custom headers for each of the tab screens.

React-Native How to change the overall background color of the Tabbar on the focused other tabs

I want to change tabbar BackgroundColor.
I have 5 tabs on bottom navigation.
first, When I touch home tab. I want to change Tabbar's backgroundcolor is 'transparent'
second, When I touch others(four) tab. I want to change Tabbar's backgroundcolor is 'white'
also I want to change activeTintColor By other tab.
Here is my Code, and Screen shot(I want to make this Screen shot).
Now my home screen. Home Screen shot
I want this other screen. screen shot
import { View } from 'react-native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import MyHomeStack from './HomeStack';
import MyProfileStack from './ProfileStack';
import InformScreen from '../screens/InformScreen';
import SearchScreen from '../screens/SearchScreen';
import UploadScreen from '../screens/UploadScreen';
import CustomIcon from '../components/CustomIcon';
const Tab = createBottomTabNavigator();
function MainTabStack(){
return (
<Tab.Navigator
initialRouteName="Home"
labelStyle={{ fontSize: 12 }}
tabBarOptions={{
style: {
height: '9%',
backgroundColor: 'transparent',
position:'absolute',
bottom:0,
elevation:0
},
activeTintColor: '#000000',
showLabel: false,
}}>
<Tab.Screen
name="Home"
component={MyHomeStack}
options={{
tabBarIcon: ({ color, size }) => (
<CustomIcon name="nav_home" color={color} size={size}/>
)
}}
/>
<Tab.Screen
name="Search"
component={SearchScreen}
options={{
tabBarColor:'red',
tabBarIcon: ({ color, size }) => (
<CustomIcon name="nav_store" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Upload"
component={UploadScreen}
options={{
tabBarIcon: ({ color, size }) => (
<CustomIcon name="nav_upload" color={color} size={28} />
),
}}
listeners={({ navigation }) => ({
tabPress: event => {
event.preventDefault();
navigation.navigate('UploadScreen');
},
})}
/>
<Tab.Screen
name="Inform"
component={InformScreen}
options={{
tabBarIcon: ({ color, size }) => (
<CustomIcon name="nav_closet" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="mypage"
component={MyProfileStack}
options={{
tabBarIcon: ({ color, size }) => (
<CustomIcon name="mypage" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
export default MainTabStack;
Inside the tabbar options, have you tried changing the backgroundColor to your desired color of choice dynamically.
constructor(props){
this.tabIndex=0;
}
<Tab.Navigator
initialRouteName="Home"
labelStyle={{ fontSize: 12 }}
screenOptions={({ route }) => ({
if (route.name === 'Home') {
this.tabIndex=4;
} else if (route.name === 'Settings') {
this.tabIndex=5;
}
})}
tabBarOptions={{
style: {
height: '9%',
backgroundColor: this.tabIndex==4?"#fff":"transparent",
//backgroundColor: 'transparent',
position:'absolute',
bottom:0,
elevation:0
},
activeTintColor: '#000000',
showLabel: false,
}}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

react navigation 5 header is not shown

Using react navigation 5, I want to create a dynamic map for all my Drawer Screens, but the header is not shown with code:
<NavigationContainer>
<Drawer.Navigator
drawerContent={props => <DrawerContent {...props} />}>
{stackNavigItens.map((props, r) => (
<Drawer.Screen
key={r.name}
name={r.name}
component={({navigation}) => (
<Stack.Navigator
initialRouteName="Home"
headerMode="screen"
screenOptions={{
headerTitle: r.label,
headerStyle: {
backgroundColor: '#2e72e8',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
{...props}>
<Stack.Screen
name={r.name}
component={r.component}
options={{
title: r.label,
headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#2e72e8"
onPress={() => {
navigation.openDrawer();
}}
/>
),
}}
{...props}
/>
</Stack.Navigator>
)}
{...props}
/>
))}
</Drawer.Navigator>
</NavigationContainer>
If I use every createStackNavigator in a const like below, and then call inside component of the Drawer the header shows correctly, I don't know Why ? I think maybe because of the {navigation} arrow function, but don't work too.
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#2e72e8',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#2e72e8"
onPress={() => {
navigation.openDrawer();
}}
/>
),
}}
/>
</HomeStack.Navigator> );