fix: uikit: avatar

example/package.json

@@ -17,7 +17,8 @@
     "clean": "del-cli android/build android/app/build ios/build",
     "clean-module": "del-cli node_modules",
     "gen-env": "node scripts/generate-env.js",
-    "doctor": "yarn expo-doctor"
+    "doctor": "yarn expo-doctor",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "1.17.11",

example/src/App.tsx

@@ -43,6 +43,7 @@ import { ModalPlaceholder } from './events';
 import { sendEvent } from './events/sendEvent';
 import { AppStringSet } from './I18n/AppCStringSet.en';
 import type { RootParamsList, RootParamsName } from './routes';
+import AvatarPreviewList from './screens/AvatarPreviewList';
 import Chat from './screens/Chat';
 import ContactInfo from './screens/ContactInfo';
 import ContactList from './screens/ContactList';
@@ -345,6 +346,16 @@ export default function App() {
                   }}
                   component={ImagePreview}
                 />
+                <Root.Screen
+                  name="AvatarPreviewList"
+                  options={() => {
+                    return {
+                      headerShown: true,
+                      // presentation: 'fullScreenModal',
+                    };
+                  }}
+                  component={AvatarPreviewList}
+                />
               </Root.Group>
             </Root.Navigator>
           </NavigationContainer>

example/src/__dev__/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import DevApp from './test_image';
+import DevApp from './test_avatar_preview';
 
 export default function dev(): JSX.Element {
   return (

example/src/__dev__/test_avatar_preview.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import { LocalIcon, LocalIconName } from 'react-native-chat-uikit';
+import { ScrollView } from 'react-native-gesture-handler';
+
+const AVATAR_ASSETS = [
+  'agora_avatar_1',
+  'agora_avatar_2',
+  'agora_avatar_3',
+  'agora_avatar_4',
+  'agora_avatar_5',
+  'agora_avatar_6',
+  'agora_avatar_7',
+  'agora_avatar_8',
+  'agora_avatar_9',
+  'agora_avatar_10',
+  'agora_avatar_11',
+  'agora_avatar_12',
+];
+
+export default function TestAvatarPreviewList(): JSX.Element {
+  const { width } = useWindowDimensions();
+  const getSize = () => {
+    return width / 2;
+  };
+  const getItemSize = getSize() * 0.9;
+  const getSpaceSize = getSize() * 0.1;
+  const [selected, setSelected] = React.useState<number | undefined>(undefined);
+  return (
+    <ScrollView
+      style={{
+        flex: 1,
+        backgroundColor: 'black',
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          marginVertical: getSpaceSize,
+          backgroundColor: 'black',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignContent: 'space-between',
+          justifyContent: 'space-evenly',
+          height: (AVATAR_ASSETS.length / 2) * getSize() * 0.95,
+        }}
+      >
+        {AVATAR_ASSETS.map((_, index) => {
+          return (
+            <View
+              style={{
+                width: getItemSize,
+                height: getItemSize,
+                // backgroundColor: 'yellow',
+                borderRadius: 8,
+                overflow: 'hidden',
+              }}
+              onTouchEnd={() => {
+                setSelected(index);
+              }}
+            >
+              <LocalIcon
+                name={AVATAR_ASSETS[index] as LocalIconName}
+                size={getItemSize}
+              />
+              {selected === index ? (
+                <LocalIcon
+                  containerStyle={{
+                    position: 'absolute',
+                  }}
+                  name={'avatar_selected'}
+                  size={getItemSize}
+                />
+              ) : null}
+            </View>
+          );
+        })}
+      </View>
+    </ScrollView>
+  );
+}

example/src/__dev__/test_list3.tsx

@@ -125,7 +125,7 @@ const Item: EqualHeightListItemComponent = (props) => {
   const item = props.data as ItemDataType;
   return (
     <View style={styles.item}>
-      <DefaultAvatar size={sf(50)} radius={sf(25)} />
+      <DefaultAvatar id={item.en} size={sf(50)} radius={sf(25)} />
       <View style={styles.itemText}>
         <Text>{item.en}</Text>
         <Text>{item.ch}</Text>

example/src/components/CustomMessageBubble.tsx

@@ -36,7 +36,7 @@ export const CustomMessageRenderItem = React.memo(
             },
           ]}
         >
-          <DefaultAvatar size={sf(24)} radius={sf(12)} />
+          <DefaultAvatar id={msg.msgId} size={sf(24)} radius={sf(12)} />
         </View>
         <View
           style={[

example/src/events/Events.tsx

@@ -128,7 +128,9 @@ export type DataActionEventType =
   | 'recall_message'
   | 'resend_message'
   | 'on_recall_message'
-  | 'exec_contact_unblock';
+  | 'exec_contact_unblock'
+  | 'select_avatar_index'
+  | 'select_avatar_index_result';
 
 ////////////////////////////////////////////////////////////////////////////////
 //// ActionEventType ///////////////////////////////////////////////////////////

example/src/events/types.tsx

@@ -17,4 +17,9 @@ export type EventType =
   | ActionMenuEventType
   | VoiceStateEventType
   | DataEventType;
-export type BizEventType = UikitBizEventType | 'chat' | 'setting' | 'search';
+export type BizEventType =
+  | UikitBizEventType
+  | 'chat'
+  | 'setting'
+  | 'search'
+  | 'avatar';

example/src/routes/list.tsx

@@ -75,6 +75,10 @@ export type RootParamsList = BottomTabParamsList & {
     option?: {} | undefined;
     params?: { url: string; localPath: string } | undefined;
   };
+  AvatarPreviewList: {
+    option?: {} | undefined;
+    params?: { avatar: string; onResult: (index: number) => void } | undefined;
+  };
 };
 export type RootParamsName = Extract<keyof RootParamsList, string>;
 export type RootParamsNameList = RootParamsName[];
@@ -162,6 +166,10 @@ export const SCREEN_LIST: RootParamsList = {
     option: undefined,
     params: undefined,
   },
+  AvatarPreviewList: {
+    option: undefined,
+    params: undefined,
+  },
 };
 export const SCREEN_NAME_LIST: RootParamsNameList = Object.keys(
   SCREEN_LIST