t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import Feather from "@expo/vector-icons/Feather";
2import MaterialIcons from "@expo/vector-icons/MaterialCommunityIcons";
3import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
4import { createNativeStackNavigator } from "@react-navigation/native-stack";
5import AlbumDetails from "./screens/AlbumDetails";
6import ArtistDetails from "./screens/ArtistDetails";
7import Home from "./screens/Home";
8import Library from "./screens/Library";
9import Profile from "./screens/Profile";
10import Search from "./screens/Search";
11import SongDetails from "./screens/SongDetails";
12import Story from "./screens/Story";
13
14const Tab = createBottomTabNavigator();
15const Stack = createNativeStackNavigator();
16const HomeStack = createNativeStackNavigator();
17const ProfileStack = createNativeStackNavigator();
18const LibraryStack = createNativeStackNavigator();
19const SearchStack = createNativeStackNavigator();
20
21function HomeStackScreen() {
22 return (
23 <HomeStack.Navigator
24 screenOptions={{
25 contentStyle: { backgroundColor: "#000" },
26 headerShown: false,
27 animation: "default",
28 }}
29 >
30 <HomeStack.Screen name="Home" component={Home} />
31 <HomeStack.Screen name="AlbumDetails" component={AlbumDetails} />
32 <HomeStack.Screen name="ArtistDetails" component={ArtistDetails} />
33 <HomeStack.Screen name="SongDetails" component={SongDetails} />
34 <HomeStack.Screen name="UserLibrary" component={Library} />
35 <HomeStack.Screen name="UserProfile" component={Profile} />
36 <HomeStack.Screen name="Story" component={Story} />
37 </HomeStack.Navigator>
38 );
39}
40
41function ProfileStackScreen() {
42 return (
43 <ProfileStack.Navigator
44 screenOptions={{
45 contentStyle: { backgroundColor: "#000" },
46 headerShown: false,
47 animation: "default",
48 }}
49 >
50 <ProfileStack.Screen name="Profile" component={Profile} />
51 <ProfileStack.Screen name="AlbumDetails" component={AlbumDetails} />
52 <ProfileStack.Screen name="ArtistDetails" component={ArtistDetails} />
53 <ProfileStack.Screen name="SongDetails" component={SongDetails} />
54 <ProfileStack.Screen name="UserLibrary" component={Library} />
55 </ProfileStack.Navigator>
56 );
57}
58
59function LibraryStackScreen() {
60 return (
61 <LibraryStack.Navigator
62 screenOptions={{
63 contentStyle: { backgroundColor: "#000" },
64 headerShown: false,
65 animation: "default",
66 }}
67 >
68 <LibraryStack.Screen name="Library" component={Library} />
69 <LibraryStack.Screen name="AlbumDetails" component={AlbumDetails} />
70 <LibraryStack.Screen name="ArtistDetails" component={ArtistDetails} />
71 <LibraryStack.Screen name="SongDetails" component={SongDetails} />
72 </LibraryStack.Navigator>
73 );
74}
75
76function SearchStackScreen() {
77 return (
78 <SearchStack.Navigator
79 screenOptions={{
80 contentStyle: { backgroundColor: "#000" },
81 headerShown: false,
82 animation: "default",
83 }}
84 >
85 <SearchStack.Screen name="Search" component={Search} />
86 <SearchStack.Screen name="AlbumDetails" component={AlbumDetails} />
87 <SearchStack.Screen name="ArtistDetails" component={ArtistDetails} />
88 <SearchStack.Screen name="SongDetails" component={SongDetails} />
89 <SearchStack.Screen name="UserLibrary" component={Library} />
90 <SearchStack.Screen name="UserProfile" component={Profile} />
91 </SearchStack.Navigator>
92 );
93}
94
95function HomeTabs() {
96 return (
97 <Tab.Navigator
98 screenOptions={({ route }) => ({
99 headerShown: false,
100 sceneStyle: {
101 backgroundColor: "#000",
102 },
103 tabBarStyle: {
104 backgroundColor: "#000",
105 borderTopWidth: 0,
106 height: 80,
107 paddingTop: 10,
108 },
109 tabBarShowLabel: false,
110 tabBarActiveTintColor: "#fff",
111 tabBarIcon: ({ focused, color }) => {
112 let iconName: string = "";
113 switch (route.name) {
114 case "HomeTab":
115 return (
116 <MaterialIcons
117 name={"home-variant-outline"}
118 size={32}
119 color={color}
120 />
121 );
122 case "SearchTab":
123 iconName = focused ? "search" : "search";
124 return (
125 <Feather
126 name={iconName as any}
127 size={29}
128 color={color}
129 className="mt-[1px]"
130 />
131 );
132 case "LibraryTab":
133 iconName = focused
134 ? "music-box-multiple-outline"
135 : "music-box-multiple-outline";
136 break;
137 case "ProfileTab":
138 iconName = focused ? "account-outline" : "account-outline";
139 break;
140 default:
141 break;
142 }
143 return (
144 <MaterialIcons name={iconName as any} size={32} color={color} />
145 );
146 },
147 })}
148 >
149 <Tab.Screen name="HomeTab" component={HomeStackScreen} />
150 <Tab.Screen name="SearchTab" component={SearchStackScreen} />
151 <Tab.Screen name="LibraryTab" component={LibraryStackScreen} />
152 <Tab.Screen name="ProfileTab" component={ProfileStackScreen} />
153 </Tab.Navigator>
154 );
155}
156
157export function RootStack() {
158 return (
159 <Stack.Navigator
160 screenOptions={{
161 contentStyle: { backgroundColor: "#000" },
162 headerShown: false,
163 }}
164 >
165 <Stack.Screen name="HomeTabs" component={HomeTabs} />
166 </Stack.Navigator>
167 );
168}
169
170export type RootStackParamList = {
171 Home: undefined;
172 HomeTabs: undefined;
173 AlbumDetails: {
174 uri: string;
175 };
176 ArtistDetails: {
177 uri: string;
178 };
179 SongDetails: {
180 uri: string;
181 };
182 Library: undefined;
183 UserLibrary: {
184 handle?: string;
185 tab: number;
186 };
187 Profile: undefined;
188 UserProfile: {
189 handle: string;
190 };
191 Story: {
192 index: number;
193 };
194};