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;