diff --git a/components/CustomTopBar.tsx b/components/CustomTopBar.tsx
index 88aa8e9..0e43c39 100644
--- a/components/CustomTopBar.tsx
+++ b/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 ;
+ }
+
return ;
};
-const getTabColor = (_routeName: string) => {
+const getTabColor = (routeName: string) => {
+ if (routeName === 'Discover') {
+ return 'text-emerald-600';
+ }
+
return 'text-emerald-600';
};
diff --git a/navigation/TabNavigation.tsx b/navigation/TabNavigation.tsx
index 486283c..9d1999c 100644
--- a/navigation/TabNavigation.tsx
+++ b/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();
type HomeScreenProps = BottomTabScreenProps;
+type DiscoverScreenProps = CompositeScreenProps<
+ BottomTabScreenProps,
+ StackScreenProps
+>;
+
const AnimatedHomeScreen = (_props: HomeScreenProps) => (
(
);
+const AnimatedDiscoverScreen = (props: DiscoverScreenProps) => (
+
+
+
+);
+
export const TabNavigation = () => {
return (
{
headerTitleAlign: 'center',
}}
/>
+
+
);
};
diff --git a/navigation/index.ts b/navigation/index.ts
index 45f8d33..51acf45 100644
--- a/navigation/index.ts
+++ b/navigation/index.ts
@@ -1,5 +1,6 @@
export type TabParamList = {
Home: undefined;
+ Discover: undefined;
};
export type RootStackParamList = {
diff --git a/screens/DiscoverScreen.tsx b/screens/DiscoverScreen.tsx
new file mode 100644
index 0000000..c13754e
--- /dev/null
+++ b/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,
+ StackScreenProps
+>;
+
+const DiscoverScreen: React.FC = ({ navigation }) => {
+ const handleLinkPress = (url: string, title: string) => {
+ navigation.navigate('DAppScreen', { url: url, title: title });
+ };
+
+ const renderLinkItem = ({
+ item,
+ }: {
+ item: { url: string; title: string };
+ }) => (
+ handleLinkPress(item.url, item.title)}
+ >
+
+ {item.title}
+
+ {item.url}
+
+ );
+
+ return (
+
+
+
+
+ Links
+
+
+ item.id}
+ className="flex-1"
+ showsVerticalScrollIndicator={false}
+ contentContainerStyle={{ paddingVertical: 8 }}
+ />
+
+ );
+};
+
+export default DiscoverScreen;