@developer_tribe/react-native-comnyx 0.9.0 → 0.10.1

package/src/components/ChatList.tsx

@@ -8,6 +8,8 @@ import {
   TouchableOpacity,
   Keyboard,
   StatusBar,
+  KeyboardAvoidingView,
+  Platform,
 } from 'react-native';
 import { getCustomerConversation, sendCustomerMessage } from '../api';
 import type { AppConversationMessage } from '../types/Conversation';
@@ -555,132 +557,143 @@ export function ChatList({
         animated={false}
         translucent
       />
-      <View
-        style={[styles.container, { backgroundColor: themeColors.background }]}
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={{ flex: 1 }}
       >
-        <TouchableOpacity
-          style={[styles.iconContainer]}
-          onPress={onBack}
-          activeOpacity={activeOpacity}
-        >
-          <Image
-            source={closeIcon}
-            style={[styles.closeIcon, { tintColor: themeColors.text }]}
-          />
-        </TouchableOpacity>
         <View
           style={[
-            styles.headerContainer,
-            {
-              backgroundColor: themeColors.background,
-              borderBottomColor: themeColors.lavender,
-            },
+            styles.container,
+            { backgroundColor: themeColors.background },
           ]}
         >
-          <AppText
-            localization="chat.support-team"
-            weight={'600'}
-            style={[styles.header, { color: themeColors.text }]}
-          />
+          <TouchableOpacity
+            style={[styles.iconContainer]}
+            onPress={onBack}
+            activeOpacity={activeOpacity}
+          >
+            <Image
+              source={closeIcon}
+              style={[styles.closeIcon, { tintColor: themeColors.text }]}
+            />
+          </TouchableOpacity>
           <View
             style={[
-              styles.headerText,
-              { backgroundColor: themeColors.background },
+              styles.headerContainer,
+              {
+                backgroundColor: themeColors.background,
+                borderBottomColor: themeColors.lavender,
+              },
             ]}
           >
-            <Image
-              source={headphonesIcon}
-              style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
-            />
             <AppText
-              localization="chat.live"
-              style={[styles.liveChat, { color: themeColors.text }]}
+              localization="chat.support-team"
+              weight={'600'}
+              style={[styles.header, { color: themeColors.text }]}
             />
             <View
-              style={[styles.dot, { backgroundColor: themeColors.green }]}
-            />
+              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>
 
-        <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 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>
+          {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>
-        {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>
+      </KeyboardAvoidingView>
     </>
   );
 }