@smart-link/rn-im 1.0.22 → 1.0.24

package/dist/pages/message/components/messageBar/VoiceBar.js

@@ -1,27 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -31,40 +7,38 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const rn_ui_1 = require("@smart-link/rn-ui");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
-const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
-const rn_ui_2 = require("@smart-link/rn-ui");
-const useImSelector_1 = require("../../../../hooks/useImSelector");
-const init_1 = require("../../../../init");
-const react_native_fs_1 = __importDefault(require("react-native-fs"));
-const react_native_audio_recorder_player_1 = __importStar(require("react-native-audio-recorder-player"));
-const react_native_permissions_1 = __importStar(require("react-native-permissions"));
-const file_1 = require("../../../../utils/file");
+import { dp, Toast } from '@smart-link/rn-ui';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { View, Text, StyleSheet, Platform, AppState } from 'react-native';
+import useTranslation from '../../../../hooks/useTranslation';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { TopViewGetInstance } from '@smart-link/rn-ui';
+import { useConversation } from '../../../../hooks/useImSelector';
+import { getImManager } from '../../../../init';
+import RNFS from 'react-native-fs';
+import { AudioEncoderAndroidType, AudioSourceAndroidType, AVEncoderAudioQualityIOSType, AVEncodingOption, OutputFormatAndroidType } from 'react-native-audio-recorder-player';
+import Permissions, { PERMISSIONS } from 'react-native-permissions';
+import { getResourcePath } from "../../../../utils/file";
+import { AudioRecorder } from "../../../../utils/audio";
+import { uuidv4 } from "react-native-compressor";
 const btPressInColor = '#ccc', btPressOutColor = '#fff';
