diff --git a/mobile/tradeverse/app/(tabs)/account/followers.jsx b/mobile/tradeverse/app/(tabs)/account/followers.jsx
new file mode 100644
index 00000000..41066e63
--- /dev/null
+++ b/mobile/tradeverse/app/(tabs)/account/followers.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import FollowersScreen from '../../../screens/followers'
+
+export default function Followers() {
+ return
+}
diff --git a/mobile/tradeverse/config/screen-paths.js b/mobile/tradeverse/config/screen-paths.js
index 2e4a7a34..a15b7bf7 100644
--- a/mobile/tradeverse/config/screen-paths.js
+++ b/mobile/tradeverse/config/screen-paths.js
@@ -44,7 +44,8 @@ const paths = {
PORTFOLIO: `${roots.ACCOUNT}/portfolio`,
FOLLOWED_TOPICS: `${roots.ACCOUNT}/followed-topics`,
FOLLOWED_USERS: `${roots.ACCOUNT}/followed-users`,
- MY_POSTS: `${roots.ACCOUNT}/my-posts`
+ MY_POSTS: `${roots.ACCOUNT}/my-posts`,
+ FOLLOWERS: `${roots.ACCOUNT}/followers`
},
}
export default paths
diff --git a/mobile/tradeverse/screens/account-root/profile-config.js b/mobile/tradeverse/screens/account-root/profile-config.js
index 4a786fe5..803bd047 100644
--- a/mobile/tradeverse/screens/account-root/profile-config.js
+++ b/mobile/tradeverse/screens/account-root/profile-config.js
@@ -57,8 +57,7 @@ const ProfileConfig = {
value: 'my_followers',
title: 'Followers',
icon: ,
- href: '#',
- disabled: true,
+ href: paths.ACCOUNT.FOLLOWERS,
},
{
value: 'my_following',
diff --git a/mobile/tradeverse/screens/followers/index.jsx b/mobile/tradeverse/screens/followers/index.jsx
new file mode 100644
index 00000000..9cc7b1a8
--- /dev/null
+++ b/mobile/tradeverse/screens/followers/index.jsx
@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import GlobalScreen from '../../components/ui/global-screen';
+import FullScrollView from '../../components/ui/full-scroll-view';
+import { Stack } from 'expo-router';
+import api from '../../services/_axios';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const FollowersScreen = () => {
+ const [followers, setFollowers] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchFollowers = async () => {
+ try {
+ const token = await AsyncStorage.getItem('authToken');
+ const response = await api.get('/api/follow/get-followers', {
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ setFollowers(response.data.followers || []);
+ } catch (error) {
+ console.error('Error fetching followers:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchFollowers();
+ }, []);
+
+ return (
+
+
+
+ {loading ? (
+ Loading followers...
+ ) : (
+
+
+ Followers Count: {followers.length}
+
+ {followers.map((follower, index) => (
+
+
+
+
+ {follower.username}
+
+
+ {follower.name}
+
+
+
+ ))}
+
+ )}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ padding: 16,
+ },
+ countText: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ marginBottom: 16,
+ textAlign: 'center'
+ },
+ loadingText: {
+ fontSize: 16,
+ textAlign: 'center',
+ marginTop: 20,
+ },
+ followerItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginBottom: 12,
+ },
+ userPhoto: {
+ width: 50,
+ height: 50,
+ borderRadius: 25,
+ marginRight: 12,
+ },
+ textContainer: {
+ flex: 1,
+ },
+ username: {
+ fontSize: 16,
+ fontWeight: '600',
+ },
+ name: {
+ fontSize: 14,
+ color: '#555',
+ },
+});
+
+export default FollowersScreen;