Now user details will be pulled from the static JSON data in sample app

Author: kaushikRitik

src/components/login/Login.tsx

@@ -9,13 +9,35 @@ import { Style } from "./style";
 import { Create } from "./Create";
 import { CometChatContext, CometChatUIKit } from "@cometchat/chat-uikit-react-native";
 import { AppStyle } from "../../AppStyle";
-
+import {users} from '../../utils/usersList'
 export const Login = ({ navigation }) => {
 
     const [isLoginInProgress, setLoginInProgress] = React.useState(false);
+    const [usersList, setUsersList] = React.useState<any>([]);
 
     const { theme } = useContext(CometChatContext);
 
+    React.useEffect(() => {
+        fetch("https://assets.cometchat.io/sampleapp/sampledata.json")
+          .then((response) => {
+            console.log(response.status);
+            if (response.status === 200) return response.json();
+            else {
+              setUsersList(users);
+              return {};
+            }
+          })
+          .then((res: any) => {
+            if (res.users)
+              setUsersList(() =>
+                res.users.map((item: any) => ({
+                  ...item,
+                  avatar: { uri: item.avatar },
+                }))
+              );
+          });
+      }, []);
+
     React.useEffect(() => {
         CometChatUIKit.getLoggedInUser()
             .then(user => {
@@ -64,25 +86,16 @@ export const Login = ({ navigation }) => {
                     <Text style={{ color: theme.palette.getAccent(), textAlign: "center" }}>Login with one of our sample users</Text>
 
                     <View style={{ flexDirection: 'row', justifyContent: "space-between", marginVertical: 15, flexWrap: "wrap" }}>
-                        <RoudedButton style={Style.LoginButton} onPress={() => makeLogin("superhero1")}>
-                            <Image style={Style.ButtonImage} source={Ironman} />
-                            <Text style={Style.ButtonText}> SUPERHERO 1</Text>
-                        </RoudedButton>
-
-                        <RoudedButton style={Style.LoginButton} onPress={() => makeLogin("superhero2")}>
-                            <Image style={Style.ButtonImage} source={Captainamerica} />
-                            <Text style={Style.ButtonText}> SUPERHERO 2</Text>
-                        </RoudedButton>
-
-                        <RoudedButton style={Style.LoginButton} onPress={() => makeLogin("superhero3")}>
-                            <Image style={Style.ButtonImage} source={Spiderman} />
-                            <Text style={Style.ButtonText}> SUPERHERO 3</Text>
-                        </RoudedButton>
-
-                        <RoudedButton style={Style.LoginButton} onPress={() => makeLogin("superhero4")}>
-                            <Image style={Style.ButtonImage} source={Wolverine} />
-                            <Text style={Style.ButtonText}> SUPERHERO 4</Text>
-                        </RoudedButton>
+                        { Boolean(usersList.length) &&
+                            usersList.map((user:any) =>{
+                                return (
+                                    <RoudedButton style={Style.LoginButton} onPress={() => makeLogin(user.uid)}>
+                                        <Image style={Style.ButtonImage} source={user.avatar} />
+                                        <Text style={Style.ButtonText}>{user.name}</Text>
+                                    </RoudedButton>
+                                )
+                            })
+                        }
                     </View>
 
                     <Text style={{ textAlign: "center" }}>or else login countinue with</Text>
@@ -97,7 +110,6 @@ export const Login = ({ navigation }) => {
                 </View>
                 <View style={{ alignItems: 'center' }}>
                     <Create navigator={navigation} />
-                    {/* <Text>2023 CometChat Inc.</Text> */}
                 </View>
             </View>
         </SafeAreaView>

src/components/login/style.ts

@@ -22,10 +22,13 @@ export const Style = StyleSheet.create({
         backgroundColor: 'black',
         marginBottom: 8,
         padding: 16,
-        width: "48%"
+        width: "48%",
+        justifyContent: "flex-start"
+
     },
     ButtonText: {
-        color: 'white'
+        color: 'white',
+        marginLeft: 10
     },
     CustomLoginButton: {
         backgroundColor: 'rgb(50,150,255)',

src/resources/cyclops.png

@@ -46,8 +46,10 @@ import CallRecording from './Calllogrecording.png';
 import CallLogs from './Calllogs.png';
 import CallParticipants from './callparticipants.png';
 import Scheduler from './schedule.png';
+import Cyclops from './cyclops.png'
 
 export {
+  Cyclops,
   Details,
   BanUser,
   Transfer,

src/resources/index.ts

@@ -0,0 +1,32 @@
+import {
+   Ironman, Captainamerica,
+  Spiderman, Wolverine,Cyclops
+} from "../resources";
+export const users = [
+    {
+      "uid": "superhero1",
+      "name": "Iron Man",
+      "avatar": Ironman
+    },
+    {
+      "uid": "superhero2",
+      "name": "Captain America",
+      "avatar": Captainamerica
+    },
+    {
+      "uid": "superhero3",
+      "name": "Spiderman",
+      "avatar": Spiderman
+    },
+    {
+      "uid": "superhero4",
+      "name": "Wolverine",
+      "avatar": Wolverine
+    },
+    {
+      "uid": "superhero5",
+      "name": "Cyclops",
+      "avatar": Cyclops
+    }
+]
+