Skip to content

Commit 49a8a83

Browse files
JafferAbbas-codesJafferAbbas-codes
committed
Design custom bottom tab navigator
1 parent 660efef commit 49a8a83

File tree

3 files changed

+122
-28
lines changed

3 files changed

+122
-28
lines changed

‎navigation/BuyerStack.js

+113-23
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
2+
import {StyleSheet, View} from 'react-native';
23
import {createStackNavigator} from '@react-navigation/stack';
34
import {createDrawerNavigator} from '@react-navigation/drawer';
4-
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
5+
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
56
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
67
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
78
import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -23,10 +24,11 @@ import AvailableSellers from '../screens/buyer/AvailableSellers';
2324
import SellerProfileForBuyer from '../screens/buyer/SellerProfile';
2425
import RequestDetails from '../screens/buyer/RequestDetails';
2526
import BidsOnBuyerRequest from '../screens/buyer/BidsOnBuyerRequests';
27+
import {TouchableOpacity} from 'react-native';
2628

2729
const Stack = createStackNavigator();
2830
const Drawer = createDrawerNavigator();
29-
const Tab = createMaterialBottomTabNavigator();
31+
const Tab = createBottomTabNavigator();
3032

3133
const BuyerStack = (myProps) => {
3234
return (
@@ -37,58 +39,124 @@ const BuyerStack = (myProps) => {
3739
);
3840
};
3941

42+
const CustomTabBarButtom = ({children, onPress, focused}) => (
43+
<TouchableOpacity
44+
style={{
45+
top: -20,
46+
justifyContent: 'center',
47+
alignItems: 'center',
48+
...styles.shadow,
49+
}}
50+
onPress={onPress}>
51+
<View
52+
style={{
53+
width: 60,
54+
height: 60,
55+
borderRadius: 35,
56+
backgroundColor: '#b33aa3',
57+
}}>
58+
{children}
59+
</View>
60+
</TouchableOpacity>
61+
);
62+
4063
const MainBottomTabStack = () => {
4164
return (
4265
<Tab.Navigator
43-
initialRouteName="Home"
44-
activeColor="#291F28"
45-
inactiveColor="#D8BFD6"
46-
style={{backgroundColor: 'tomato'}}>
66+
// initialRouteName="Home"
67+
// activeColor="#291F28"
68+
// inactiveColor="#D8BFD6"
69+
tabBarOptions={{
70+
showLabel: false,
71+
72+
style: {
73+
position: 'absolute',
74+
elevation: 0,
75+
border: 4,
76+
height: 55,
77+
// backgroundColor: '#FFFFFF',
78+
79+
// borderColor: '#000000',
80+
borderRadius: 25,
81+
// backgroundColor: 'red',
82+
...styles.shadow,
83+
},
84+
}}>
4785
<Tab.Screen
4886
name="Home"
4987
component={HomeStackScreen}
5088
options={{
51-
tabBarLabel: 'Home',
89+
// tabBarLabel: 'Home',
5290
// tabBarColor: '#FF9900',
53-
tabBarColor: '#FFFFFF',
54-
tabBarIcon: ({color}) => (
55-
<MaterialCommunityIcons name="home" color={color} size={26} />
91+
// tabBarColor: '#FFFFFF',
92+
// tabBarOptions: {showLabel: false},
93+
tabBarIcon: ({color, focused}) => (
94+
<MaterialCommunityIcons
95+
name="home"
96+
color={focused ? '#000000' : '#D8BFD6'}
97+
size={26}
98+
/>
5699
),
57100
}}
58101
/>
59102
<Tab.Screen
60103
name="ChatStackScreen"
61104
component={ChatStackScreen}
62105
options={{
63-
tabBarLabel: 'Chats',
106+
// tabBarLabel: 'Chats',
64107
// tabBarColor: '#CC0000',
65-
tabBarColor: '#FFFFFF',
66-
tabBarIcon: ({color}) => (
67-
<Ionicons name="chatbox-ellipses-outline" color={color} size={26} />
108+
// tabBarColor: '#FFFFFF',
109+
tabBarIcon: ({color, focused}) => (
110+
<Ionicons
111+
name="chatbox-ellipses"
112+
color={focused ? '#000000' : '#D8BFD6'}
113+
size={26}
114+
/>
115+
),
116+
}}
117+
/>
118+
<Tab.Screen
119+
name="PostRequestStack"
120+
component={PostRequestStack}
121+
options={{
122+
// tabBarLabel: 'Updates',
123+
// tabBarColor: '#FF6699',
124+
// tabBarColor: '#FFFFFF',
125+
tabBarIcon: ({color, focused}) => (
126+
<MaterialCommunityIcons name="plus" color={'#D8BFD6'} size={26} />
68127
),
128+
tabBarButton: (props) => <CustomTabBarButtom {...props} />,
69129
}}
70130
/>
71131
<Tab.Screen
72132
name="YourRequestsStackScreen"
73133
component={YourRequestsStackScreen}
74134
options={{
75-
tabBarLabel: 'Requests',
135+
// tabBarLabel: 'Requests',
76136
// tabBarColor: '#FF6699',
77-
tabBarColor: '#FFFFFF',
78-
tabBarIcon: ({color}) => (
79-
<FontAwesome5 name="file-alt" color={color} size={26} />
137+
// tabBarColor: '#FFFFFF',
138+
tabBarIcon: ({color, focused}) => (
139+
<MaterialCommunityIcons
140+
name="clipboard-list"
141+
color={focused ? '#000000' : '#D8BFD6'}
142+
size={26}
143+
/>
80144
),
81145
}}
82146
/>
83147
<Tab.Screen
84148
name="ProfileStackScreen"
85149
component={ProfileStackScreen}
86150
options={{
87-
tabBarLabel: 'Profile',
151+
// tabBarLabel: 'Profile',
88152
// tabBarColor: '#CC33FF',
89-
tabBarColor: '#FFFFFF',
90-
tabBarIcon: ({color}) => (
91-
<MaterialCommunityIcons name="account" color={color} size={26} />
153+
// tabBarColor: '#FFFFFF',
154+
tabBarIcon: ({color, focused}) => (
155+
<MaterialCommunityIcons
156+
name="account"
157+
color={focused ? '#000000' : '#D8BFD6'}
158+
size={26}
159+
/>
92160
),
93161
}}
94162
/>
@@ -124,7 +192,17 @@ const ChatStackScreen = () => {
124192
</Stack.Navigator>
125193
);
126194
};
127-
195+
const PostRequestStack = () => {
196+
return (
197+
<Stack.Navigator
198+
screenOptions={{
199+
headerShown: false,
200+
}}>
201+
<Stack.Screen name="BuyerRequests" component={BuyerRequests} />
202+
{/* <Stack.Screen name="Explorer" component={Explorer} /> */}
203+
</Stack.Navigator>
204+
);
205+
};
128206
const YourRequestsStackScreen = () => {
129207
return (
130208
<Stack.Navigator
@@ -149,5 +227,17 @@ const ProfileStackScreen = () => {
149227
</Stack.Navigator>
150228
);
151229
};
230+
const styles = StyleSheet.create({
231+
shadow: {
232+
shadowColor: '#7F5Df0',
233+
shadowOffset: {
234+
width: 0,
235+
height: 10,
236+
},
237+
shadowOpacity: 0.25,
238+
shadowRadius: 3.5,
239+
elevation: 5,
240+
},
241+
});
152242

153243
export default BuyerStack;

‎navigation/SellerStack.js

+3
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ const MainBottomTabStack = () => {
3737
// activeColor="#fff"
3838
activeColor="#291F28"
3939
inactiveColor="#D8BFD6"
40+
tabBarOptions={{
41+
showLabel: false,
42+
}}
4043
// style={{backgroundColor: 'tomato'}}
4144
>
4245
<Tab.Screen

‎redux/authActions.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { SIGNIN_USER, SIGNUP_USER, CLEAR_USER, SET_LOADING } from './ActionTypes';
1+
import {SIGNIN_USER, SIGNUP_USER, CLEAR_USER, SET_LOADING} from './ActionTypes';
22
import axios from 'axios';
3-
import { URL, loginRoute, signupRoute, verifyCNICRoute } from '../config/const';
3+
import {URL, loginRoute, signupRoute, verifyCNICRoute} from '../config/const';
44

55
export const login = (body) => async (dispatch) => {
66
try {
@@ -14,9 +14,10 @@ export const login = (body) => async (dispatch) => {
1414
});
1515
return response.data.result;
1616
} catch (error) {
17+
console.log('error signin', error);
1718
if (error?.response?.data?.result) {
1819
console.log('error123 signin : ', error.response.data);
19-
return { error: error.response.data.result };
20+
return {error: error.response.data.result};
2021
}
2122
}
2223
};
@@ -36,7 +37,7 @@ export const signup = (body) => async (dispatch) => {
3637
} catch (error) {
3738
if (error?.response?.data?.result) {
3839
console.log('error123 signin : ', error.response.data);
39-
return { error: error.response.data.result };
40+
return {error: error.response.data.result};
4041
}
4142
}
4243
};
@@ -56,7 +57,7 @@ export const verifyCNIC = async (body) => {
5657
} catch (error) {
5758
if (error?.response?.data?.result) {
5859
console.log('error123 Route : ', error.response.data);
59-
return { error: error.response.data.result };
60+
return {error: error.response.data.result};
6061
}
6162
}
6263
};

0 commit comments

Comments
 (0)