-const audioRecorderPlayer = new react_native_audio_recorder_player_1.default();
 const audioSet = {
-    AudioEncoderAndroid: react_native_audio_recorder_player_1.AudioEncoderAndroidType.AAC,
-    AudioSourceAndroid: react_native_audio_recorder_player_1.AudioSourceAndroidType.MIC,
-    AVModeIOS: react_native_audio_recorder_player_1.AVModeIOSOption.measurement,
-    AVEncoderAudioQualityKeyIOS: react_native_audio_recorder_player_1.AVEncoderAudioQualityIOSType.high,
+    AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
+    AudioSamplingRateAndroid: 44100,
+    AudioSourceAndroid: AudioSourceAndroidType.MIC,
+    AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.medium,
+    AVFormatIDKeyIOS: AVEncodingOption.aac,
     AVNumberOfChannelsKeyIOS: 2,
-    AVFormatIDKeyIOS: react_native_audio_recorder_player_1.AVEncodingOption.aac,
+    OutputFormatAndroid: OutputFormatAndroidType.MPEG_4
 };
 const VoiceBar = () => {
-    const { currentConversation } = (0, useImSelector_1.useConversation)();
-    const { t } = (0, useTranslation_1.default)();
+    const { currentConversation } = useConversation();
+    const { t } = useTranslation();
     const btPressInText = t('pressIn');
     const btPressOutText = t('pressOut');
-    const [recordText, setRecordText] = (0, react_1.useState)(btPressOutText);
-    const [recordColor, setRecordColor] = (0, react_1.useState)(btPressOutColor);
-    const recordManger = (0, react_1.useRef)({
+    const [recordText, setRecordText] = useState(btPressOutText);
+    const [recordColor, setRecordColor] = useState(btPressOutColor);
+    const recordManger = useRef({
         pageY: 0,
         recordTime: 0,
         cancelRecord: false,
@@ -87,12 +61,12 @@ const VoiceBar = () => {
             icon: 'mic-none',
         },
     };
-    const onResponderGrant = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+    const onResponderGrant = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (recordManger.current.recording)
             return;
         try {
             recordManger.current.recording = true;
-            audioRecorderPlayer.addRecordBackListener((e) => {
+            AudioRecorder.addRecordBackListener((e) => {
                 recordManger.current.recordTime = e.currentPosition / 1000;
                 if (RecordToast.key) {
                     if (recordManger.current.cancelRecord) {
@@ -103,23 +77,23 @@ const VoiceBar = () => {
                     }
                 }
             });
-            const relativePath = (0, file_1.getResourcePath)(`record_${Date.now()}.aac`, 'voice');
-            const path = react_native_1.Platform.select({
+            const relativePath = getResourcePath(`record_${uuidv4()}.m4a`, 'voice');
+            const path = Platform.select({
                 ios: `file://${relativePath}`,
                 android: relativePath,
             });
-            yield audioRecorderPlayer.startRecorder(path, audioSet, false);
+            yield AudioRecorder.startRecorder(path, audioSet, false);
         }
         catch (err) {
-            console.error('Failed to start recording', err);
+            console.log('Failed to start recording: ', err);
             RecordToast.hide();
-            return rn_ui_1.Toast.error(t('recordingFail'));
+            return Toast.error(t('recordingFail'));
         }
         setRecordText(btPressInText);
         setRecordColor(btPressInColor);
         RecordToast.show(recordStatus.recording, 0);
     }), []);
-    const onResponderMove = (0, react_1.useCallback)(({ nativeEvent }) => {
+    const onResponderMove = useCallback(({ nativeEvent }) => {
         if (!recordManger.current.pageY) {
             recordManger.current.pageY = nativeEvent.pageY;
         }
@@ -133,28 +107,43 @@ const VoiceBar = () => {
             RecordToast.show(recordStatus.recording, recordManger.current.recordTime);
         }
     }, []);
-    const onResponderRelease = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+    const onResponderRelease = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         try {
+            if (recordManger.current.recordTime < 1) {
+                AudioRecorder.removeRecordBackListener();
+                RecordToast.show(recordStatus.short, recordManger.current.recordTime);
+                setTimeout(() => {
+                    try {
+                        AudioRecorder.stopRecorder().then(uri => {
+                            console.log('stopRecorder cancel: ', uri);
+                            recordManger.current.recording = false;
+                            setRecordText(btPressOutText);
+                            setRecordColor(btPressOutColor);
+                            RecordToast.hide();
+                        });
+                    }
+                    catch (e) {
+                        console.log('cancel stop: ', e);
+                        recordManger.current.recording = false;
+                        setRecordText(btPressOutText);
+                        setRecordColor(btPressOutColor);
+                        RecordToast.hide();
+                    }
+                }, 1000);
+                return;
+            }
             recordManger.current.recording = false;
             let filePath;
             let file;
             try {
-                filePath = yield audioRecorderPlayer.stopRecorder();
-                file = yield react_native_fs_1.default.stat(filePath);
+                filePath = yield AudioRecorder.stopRecorder();
+                file = yield RNFS.stat(filePath);
+                AudioRecorder.removeRecordBackListener();
             }
             catch (err) {
-                console.error('Failed to stop recording', err);
+                console.log('Failed to stop recording: ', err);
                 RecordToast.hide();
-                rn_ui_1.Toast.error(t('recordingFail'));
-                setRecordText(btPressOutText);
-                setRecordColor(btPressOutColor);
-                return;
-            }
-            if (recordManger.current.recordTime < 1) {
-                RecordToast.show(recordStatus.short, recordManger.current.recordTime);
-                setTimeout(() => {
-                    RecordToast.hide();
-                }, 1000);
+                Toast.error(t('recordingFail'));
                 setRecordText(btPressOutText);
                 setRecordColor(btPressOutColor);
                 return;
@@ -164,12 +153,13 @@ const VoiceBar = () => {
             RecordToast.hide();
             if (!recordManger.current.cancelRecord) {
                 console.log('send');
-                (0, init_1.getImManager)()
+                const imManager = getImManager();
+                imManager
                     .sendVoiceMessage(Object.assign({}, currentConversation), {
                     localPath: filePath,
                     duration: recordManger.current.recordTime,
                     size: file.size,
-                    type: 'audio/aac',
+                    type: 'audio/m4a',
                     lastModified: Date.now(),
                     filename: filePath.split('/').pop(),
                 })
@@ -185,18 +175,43 @@ const VoiceBar = () => {
             };
         }
         catch (err) {
-            console.error('Failed to stop recording', err);
+            console.log('Failed to stop recording: ', err);
             RecordToast.hide();
         }
     }), []);
-    (0, react_1.useEffect)(() => {
-        if (react_native_1.Platform.OS === 'ios') {
-            react_native_permissions_1.default.check(react_native_permissions_1.PERMISSIONS.IOS.MICROPHONE).then((result) => {
+    useEffect(() => {
+        if (Platform.OS === 'ios') {
+            Permissions.check(PERMISSIONS.IOS.MICROPHONE).then((result) => {
+                if (result !== 'granted') {
+                    Permissions.request(PERMISSIONS.IOS.MICROPHONE).then((result) => {
+                        if (result !== 'granted') {
+                            console.log('Microphone permission not granted');
+                            Toast.error(t('noAuth'));
+                        }
+                    });
+                }
+            });
+        }
+        if (Platform.OS === 'android') {
+            AppState.addEventListener('change', (state) => {
+                if (state === 'background') {
+                    RecordToast.hide();
+                    recordManger.current.cancelRecord = true;
+                    setTimeout(() => {
+                        // 防止录音时间过短，停止失败
+                        AudioRecorder.stopRecorder().then(r => {
+                            console.log('stopRecorder', r);
+                        });
+                        AudioRecorder.removeRecordBackListener();
+                    }, 500);
+                }
+            });
+            Permissions.check(PERMISSIONS.ANDROID.RECORD_AUDIO).then((result) => {
                 if (result !== 'granted') {
-                    react_native_permissions_1.default.request(react_native_permissions_1.PERMISSIONS.IOS.MICROPHONE).then((result) => {
+                    Permissions.request(PERMISSIONS.ANDROID.RECORD_AUDIO).then((result) => {
                         if (result !== 'granted') {
                             console.log('Microphone permission not granted');
-                            rn_ui_1.Toast.error(t('noAuth'));
+                            Toast.error(t('noAuth'));
                         }
                     });
                 }
@@ -206,31 +221,31 @@ const VoiceBar = () => {
             RecordToast.hide();
         };
     }, []);
-    return (<react_native_1.View style={styles.container}>
-            <react_native_1.View style={[styles.record, { backgroundColor: recordColor }]} onStartShouldSetResponder={() => true} onMoveShouldSetResponder={() => true} onResponderGrant={onResponderGrant} onResponderMove={onResponderMove} onResponderRelease={onResponderRelease} onResponderTerminationRequest={() => false}>
-                <react_native_1.Text style={styles.recordText}>{recordText}</react_native_1.Text>
-            </react_native_1.View>
-        </react_native_1.View>);
+    return (<View style={styles.container}>
+            <View style={[styles.record, { backgroundColor: recordColor }]} onStartShouldSetResponder={() => true} onMoveShouldSetResponder={() => true} onResponderGrant={onResponderGrant} onResponderMove={onResponderMove} onResponderRelease={onResponderRelease} onResponderTerminationRequest={() => false}>
+                <Text style={styles.recordText}>{recordText}</Text>
+            </View>
+        </View>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         flex: 1,
-        marginVertical: (0, rn_ui_1.dp)(6),
+        marginVertical: dp(6),
     },
     record: {
         flex: 1,
         backgroundColor: '#fff',
         justifyContent: 'center',
         alignItems: 'center',
-        borderRadius: (0, rn_ui_1.dp)(3),
+        borderRadius: dp(3),
     },
     recordText: {
         width: '100%',
         textAlign: 'center',
         color: '#666',
         fontWeight: '500',
-        fontSize: (0, rn_ui_1.dp)(15),
-        lineHeight: (0, rn_ui_1.dp)(17),
+        fontSize: dp(15),
+        lineHeight: dp(17),
     },
     toastText: {
         margin: 4,
@@ -243,30 +258,37 @@ const styles = react_native_1.StyleSheet.create({
 });
 class RecordToast {
     static show(option, time) {
+        if (RecordToast.lock)
+            return;
         const { text, color, icon } = option;
-        const ToastNode = (<rn_ui_1.Toast visible={true} onClose={() => {
+        const ToastNode = (<Toast visible={true} onClose={() => {
                 RecordToast.hide();
-            }} content={<react_native_1.Text style={[styles.toastText, { color }]}>{text}</react_native_1.Text>} duration={10000} icon={<react_native_1.Text style={styles.toastIcon}>
-                        <MaterialIcons_1.default name={icon} size={70} color={'white'}/>
-                        <react_native_1.Text style={{ width: 80 }}>({Math.round(time)}'')</react_native_1.Text>
-                    </react_native_1.Text>}/>);
+            }} content={<Text style={[styles.toastText, { color }]}>{text}</Text>} duration={10000} icon={<Text style={styles.toastIcon}>
+                        <Icon name={icon} size={70} color={'white'}/>
+                        <Text style={{ width: 80 }}>({Math.round(time)}'')</Text>
+                    </Text>}/>);
         if (RecordToast.key) {
-            (0, rn_ui_2.TopViewGetInstance)().replace(ToastNode, RecordToast.key);
+            TopViewGetInstance().replace(ToastNode, RecordToast.key);
         }
         else {
-            (0, rn_ui_2.TopViewGetInstance)()
+            // 显示前加锁，防止添加多个实例
+            RecordToast.lock = true;
+            TopViewGetInstance()
                 .add(ToastNode)
                 .then((id) => {
                 RecordToast.key = id;
+                RecordToast.lock = false;
             });
         }
     }
     static hide() {
+        RecordToast.lock = false;
         if (!RecordToast.key)
             return;
-        (0, rn_ui_2.TopViewGetInstance)().remove(RecordToast.key);
+        TopViewGetInstance().remove(RecordToast.key);
         RecordToast.key = null;
     }
 }
 RecordToast.key = null;
-exports.default = (0, react_1.memo)(VoiceBar);
+RecordToast.lock = false;
+export default memo(VoiceBar);

package/dist/pages/message/components/messageBar/index.js

@@ -1,23 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var MessageBar_1 = require("./MessageBar");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MessageBar_1).default; } });
-__exportStar(require("./MessageBar"), exports);
+export { default } from './MessageBar';
+export * from './MessageBar';

package/dist/pages/message/message.routes.js

@@ -1,47 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.messageRoutes = void 0;
-const MessageList_1 = __importDefault(require("./MessageList"));
-const ChooseMember_1 = __importDefault(require("./ChooseMember"));
-const MessageRecord_1 = __importDefault(require("./MessageRecord"));
-const MessageBackup_1 = __importStar(require("./MessageBackup"));
-exports.messageRoutes = [
+import MessageList from './MessageList';
+import ChooseMember from './ChooseMember';
+import MessageRecord from './MessageRecord';
+import MessageBackup, { StartBackupPage, RestoreBackupPage } from './MessageBackup';
+export const messageRoutes = [
     {
         name: 'MessageList',
-        component: MessageList_1.default,
+        component: MessageList,
         options: {
             title: '',
         },
     },
     {
         name: 'ChooseMember',
-        component: ChooseMember_1.default,
+        component: ChooseMember,
         options: {
             title: '',
             animation: 'fade_from_bottom',
@@ -50,28 +21,28 @@ exports.messageRoutes = [
     },
     {
         name: 'MessageRecord',
-        component: MessageRecord_1.default,
+        component: MessageRecord,
         options: {
             title: '',
         },
     },
     {
         name: 'MessageBackup',
-        component: MessageBackup_1.default,
+        component: MessageBackup,
         options: {
             title: '',
         },
     },
     {
         name: 'StartBackupPage',
-        component: MessageBackup_1.StartBackupPage,
+        component: StartBackupPage,
         options: {
             title: '',
         },
     },
     {
         name: 'RestoreBackupPage',
-        component: MessageBackup_1.RestoreBackupPage,
+        component: RestoreBackupPage,
         options: {
             title: '',
         },

package/dist/pages/search/Search.js

@@ -1,84 +1,56 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const rn_ui_1 = require("@smart-link/rn-ui");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const useTranslation_1 = __importDefault(require("../../hooks/useTranslation"));
-const SearchUser_1 = __importDefault(require("./components/SearchUser"));
-const ChatRecords_1 = __importDefault(require("./components/ChatRecords"));
-const MyGroupChat_1 = __importDefault(require("./components/MyGroupChat"));
-const init_1 = require("../../init");
-const im_base_1 = require("@smart-link/im-base");
+import { NavigationPage, dp, SegmentedView, HeaderSearchBar } from '@smart-link/rn-ui';
+import React, { useEffect, useState } from 'react';
+import { InteractionManager, StyleSheet } from 'react-native';
+import useTranslation from '../../hooks/useTranslation';
+import SearchUser from './components/SearchUser';
+import ChatRecords from './components/ChatRecords';
+import MyGroupChat from './components/MyGroupChat';
+import { getImManager } from '../../init';
+import { GroupActions } from '@smart-link/im-base';
 const Search = ({ route: { params } }) => {
-    const { t } = (0, useTranslation_1.default)();
-    const [keyword, setKeyword] = (0, react_1.useState)('');
-    (0, react_1.useEffect)(() => {
-        react_native_1.InteractionManager.runAfterInteractions(() => {
+    const { t } = useTranslation();
+    const [keyword, setKeyword] = useState('');
+    useEffect(() => {
+        InteractionManager.runAfterInteractions(() => {
             var _a;
-            (_a = (0, init_1.getImManager)()) === null || _a === void 0 ? void 0 : _a.store.dispatch(im_base_1.GroupActions.loadMyGroups());
+            (_a = getImManager()) === null || _a === void 0 ? void 0 : _a.store.dispatch(GroupActions.loadMyGroups());
         });
     }, []);
     return (<>
-            <rn_ui_1.HeaderSearchBar value={keyword} onSubmitEditing={setKeyword}/>
-            <rn_ui_1.NavigationPage noPadding>
-                <rn_ui_1.SegmentedView style={styles.segmented} barStyle={styles.segmentedBar} justifyItem={'scrollable'} indicatorType={'boxWidth'} type={'carousel'}>
-                    <rn_ui_1.SegmentedView.Sheet title={t('contacts')} titleStyle={styles.sheetTitle} activeTitleStyle={styles.sheetTitleActive}>
-                        <SearchUser_1.default keyword={keyword}/>
-                    </rn_ui_1.SegmentedView.Sheet>
-                    <rn_ui_1.SegmentedView.Sheet title={t('groupChat')} titleStyle={styles.sheetTitle} activeTitleStyle={styles.sheetTitleActive}>
-                        <MyGroupChat_1.default keyword={keyword}/>
-                    </rn_ui_1.SegmentedView.Sheet>
-                    <rn_ui_1.SegmentedView.Sheet title={t('chatRecord')} titleStyle={styles.sheetTitle} activeTitleStyle={styles.sheetTitleActive}>
-                        <ChatRecords_1.default keyword={keyword}/>
-                    </rn_ui_1.SegmentedView.Sheet>
-                </rn_ui_1.SegmentedView>
-            </rn_ui_1.NavigationPage>
+            <HeaderSearchBar value={keyword} onSubmitEditing={setKeyword}/>
+            <NavigationPage noPadding>
+                <SegmentedView style={styles.segmented} barStyle={styles.segmentedBar} justifyItem={'scrollable'} indicatorType={'boxWidth'} type={'carousel'}>
+                    <SegmentedView.Sheet title={t('contacts')} titleStyle={styles.sheetTitle} activeTitleStyle={styles.sheetTitleActive}>
+                        <SearchUser keyword={keyword}/>
+                    </SegmentedView.Sheet>
+                    <SegmentedView.Sheet title={t('groupChat')} titleStyle={styles.sheetTitle} activeTitleStyle={styles.sheetTitleActive}>
+                        <MyGroupChat keyword={keyword}/>
+                    </SegmentedView.Sheet>
+                    <SegmentedView.Sheet title={t('chatRecord')} titleStyle={styles.sheetTitle} activeTitleStyle={styles.sheetTitleActive}>
+                        <ChatRecords keyword={keyword}/>
+                    </SegmentedView.Sheet>
+                </SegmentedView>
+            </NavigationPage>
         </>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     segmented: {
         flex: 1,
         backgroundColor: '#fff',
     },
     segmentedBar: {
-        paddingTop: (0, rn_ui_1.dp)(5),
-        paddingHorizontal: (0, rn_ui_1.dp)(15),
+        paddingTop: dp(5),
+        paddingHorizontal: dp(15),
     },
     sheetTitle: {
-        fontSize: (0, rn_ui_1.dp)(14),
-        lineHeight: (0, rn_ui_1.dp)(16),
-        borderRadius: (0, rn_ui_1.dp)(3),
+        fontSize: dp(14),
+        lineHeight: dp(16),
+        borderRadius: dp(3),
     },
     sheetTitleActive: {
-        fontSize: (0, rn_ui_1.dp)(14),
-        lineHeight: (0, rn_ui_1.dp)(16),
-        borderRadius: (0, rn_ui_1.dp)(3),
+        fontSize: dp(14),
+        lineHeight: dp(16),
+        borderRadius: dp(3),
     },
 });
-exports.default = Search;
+export default Search;