Skip to content

Commit de513fd

Browse files
Krishna KantKrishna Kant
Krishna Kant
authored and
Krishna Kant
committed
adding tabs layout and showing settings data
1 parent 5837e82 commit de513fd

File tree

9 files changed

+290
-0
lines changed

9 files changed

+290
-0
lines changed

‎app/(tabs)/_layout.tsx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import Colors from '@/constants/Colors';
2+
import {
3+
Ionicons,
4+
MaterialCommunityIcons,
5+
MaterialIcons,
6+
} from '@expo/vector-icons';
7+
import { Tabs } from 'expo-router';
8+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
9+
10+
const TabsLayout = () => {
11+
return (
12+
<GestureHandlerRootView style={{ flex: 1 }}>
13+
<Tabs
14+
screenOptions={{
15+
tabBarStyle: {
16+
backgroundColor: Colors.background,
17+
},
18+
tabBarActiveTintColor: Colors.primary,
19+
tabBarInactiveBackgroundColor: Colors.background,
20+
tabBarActiveBackgroundColor: Colors.background,
21+
headerStyle: {
22+
backgroundColor: Colors.background,
23+
},
24+
headerShadowVisible: false,
25+
}}
26+
>
27+
<Tabs.Screen
28+
name="updates"
29+
options={{
30+
title: 'Updates',
31+
tabBarIcon: ({ size, color }) => (
32+
<MaterialIcons name="update" size={size} color={color} />
33+
),
34+
}}
35+
/>
36+
<Tabs.Screen
37+
name="calls"
38+
options={{
39+
title: 'Calls',
40+
tabBarIcon: ({ size, color }) => (
41+
<MaterialCommunityIcons
42+
name="phone-outline"
43+
size={size}
44+
color={color}
45+
/>
46+
),
47+
}}
48+
/>
49+
<Tabs.Screen
50+
name="communities"
51+
options={{
52+
title: 'Communities',
53+
tabBarIcon: ({ size, color }) => (
54+
<MaterialIcons name="people" size={size} color={color} />
55+
),
56+
}}
57+
/>
58+
<Tabs.Screen
59+
name="chats"
60+
options={{
61+
title: 'Chats',
62+
tabBarIcon: ({ size, color }) => (
63+
<Ionicons name="chatbubbles" size={size} color={color} />
64+
),
65+
}}
66+
/>
67+
<Tabs.Screen
68+
name="settings"
69+
options={{
70+
title: 'Settings',
71+
tabBarIcon: ({ size, color }) => (
72+
<Ionicons name="cog" size={size} color={color} />
73+
),
74+
}}
75+
/>
76+
</Tabs>
77+
</GestureHandlerRootView>
78+
);
79+
};
80+
81+
export default TabsLayout;

‎app/(tabs)/calls.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { View, Text } from 'react-native';
2+
import React from 'react';
3+
4+
const CallsScreen = () => {
5+
return (
6+
<View>
7+
<Text>CallsScreen</Text>
8+
</View>
9+
);
10+
};
11+
12+
export default CallsScreen;

‎app/(tabs)/communities.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { View, Text } from 'react-native';
2+
import React from 'react';
3+
4+
const CommunitiesScreen = () => {
5+
return (
6+
<View>
7+
<Text>CommunitiesScreen</Text>
8+
</View>
9+
);
10+
};
11+
12+
export default CommunitiesScreen;

‎app/(tabs)/settings.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
2+
import { useAuth } from '@clerk/clerk-expo';
3+
4+
import Colors from '@/constants/Colors';
5+
import SettingsItem from '@/components/settings/SettingsItem';
6+
7+
const SettingsScreen = () => {
8+
const { signOut } = useAuth();
9+
return (
10+
<View style={{ flex: 1, backgroundColor: Colors.background }}>
11+
<ScrollView>
12+
<SettingsItem />
13+
14+
<TouchableOpacity onPress={() => signOut()}>
15+
<Text
16+
style={{
17+
color: Colors.primary,
18+
fontSize: 18,
19+
paddingVertical: 14,
20+
textAlign: 'center',
21+
}}
22+
>
23+
Log Out
24+
</Text>
25+
</TouchableOpacity>
26+
</ScrollView>
27+
</View>
28+
);
29+
};
30+
31+
export default SettingsScreen;

‎app/(tabs)/updates.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { View, Text } from 'react-native';
2+
import React from 'react';
3+
4+
const UpdatesScreen = () => {
5+
return (
6+
<View>
7+
<Text>UpdatesScreen</Text>
8+
</View>
9+
);
10+
};
11+
12+
export default UpdatesScreen;

