style: update ux for hosted demo (#144)

samples/react-native-group-chat/app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "react-native-group-chat",
+    "name": "Chat SDK",
     "slug": "react-native-group-chat",
     "version": "1.0.0",
     "orientation": "portrait",
@@ -14,14 +14,14 @@
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.pubnub.chat-sdk"
+      "bundleIdentifier": "com.pubnub.chatsdk"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.piotr.suwala.reactnativegroupchat"
+      "package": "com.pubnub.chatsdk"
     },
     "web": {
       "favicon": "./assets/favicon.png"

samples/react-native-group-chat/screens/ordinary/login-screen/LoginScreen.tsx

@@ -7,7 +7,7 @@ import { RootStackParamList } from "../../../types"
 import ChatIcon from "../../../assets/chat.svg"
 
 export function LoginScreen({ navigation }: StackScreenProps<RootStackParamList, "login">) {
-  const [name, setName] = useState("test-user")
+  const [name, setName] = useState("test-user-" + Math.floor(Math.random() * 999))
 
   return (
     <KeyboardAvoidingView
@@ -28,7 +28,7 @@ export function LoginScreen({ navigation }: StackScreenProps<RootStackParamList,
         </Text>
         <Gap value={96} />
 
-        <TextInput label="User ID" value={name} onChangeText={setName} />
+        <TextInput label="Choose a User ID / Name" value={name} onChangeText={setName} />
         <Gap value={96} />
 
         <Button size="md" onPress={() => navigation.replace("mainRoutes", { name })}>

samples/react-native-group-chat/screens/ordinary/new-chat-screen/NewChatScreen.tsx

@@ -59,7 +59,9 @@ export function NewChatScreen({ navigation }: StackScreenProps<HomeStackParamLis
       <Gap value={20} />
 
       <FlatList
-        data={users.filter((user) => user.name?.toLowerCase().includes(searchText.toLowerCase()))}
+        data={users
+          .sort((a, b) => b.lastActiveTimestamp - a.lastActiveTimestamp)
+          .filter((user) => user.name?.toLowerCase().includes(searchText.toLowerCase()))}
         renderItem={({ item: user }) => (
           <ListItem
             avatar={<Avatar source={user} showIndicator />}