@developer_tribe/react-native-comnyx 0.7.6 → 0.9.0

package/src/components/ChatList.tsx

@@ -8,8 +8,6 @@ import {
   TouchableOpacity,
   Keyboard,
   StatusBar,
-  KeyboardAvoidingView,
-  Platform,
 } from 'react-native';
 import { getCustomerConversation, sendCustomerMessage } from '../api';
 import type { AppConversationMessage } from '../types/Conversation';
@@ -557,143 +555,132 @@ export function ChatList({
         animated={false}
         translucent
       />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        style={{ flex: 1 }}
+      <View
+        style={[styles.container, { backgroundColor: themeColors.background }]}
       >
+        <TouchableOpacity
+          style={[styles.iconContainer]}
+          onPress={onBack}
+          activeOpacity={activeOpacity}
+        >
+          <Image
+            source={closeIcon}
+            style={[styles.closeIcon, { tintColor: themeColors.text }]}
+          />
+        </TouchableOpacity>
         <View
           style={[
-            styles.container,
-            { backgroundColor: themeColors.background },
+            styles.headerContainer,
+            {
+              backgroundColor: themeColors.background,
+              borderBottomColor: themeColors.lavender,
+            },
           ]}
         >
-          <TouchableOpacity
-            style={[styles.iconContainer]}
-            onPress={onBack}
-            activeOpacity={activeOpacity}
-          >
-            <Image
-              source={closeIcon}
-              style={[styles.closeIcon, { tintColor: themeColors.text }]}
-            />
-          </TouchableOpacity>
+          <AppText
+            localization="chat.support-team"
+            weight={'600'}
+            style={[styles.header, { color: themeColors.text }]}
+          />
           <View
             style={[
-              styles.headerContainer,
-              {
-                backgroundColor: themeColors.background,
-                borderBottomColor: themeColors.lavender,
-              },
+              styles.headerText,
+              { backgroundColor: themeColors.background },
             ]}
           >
+            <Image
+              source={headphonesIcon}
+              style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
+            />
             <AppText
-              localization="chat.support-team"
-              weight={'600'}
-              style={[styles.header, { color: themeColors.text }]}
+              localization="chat.live"
+              style={[styles.liveChat, { color: themeColors.text }]}
             />
             <View
-              style={[
-                styles.headerText,
-                { backgroundColor: themeColors.background },
-              ]}
-            >
-              <Image
-                source={headphonesIcon}
-                style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
-              />
-              <AppText
-                localization="chat.live"
-                style={[styles.liveChat, { color: themeColors.text }]}
-              />
-              <View
-                style={[styles.dot, { backgroundColor: themeColors.green }]}
-              />
-            </View>
-          </View>
-
-          <View style={styles.listContainer}>
-            <AppText
-              style={[
-                styles.dateText,
-                {
-                  color: themeColors.slate,
-                  backgroundColor: themeColors.ghost,
-                },
-              ]}
-            >
-              {currentSection}
-            </AppText>
-
-            <SectionList
-              ref={ref}
-              sections={sections}
-              inverted
-              renderItem={renderItem}
-              contentContainerStyle={[
-                styles.contentContainer,
-                { backgroundColor: themeColors.background },
-              ]}
-              style={styles.list}
-              ListEmptyComponent={
-                !loading && (!sections || sections.length === 0) ? (
-                  <EmptyList />
-                ) : null
-              }
-              ListFooterComponent={loading ? <LoadingItem /> : null}
-              keyExtractor={(item: AppConversationMessage) =>
-                item.id + '-' + item.created_at
-              }
-              removeClippedSubviews={false}
-              maxToRenderPerBatch={20}
-              windowSize={21}
-              initialNumToRender={MESSAGES_PER_PAGE}
-              getItemLayout={(_: any, index: number) => ({
-                length: MESSAGE_MIN_HEIGHT + 10,
-                offset: (MESSAGE_MIN_HEIGHT + 10) * index,
-                index,
-              })}
-              onScroll={handleScroll}
-              scrollEventThrottle={1}
-              stickySectionHeadersEnabled={false}
-              showsVerticalScrollIndicator={false}
+              style={[styles.dot, { backgroundColor: themeColors.green }]}
             />
           </View>
-          {isScrollingUp && (
-            <TouchableOpacity
-              activeOpacity={activeOpacity}
-              style={[
-                styles.scrollDownButton,
-                { backgroundColor: themeColors.ghost },
-                isKeyboardVisible && styles.scrollDownButtonWithKeyboard,
-              ]}
-              onPress={() => scrollToBottom(true)}
-            >
-              <Image
-                source={require('../assets/down.png')}
-                style={[styles.scrollUpIcon, { tintColor: themeColors.text }]}
-              />
-            </TouchableOpacity>
-          )}
-          <MessageInput
-            scrollToBottom={scrollToBottom}
-            selectedMessage={selectedMessage}
-          />
-          <CustomPopup
-            isVisible={popupVisible}
-            onClose={() => setPopupVisible(false)}
-            title={'chat.list-failed-message.title'}
-            description={'chat.list-failed-message.description'}
-            onCancelButton={() => {
-              setPopupVisible(false);
-            }}
-            onResendButton={() => {
-              resendMessage();
-              setPopupVisible(false);
-            }}
-            buttonText={'chat.list-cancel' as keyof LocalizationKeys}
+        </View>
+
+        <View style={styles.listContainer}>
+          <AppText
+            style={[
+              styles.dateText,
+              { color: themeColors.slate, backgroundColor: themeColors.ghost },
+            ]}
+          >
+            {currentSection}
+          </AppText>
+
+          <SectionList
+            ref={ref}
+            sections={sections}
+            inverted
+            renderItem={renderItem}
+            contentContainerStyle={[
+              styles.contentContainer,
+              { backgroundColor: themeColors.background },
+            ]}
+            style={styles.list}
+            ListEmptyComponent={
+              !loading && (!sections || sections.length === 0) ? (
+                <EmptyList />
+              ) : null
+            }
+            ListFooterComponent={loading ? <LoadingItem /> : null}
+            keyExtractor={(item: AppConversationMessage) =>
+              item.id + '-' + item.created_at
+            }
+            removeClippedSubviews={false}
+            maxToRenderPerBatch={20}
+            windowSize={21}
+            initialNumToRender={MESSAGES_PER_PAGE}
+            getItemLayout={(_: any, index: number) => ({
+              length: MESSAGE_MIN_HEIGHT + 10,
+              offset: (MESSAGE_MIN_HEIGHT + 10) * index,
+              index,
+            })}
+            onScroll={handleScroll}
+            scrollEventThrottle={1}
+            stickySectionHeadersEnabled={false}
+            showsVerticalScrollIndicator={false}
           />
         </View>
-      </KeyboardAvoidingView>
+        {isScrollingUp && (
+          <TouchableOpacity
+            activeOpacity={activeOpacity}
+            style={[
+              styles.scrollDownButton,
+              { backgroundColor: themeColors.ghost },
+              isKeyboardVisible && styles.scrollDownButtonWithKeyboard,
+            ]}
+            onPress={() => scrollToBottom(true)}
+          >
+            <Image
+              source={require('../assets/down.png')}
+              style={[styles.scrollUpIcon, { tintColor: themeColors.text }]}
+            />
+          </TouchableOpacity>
+        )}
+        <MessageInput
+          scrollToBottom={scrollToBottom}
+          selectedMessage={selectedMessage}
+        />
+        <CustomPopup
+          isVisible={popupVisible}
+          onClose={() => setPopupVisible(false)}
+          title={'chat.list-failed-message.title'}
+          description={'chat.list-failed-message.description'}
+          onCancelButton={() => {
+            setPopupVisible(false);
+          }}
+          onResendButton={() => {
+            resendMessage();
+            setPopupVisible(false);
+          }}
+          buttonText={'chat.list-cancel' as keyof LocalizationKeys}
+        />
+      </View>
     </>
   );
 }