‎app/_layout.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ const InitialLayout = () => {
9595
headerBackTitle: 'Edit number',
9696
}}
9797
/>
98+
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
9899
</Stack>
99100
);
100101
};

‎components/BoxedIcon.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Ionicons } from '@expo/vector-icons';
2+
import { View, Text } from 'react-native';
3+
4+
export type BoxedIconProps = {
5+
name: typeof Ionicons.defaultProps;
6+
backgroundColor: string;
7+
};
8+
9+
const BoxedIcon = ({ name, backgroundColor }: BoxedIconProps) => {
10+
return (
11+
<View style={{ backgroundColor, padding: 4, borderRadius: 6 }}>
12+
<Ionicons name={name} size={22} color="white" />
13+
</View>
14+
);
15+
};
16+
17+
export default BoxedIcon;

‎components/settings/SettingsItem.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { View, Text, FlatList } from 'react-native';
2+
import React from 'react';
3+
import { defaultStyles } from '@/constants/Styles';
4+
import { devices, items, support } from '@/constants/Settings';
5+
import BoxedIcon from '../BoxedIcon';
6+
import { Ionicons } from '@expo/vector-icons';
7+
8+
type ItemProps = {
9+
item: { name: string; icon: string; backgroundColor: string };
10+
};
11+
12+
const Item = ({ item }: ItemProps) => {
13+
return (
14+
<View style={defaultStyles.item}>
15+
<BoxedIcon name={item.icon} backgroundColor={item.backgroundColor} />
16+
<Text style={{ flex: 1, fontSize: 18 }}>{item.name}</Text>
17+
<Ionicons name="chevron-forward" size={20} />
18+
</View>
19+
);
20+
};
21+
22+
const SettingsItem = () => {
23+
return (
24+
<>
25+
{/* DEVICES LINKS */}
26+
<View style={defaultStyles.block}>
27+
<FlatList
28+
data={devices}
29+
scrollEnabled={false}
30+
ItemSeparatorComponent={() => (
31+
<View style={defaultStyles.separator} />
32+
)}
33+
renderItem={({ item }) => <Item item={item} />}
34+
/>
35+
</View>
36+
37+
{/* ITEMS LINKS */}
38+
<View style={defaultStyles.block}>
39+
<FlatList
40+
data={items}
41+
scrollEnabled={false}
42+
ItemSeparatorComponent={() => (
43+
<View style={defaultStyles.separator} />
44+
)}
45+
renderItem={({ item }) => <Item item={item} />}
46+
/>
47+
</View>
48+
49+
{/* SUPPORT LINKS */}
50+
<View style={defaultStyles.block}>
51+
<FlatList
52+
data={support}
53+
scrollEnabled={false}
54+
ItemSeparatorComponent={() => (
55+
<View style={defaultStyles.separator} />
56+
)}
57+
renderItem={({ item }) => <Item item={item} />}
58+
/>
59+
</View>
60+
</>
61+
);
62+
};
63+
64+
export default SettingsItem;

‎constants/Settings.ts

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import Colors from './Colors';
2+
3+
export const devices = [
4+
{
5+
name: 'Broadcast Lists',
6+
icon: 'megaphone',
7+
backgroundColor: Colors.green,
8+
},
9+
{
10+
name: 'Starred Messages',
11+
icon: 'star',
12+
backgroundColor: Colors.yellow,
13+
},
14+
{
15+
name: 'Linked Devices',
16+
icon: 'laptop-outline',
17+
backgroundColor: Colors.green,
18+
},
19+
];
20+
21+
export const items = [
22+
{
23+
name: 'Account',
24+
icon: 'key',
25+
backgroundColor: Colors.primary,
26+
},
27+
{
28+
name: 'Privacy',
29+
icon: 'lock-closed',
30+
backgroundColor: '#33A5D1',
31+
},
32+
{
33+
name: 'Chats',
34+
icon: 'logo-whatsapp',
35+
backgroundColor: Colors.green,
36+
},
37+
{
38+
name: 'Notifications',
39+
icon: 'notifications',
40+
backgroundColor: Colors.red,
41+
},
42+
{
43+
name: 'Storage and Data',
44+
icon: 'repeat',
45+
backgroundColor: Colors.green,
46+
},
47+
];
48+
49+
export const support = [
50+
{
51+
name: 'Help',
52+
icon: 'information',
53+
backgroundColor: Colors.primary,
54+
},
55+
{
56+
name: 'Tell a Friend',
57+
icon: 'heart',
58+
backgroundColor: Colors.red,
59+
},
60+
];

0 commit comments

Comments
 (0)