UI changes

src/components/quickReplyModal/quickReplyModalStyles.ts

@@ -9,30 +9,15 @@ export default EStyleSheet.create({
     right: 0,
     zIndex: 999,
   },
-
+  container:{
-  modalContainer: {
-    padding: 12,
-  },
-
-  intialView: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  userAvatar: {
-    width: 50,
-    height: 50,
-    borderRadius: 50,
-  },
-  addCommentBtn: {
-    backgroundColor: '$primaryLightBackground',
     flex:1,
-    height: 50,
-    marginLeft: 8,
-    borderRadius: 8,
-    justifyContent: 'center',
-    paddingLeft: 12,
   },
+  modalContainer: {
+    paddingVertical: 16,
+  },
+
+
+ 
   modalHeader: {},
   titleBtnTxt: {
     fontSize: 18,
@@ -40,7 +25,7 @@ export default EStyleSheet.create({
     color: '$primaryBlack',
   },
   inputContainer: {
-    paddingVertical: 16,
+    padding: 16,
   },
   textInput: {
     color: '$iconColor',
@@ -53,6 +38,7 @@ export default EStyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-end',
     alignItems: 'center',
+    paddingHorizontal:16,
   },
   commentBtn: {
     width: 100,
@@ -60,4 +46,30 @@ export default EStyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  replySection: {
+    paddingTop: 10,
+    paddingBottom: 0,
+  },
+  accountTile: {
+    height: 60,
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  avatarAndNameContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal:16,
+    paddingTop:12,
+  },
+  nameContainer: {
+    marginLeft: 2,
+  },
+  name: {
+    marginLeft: 4,
+    color: '$primaryDarkGray',
+  },
+  
 });

src/components/quickReplyModal/quickReplyModalView.tsx

@@ -5,8 +5,9 @@ import styles from './quickReplyModalStyles';
 import { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { useIntl } from 'react-intl';
-import { MainButton, TextButton, TextInput, UserAvatar } from '..';
+import { MainButton, SummaryArea, TextInput, UserAvatar } from '..';
 import { useSelector } from 'react-redux';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 export interface QuickReplyModalProps {}
 
@@ -16,13 +17,12 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
 
   const [selectedPost, setSelectedPost] = useState(null);
   const [commentValue, setCommentValue] = useState('');
-  const [expand, setExpand] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const sheetModalRef = useRef<ActionSheet>();
+  const inputRef = useRef<TextInput>(null);
 
   // reset the state when post changes
   useEffect(() => {
-    setExpand(false);
     setCommentValue('');
   }, [selectedPost]);
 
@@ -32,43 +32,31 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
       console.log('Showing action modal');
       setSelectedPost(post);
       sheetModalRef.current?.setModalVisible(true);
+      // wait  for modal to open and then show the keyboard
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 1000);
     },
   }));
 
   //VIEW_RENDERERS
 
-  const _renderInitialView = () => {
+  const _renderContent = () => {
     return (
-      <View style={styles.intialView}>
+      <View style={styles.modalContainer}>
-        <UserAvatar username={currentAccount.name} disableSize style={styles.userAvatar} />
+        <SummaryArea summary={selectedPost.summary} />
-        <TextButton
+        <View style={styles.avatarAndNameContainer}>
-          text={intl.formatMessage({
+          <UserAvatar noAction username={currentAccount.username} />
-            id: 'quick_reply.placeholder',
+          <View style={styles.nameContainer}>
-          })}
+            <Text style={styles.name}>{`@${currentAccount.username}`}</Text>
-          onPress={() => setExpand(true)}
-          style={styles.addCommentBtn}
-          textStyle={styles.btnText}
-        />
           </View>
-    );
-  };
-
-  const _renderFullView = () => {
-    return (
-      <View style={styles.fullView}>
-        <View style={styles.modalHeader}>
-          <TextButton
-            text={selectedPost.title}
-            onPress={() => console.log('title pressed!')}
-            style={styles.titleBtn}
-            textStyle={styles.titleBtnTxt}
-          />
         </View>
         <View style={styles.inputContainer}>
           <TextInput
+            innerRef={inputRef}
             onChangeText={setCommentValue}
             value={commentValue}
-            autoFocus
+            // autoFocus
             placeholder={intl.formatMessage({
               id: 'quick_reply.placeholder',
             })}
@@ -77,6 +65,7 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
             style={styles.textInput}
             multiline={true}
             numberOfLines={5}
+            textAlignVertical="top"
           />
         </View>
         <View style={styles.footer}>
@@ -92,24 +81,17 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
       </View>
     );
   };
-  const _renderContent = () => {
-    return (
-      <View style={styles.modalContainer}>
-        {!expand && _renderInitialView()}
-        {expand && _renderFullView()}
-      </View>
-    );
-  };
 
   return (
     <ActionSheet
       ref={sheetModalRef}
-      gestureEnabled={false}
+      gestureEnabled={true}
-      hideUnderlay
       containerStyle={styles.sheetContent}
       indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
     >
+      <KeyboardAwareScrollView enableOnAndroid={true}>
         {selectedPost && _renderContent()}
+      </KeyboardAwareScrollView>
     </ActionSheet>
   );
 };