[FEATURE] Hub (DO NOT MERGE)

components/CustomTopBar.tsx

@@ -9,7 +9,7 @@ import Animated, {
   withSequence,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { HomeIcon } from './Icons';
+import { HomeIcon, DiscoverIcon } from './Icons';
 
 const { width: screenWidth } = Dimensions.get('window');
 const ANIMATION_DURATION = 300;
@@ -19,16 +19,24 @@ const SPRING_CONFIG = {
   mass: 1,
 };
 
-const getIcon = (_routeName: string, focused: boolean) => {
+const getIcon = (routeName: string, focused: boolean) => {
   const iconProps = {
     size: focused ? 28 : 24,
     focused,
   };
 
+  if (routeName === 'Discover') {
+    return <DiscoverIcon {...iconProps} />;
+  }
+
   return <HomeIcon {...iconProps} />;
 };
 
-const getTabColor = (_routeName: string) => {
+const getTabColor = (routeName: string) => {
+  if (routeName === 'Discover') {
+    return 'text-emerald-600';
+  }
+
   return 'text-emerald-600';
 };
 

navigation/TabNavigation.tsx

@@ -3,15 +3,28 @@ import {
   BottomTabScreenProps,
 } from '@react-navigation/bottom-tabs';
 import { Text } from 'react-native';
-import Animated, { SlideInRight, SlideOutLeft } from 'react-native-reanimated';
+import Animated, {
+  SlideInRight,
+  SlideOutLeft,
+  FadeIn,
+  FadeOut,
+} from 'react-native-reanimated';
 import HomeScreen from '../screens/HomeScreen';
 import { CustomTabBar } from '../components/CustomTopBar';
-import { TabParamList } from '../navigation';
+import { TabParamList, RootStackParamList } from '../navigation';
+import { CompositeScreenProps } from '@react-navigation/native';
+import { StackScreenProps } from '@react-navigation/stack';
+import DiscoverScreen from '../screens/DiscoverScreen';
 
 const Tab = createBottomTabNavigator<TabParamList>();
 
 type HomeScreenProps = BottomTabScreenProps<TabParamList, 'Home'>;
 
+type DiscoverScreenProps = CompositeScreenProps<
+  BottomTabScreenProps<TabParamList, 'Discover'>,
+  StackScreenProps<RootStackParamList>
+>;
+
 const AnimatedHomeScreen = (_props: HomeScreenProps) => (
   <Animated.View
     entering={SlideInRight.duration(300).springify()}
@@ -22,6 +35,16 @@ const AnimatedHomeScreen = (_props: HomeScreenProps) => (
   </Animated.View>
 );
 
+const AnimatedDiscoverScreen = (props: DiscoverScreenProps) => (
+  <Animated.View
+    entering={FadeIn.duration(300)}
+    exiting={FadeOut.duration(300)}
+    style={{ flex: 1 }}
+  >
+    <DiscoverScreen {...props} />
+  </Animated.View>
+);
+
 export const TabNavigation = () => {
   return (
     <Tab.Navigator
@@ -53,6 +76,15 @@ export const TabNavigation = () => {
           headerTitleAlign: 'center',
         }}
       />
+
+      <Tab.Screen
+        name="Discover"
+        component={AnimatedDiscoverScreen}
+        options={{
+          headerTitle: 'Discover',
+          headerTitleAlign: 'center',
+        }}
+      />
     </Tab.Navigator>
   );
 };

navigation/index.ts

@@ -1,5 +1,6 @@
 export type TabParamList = {
   Home: undefined;
+  Discover: undefined;
 };
 
 export type RootStackParamList = {

screens/DiscoverScreen.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  FlatList,
+  SafeAreaView,
+  StatusBar,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { StackScreenProps } from '@react-navigation/stack';
+import { RootStackParamList, TabParamList } from '../navigation';
+import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
+import { CompositeScreenProps } from '@react-navigation/native';
+
+const linkData = [
+  {
+    id: '1',
+    title: 'Template DApp',
+    url: 'https://devnet.template-dapp.multiversx.com',
+  },
+  {
+    id: '2',
+    title: 'xExchange',
+    url: 'https://devnet.xexchange.com',
+  },
+];
+
+type DiscoverScreenProps = CompositeScreenProps<
+  BottomTabScreenProps<TabParamList, 'Discover'>,
+  StackScreenProps<RootStackParamList>
+>;
+
+const DiscoverScreen: React.FC<DiscoverScreenProps> = ({ navigation }) => {
+  const handleLinkPress = (url: string, title: string) => {
+    navigation.navigate('DAppScreen', { url: url, title: title });
+  };
+
+  const renderLinkItem = ({
+    item,
+  }: {
+    item: { url: string; title: string };
+  }) => (
+    <TouchableOpacity
+      className="bg-white p-4 my-2 mx-5 rounded-xl border border-gray-200 shadow-sm active:bg-gray-50"
+      onPress={() => handleLinkPress(item.url, item.title)}
+    >
+      <Text className="text-lg font-semibold text-gray-800 mb-1">
+        {item.title}
+      </Text>
+      <Text className="text-sm text-gray-500 italic">{item.url}</Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <StatusBar barStyle="dark-content" backgroundColor="#f9fafb" />
+
+      <View className="bg-white px-5 py-4 border-b border-gray-200">
+        <Text className="text-2xl font-bold text-gray-900">Links</Text>
+      </View>
+
+      <FlatList
+        data={linkData}
+        renderItem={renderLinkItem}
+        keyExtractor={item => item.id}
+        className="flex-1"
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingVertical: 8 }}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default DiscoverScreen;