@plusscommunities/pluss-core-app 6.1.7 → 6.1.8-auth.0

package/dist/module/components/PlussChat.js

@@ -2,28 +2,29 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { Component } from 'react';
-import { View, Image, ImageBackground, TouchableOpacity, Text, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
-import { GiftedChat, Bubble, MessageText, Send, InputToolbar, Composer } from 'react-native-gifted-chat';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import moment from 'moment';
-import { Icon } from 'react-native-elements';
-import { getBottomSpace } from 'react-native-iphone-x-helper';
-import { Spinner } from './Spinner';
-import { ProfilePic } from './ProfilePic';
-import PlussChatTime from './PlussChatTime';
-import { PDFPopup } from './PDFPopup';
-import { Attachment } from './Attachment';
-import PlussChatMessage from './PlussChatMessage';
-import { TextStyle } from './TextStyle';
-import { TEXT_DARK, LINEGREY, TEXT_DARKEST, getMainBrandingColourFromState, getLightBrandingColourFromState, BG_GREY, TEXT_BLUEGREY } from '../colours';
-import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource, getFileName } from '../helper';
-import Config, { Services } from '../config';
-import ImageUploader from './ImageUploader';
-import ImageUploadProgress from './ImageUploadProgress';
-import { ImagePopup } from './ImagePopup';
-import { VideoPopup } from './VideoPopup';
+import React, { Component } from "react";
+import { View, Image, ImageBackground, TouchableOpacity, KeyboardAvoidingView, Platform, ScrollView, Alert, TextInput } from "react-native";
+import { GiftedChat, Bubble, MessageText, Send, InputToolbar } from "react-native-gifted-chat";
+import { connect } from "react-redux";
+import _ from "lodash";
+import moment from "moment";
+import { Icon } from "@rneui/themed";
+import { getBottomSpace } from "react-native-iphone-x-helper";
+import { Spinner } from "./Spinner";
+import { ProfilePic } from "./ProfilePic";
+import PlussChatTime from "./PlussChatTime";
+import { PDFPopup } from "./PDFPopup";
+import { Attachment } from "./Attachment";
+import PlussChatMessage from "./PlussChatMessage";
+import { Text } from ".";
+import { ConfirmPopup } from "./ConfirmPopup";
+import { TEXT_DARK, LINEGREY, TEXT_DARKEST, getMainBrandingColourFromState, getLightBrandingColourFromState, BG_GREY, TEXT_BLUEGREY } from "../colours";
+import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource, getFileName } from "../helper";
+import Config, { Services } from "../config";
+import ImageUploader from "./ImageUploader";
+import ImageUploadProgress from "./ImageUploadProgress";
+import { ImagePopup } from "./ImagePopup";
+import { VideoPopup } from "./VideoPopup";
 const IMAGE_SIZE_SMALL = 55;
 const IMAGE_SIZE_LARGE = 110;
 const IMAGES_PER_ROW = 4;
@@ -34,19 +35,19 @@ class PlussChat extends Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "onPressEvent", event => {
-      Services.navigation.navigate('eventDetail', {
+      Services.navigation.navigate("eventDetail", {
         event
       });
     });
     _defineProperty(this, "onPressAttachment", attachment => {
       switch (attachment.Type) {
-        case 'Event':
-          Services.navigation.navigate('eventDetail', {
+        case "Event":
+          Services.navigation.navigate("eventDetail", {
             event: attachment
           });
           break;
-        case 'Place':
-          Services.navigation.navigate('placeDetail', {
+        case "Place":
+          Services.navigation.navigate("placeDetail", {
             place: attachment
           });
           break;
@@ -116,7 +117,7 @@ class PlussChat extends Component {
     _defineProperty(this, "onUploadStarted", (uploadUri, imageUri) => {
       const imagesToUpload = [...this.state.imagesToUpload, {
         uploading: true,
-        uploadProgress: '0%',
+        uploadProgress: "0%",
         uploadUri,
         imageUri,
         allowRetry: true
@@ -142,7 +143,7 @@ class PlussChat extends Component {
       const imagesToUpload = [...this.state.imagesToUpload];
       imagesToUpload.map(img => {
         if (img.uploadUri === uploadUri && img.uploading) {
-          img.url = uri.replace('/general/', '/general1400/');
+          img.url = uri.replace("/general/", "/general1400/");
           img.thumbNailExists = false;
           img.thumbNailUrl = getThumb300(img.url);
           img.allowRetry = true;
@@ -157,7 +158,7 @@ class PlussChat extends Component {
       imagesToUpload.map(img => {
         if (img.uploadUri === uploadUri) {
           img.uploading = true; // Requried for retry
-          img.uploadProgress = '';
+          img.uploadProgress = "";
           img.allowRetry = true;
         }
       });
@@ -189,6 +190,52 @@ class PlussChat extends Component {
         replyingTo: message
       });
     });
+    _defineProperty(this, "onDelete", message => {
+      // Only proceed if delete handler is provided
+      if (!this.props.onDeleteMessage) {
+        return;
+      }
+
+      // Only allow deletion of own messages
+      if (message.user._id !== this.props.user.uid) {
+        return;
+      }
+      this.setState({
+        showDeleteMessageConfirm: true,
+        messageToDelete: message
+      });
+    });
+    _defineProperty(this, "onCancelDeleteMessage", () => {
+      this.setState({
+        showDeleteMessageConfirm: false,
+        messageToDelete: null
+      });
+    });
+    _defineProperty(this, "onConfirmDeleteMessage", async () => {
+      const {
+        messageToDelete
+      } = this.state;
+      if (!messageToDelete) return;
+      this.setState({
+        showDeleteMessageConfirm: false
+      });
+      try {
+        // Call the parent's delete handler if provided
+        if (this.props.onDeleteMessage) {
+          await this.props.onDeleteMessage(messageToDelete);
+        }
+        this.setState({
+          messageToDelete: null
+        });
+      } catch (error) {
+        // Handle error gracefully if parent handler fails
+        console.log("onConfirmDeleteMessage error", error);
+        // Error is already handled by parent component
+        this.setState({
+          messageToDelete: null
+        });
+      }
+    });
     _defineProperty(this, "onRemoveImage", url => {
       const imagesToUpload = this.state.imagesToUpload.filter(image => image.url !== url);
       this.setState({
@@ -196,7 +243,7 @@ class PlussChat extends Component {
       });
     });
     _defineProperty(this, "toggleFullscreenVideo", url => {
-      if (typeof url !== 'string') url = '';
+      if (typeof url !== "string") url = "";
       this.setState({
         showFullscreenVideo: url.length > 0,
         currentVideoUrl: url
@@ -219,7 +266,10 @@ class PlussChat extends Component {
       imagePopupOpen: false,
       imagesToUpload: [],
       showFullscreenVideo: false,
-      currentVideoUrl: ''
+      currentVideoUrl: "",
+      showDeleteMessageConfirm: false,
+      messageToDelete: null,
+      composerHeight: this.MIN_COMPOSER_HEIGHT
     };
     this.checkThumb = null;
   }
@@ -227,14 +277,18 @@ class PlussChat extends Component {
     this.updateMessages(this.props);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
-    this.updateMessages(nextProps);
+    // Only update if messages actually changed
+    if (nextProps.messages !== this.props.messages) {
+      this.updateMessages(nextProps);
+    }
   }
   updateMessages(props) {
-    const newState = {};
-    if (!_.isUndefined(props.messages)) {
-      newState.messages = props.messages;
+    // Only update if messages actually changed
+    if (!_.isUndefined(props.messages) && !_.isEqual(props.messages, this.state.messages)) {
+      this.setState({
+        messages: props.messages
+      });
     }
-    this.setState(newState);
   }
 
   /***
@@ -263,7 +317,7 @@ class PlussChat extends Component {
       messages[0].image = this.state.imagesToUpload.map(image => image.url);
     }
     if (_.isEmpty(messages[0].text)) {
-      messages[0].text = '';
+      messages[0].text = "";
     }
     if (!messages[0].text && !messages[0].image) return;
     if (this.state.replyingTo) {
@@ -331,14 +385,25 @@ class PlussChat extends Component {
       colourBrandingMain: this.props.colourBrandingMain,
       onPressReply: () => {
         this.onReply(props.currentMessage);
-      }
+      },
+      onPressDelete: this.props.onDeleteMessage ? () => {
+        this.onDelete(props.currentMessage);
+      } : null
     }, props));
   }
   renderMessageText(messageTextProps) {
-    return /*#__PURE__*/React.createElement(MessageText, _extends({}, messageTextProps, {
+    // If message is deleted, show placeholder text
+    const props = messageTextProps.currentMessage.deleted ? {
+      ...messageTextProps,
+      currentMessage: {
+        ...messageTextProps.currentMessage,
+        text: "[Message deleted]"
+      }
+    } : messageTextProps;
+    return /*#__PURE__*/React.createElement(MessageText, _extends({}, props, {
       textStyle: {
         left: {
-          fontFamily: 'sf-regular',
+          fontFamily: "sf-regular",
           fontSize: 16,
           color: TEXT_DARKEST,
           marginTop: 10,
@@ -347,7 +412,7 @@ class PlussChat extends Component {
           marginRight: 15
         },
         right: {
-          fontFamily: 'sf-regular',
+          fontFamily: "sf-regular",
           fontSize: 16,
           color: this.props.colourBrandingMain,
           marginTop: 10,
@@ -372,7 +437,7 @@ class PlussChat extends Component {
   renderDay(dayProps) {
     return /*#__PURE__*/React.createElement(PlussChatTime, _extends({}, dayProps, {
       textStyle: {
-        fontFamily: 'sf-semibold',
+        fontFamily: "sf-semibold",
         color: TEXT_DARK,
         fontSize: 12
       }
@@ -382,8 +447,12 @@ class PlussChat extends Component {
     currentMessage,
     position
   }) {
+    // Don't show images or attachments for deleted messages
+    if (currentMessage.deleted) {
+      return null;
+    }
     if (currentMessage.image) {
-      const images = typeof currentMessage.image === 'string' ? [currentMessage.image] : currentMessage.image;
+      const images = typeof currentMessage.image === "string" ? [currentMessage.image] : currentMessage.image;
       const containerWidth = (() => {
         if (images.length === 0) return 0;
         if (images.length === 1) return IMAGE_SIZE_LARGE;
@@ -457,7 +526,7 @@ class PlussChat extends Component {
         style: [styles.eventDate, styles.eventInfoAlign[position], {
           color: this.props.colourBrandingMain
         }]
-      }, moment.utc(currentMessage.event.StartTime).local().format('ddd D MMM')))));
+      }, moment.utc(currentMessage.event.StartTime).local().format("ddd D MMM")))));
     }
     if (currentMessage.attachment) {
       return /*#__PURE__*/React.createElement(TouchableOpacity, {
@@ -480,40 +549,44 @@ class PlussChat extends Component {
         style: [styles.eventDate, styles.eventInfoAlign[position], {
           color: this.props.colourBrandingMain
         }]
-      }, moment.utc(currentMessage.attachment.StartTime).local().format('ddd D MMM')))));
+      }, moment.utc(currentMessage.attachment.StartTime).local().format("ddd D MMM")))));
     }
     return null;
   }
   renderSend(props) {
+    const buttonTopOffset = this.state.replyingTo ? 46 : 4;
+    const showSendButton = !_.isEmpty(props.text) || this.hasImagesReady(props.imagesToUpload);
     return /*#__PURE__*/React.createElement(View, {
-      style: [{
-        position: 'absolute',
-        top: 0,
-        right: 0
-      }, !!this.state.replyingTo && {
-        marginTop: 38
-      }]
-    }, (!_.isEmpty(props.text) || this.hasImagesReady(props.imagesToUpload)) && /*#__PURE__*/React.createElement(Send, _extends({}, props, {
-      alwaysShowSend: true,
-      containerStyle: [styles.sendContainer, {
+      style: {
+        position: "absolute",
+        top: buttonTopOffset,
+        right: 8,
+        flexDirection: "row",
+        alignItems: "center"
+      }
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.showUploadMenu.bind(this),
+      style: [styles.sendContainer, {
+        right: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 0 : this.MIN_COMPOSER_HEIGHT,
         width: this.MIN_COMPOSER_HEIGHT,
         height: this.MIN_COMPOSER_HEIGHT
       }]
-    }), /*#__PURE__*/React.createElement(Icon, {
-      name: 'paper-plane',
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "picture-o",
       type: "font-awesome",
       iconStyle: [styles.send, {
         width: this.MIN_COMPOSER_HEIGHT
       }]
-    })), /*#__PURE__*/React.createElement(TouchableOpacity, {
-      onPress: this.showUploadMenu.bind(this),
-      style: [styles.sendContainer, {
-        right: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 0 : 8 + this.MIN_COMPOSER_HEIGHT,
+    })), showSendButton && /*#__PURE__*/React.createElement(Send, _extends({}, props, {
+      alwaysShowSend: true,
+      onSend: props.onSend,
+      text: props.text || " ",
+      containerStyle: [styles.sendContainer, {
         width: this.MIN_COMPOSER_HEIGHT,
         height: this.MIN_COMPOSER_HEIGHT
       }]
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: 'picture-o',
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "paper-plane",
       type: "font-awesome",
       iconStyle: [styles.send, {
         width: this.MIN_COMPOSER_HEIGHT
@@ -604,11 +677,11 @@ class PlussChat extends Component {
     return /*#__PURE__*/React.createElement(View, {
       style: {
         marginTop: 15,
-        justifyContent: 'center',
-        alignContent: 'center'
+        justifyContent: "center",
+        alignContent: "center"
       }
     }, /*#__PURE__*/React.createElement(Spinner, {
-      size: 'small',
+      size: "small",
       color: this.props.colourBrandingMain
     }));
   }
@@ -625,12 +698,14 @@ class PlussChat extends Component {
   renderComposer(props) {
     var _this$state$replyingT, _this$state$replyingT2;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles.composerContainer
+      style: {
+        width: "100%"
+      }
     }, this.state.replyingTo && /*#__PURE__*/React.createElement(View, {
       style: styles.replyingTo
-    }, /*#__PURE__*/React.createElement(TextStyle, {
+    }, /*#__PURE__*/React.createElement(Text, {
       type: "body"
-    }, "Replying to ", _.isEmpty((_this$state$replyingT = this.state.replyingTo) === null || _this$state$replyingT === void 0 || (_this$state$replyingT = _this$state$replyingT.user) === null || _this$state$replyingT === void 0 ? void 0 : _this$state$replyingT.name) ? 'message' : (_this$state$replyingT2 = this.state.replyingTo) === null || _this$state$replyingT2 === void 0 || (_this$state$replyingT2 = _this$state$replyingT2.user) === null || _this$state$replyingT2 === void 0 ? void 0 : _this$state$replyingT2.name), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    }, "Replying to", " ", _.isEmpty((_this$state$replyingT = this.state.replyingTo) === null || _this$state$replyingT === void 0 || (_this$state$replyingT = _this$state$replyingT.user) === null || _this$state$replyingT === void 0 ? void 0 : _this$state$replyingT.name) ? "message" : (_this$state$replyingT2 = this.state.replyingTo) === null || _this$state$replyingT2 === void 0 || (_this$state$replyingT2 = _this$state$replyingT2.user) === null || _this$state$replyingT2 === void 0 ? void 0 : _this$state$replyingT2.name), /*#__PURE__*/React.createElement(TouchableOpacity, {
       style: styles.replyingRemoveButton,
       onPress: () => this.onReply(null),
       hitSlop: {
@@ -648,43 +723,52 @@ class PlussChat extends Component {
       type: "font-awesome",
       iconStyle: styles.replyingRemoveIcon
     })))), /*#__PURE__*/React.createElement(View, {
-      style: styles.composerInputWrapper
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-end",
+        width: "100%",
+        paddingBottom: 8
+      }
     }, /*#__PURE__*/React.createElement(View, {
       style: [styles.input, {
-        //height: props.composerHeight + 10,
-        //borderRadius: (this.MIN_COMPOSER_HEIGHT + 10) / 2,
-        marginRight: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 8 + this.MIN_COMPOSER_HEIGHT : 2 * (this.MIN_COMPOSER_HEIGHT + 8),
-        justifyContent: 'center'
-      }, Platform.OS === 'ios' && {
-        height: props.composerHeight + 10
+        flex: 1,
+        marginRight: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 16 + this.MIN_COMPOSER_HEIGHT : 2 * (this.MIN_COMPOSER_HEIGHT + 8),
+        paddingHorizontal: 12,
+        paddingVertical: Platform.select({
+          ios: 8,
+          android: 6
+        })
       }]
-    }, /*#__PURE__*/React.createElement(Composer, _extends({}, props, {
-      //composerHeight={props.composerHeight}
+    }, /*#__PURE__*/React.createElement(TextInput, {
+      maxFontSizeMultiplier: 1.2,
       placeholder: "Type a message...",
-      textInputStyle: styles.inputText,
-      textInputProps: {
-        onFocus: this.onFocusInput.bind(this),
-        onBlur: this.onBlurInput.bind(this)
-      }
-    })))));
+      multiline: true,
+      value: props.text,
+      onChangeText: props.onTextChanged,
+      style: [styles.inputText, {
+        lineHeight: 20,
+        minHeight: this.MIN_COMPOSER_HEIGHT - 16,
+        maxHeight: 100
+      }],
+      onFocus: this.onFocusInput.bind(this),
+      onBlur: this.onBlurInput.bind(this),
+      placeholderTextColor: "#999"
+    }))));
   }
 
   /***
    * Main Render
    */
   renderChat() {
-    const {
-      tabCount,
-      noTab
-    } = this.props;
-    const iosBottomOffset = (tabCount === 1 || noTab ? -10 : 52) + getBottomSpace();
-    const minInputToolbarHeight = this.MIN_COMPOSER_HEIGHT + 16 + (this.state.replyingTo ? 30 : 0) + (this.hasImagesAttached() ? IMAGE_PREVIEW_AREA_HEIGHT : 0);
+    const minInputToolbarHeight = this.MIN_COMPOSER_HEIGHT + 32 + (this.state.replyingTo ? 38 : 0) + (this.hasImagesAttached() ? IMAGE_PREVIEW_AREA_HEIGHT : 0);
     return /*#__PURE__*/React.createElement(GiftedChat, {
+      isKeyboardInternallyHandled: false,
       alwaysShowSend: false,
-      keyboardShouldPersistTaps: 'never',
+      keyboardShouldPersistTaps: "never",
       renderAvatarOnTop: true,
       minInputToolbarHeight: minInputToolbarHeight,
-      bottomOffset: Platform.OS === 'android' ? 0 : iosBottomOffset,
+      minComposerHeight: this.MIN_COMPOSER_HEIGHT,
+      bottomOffset: 0,
       onSend: this.sendMessages.bind(this),
       messages: this.state.messages,
       user: this.state.currentUser,
@@ -712,8 +796,8 @@ class PlussChat extends Component {
       onLibrarySelected: this.onLibrarySelected,
       quality: 0.8,
       allowsEditing: false,
-      fileName: 'imageInput',
-      popupTitle: 'Add Image',
+      fileName: "imageInput",
+      popupTitle: "Add Image",
       userId: this.props.user.uid,
       multiple: true,
       allowVideo: true
@@ -729,8 +813,7 @@ class PlussChat extends Component {
       visible: imagePopupOpen,
       images: imagePopupSource,
       index: imagePopupIndex,
-      onClose: this.closeGallery.bind(this),
-      ref: "imagePopup"
+      onClose: this.closeGallery.bind(this)
     });
   }
   renderVideoPlayerPopup() {
@@ -756,22 +839,27 @@ class PlussChat extends Component {
       pdfCount: 1
     });
   }
+  renderDeleteConfirmPopup() {
+    return /*#__PURE__*/React.createElement(ConfirmPopup, {
+      visible: this.state.showDeleteMessageConfirm,
+      onConfirm: this.onConfirmDeleteMessage,
+      onCancel: this.onCancelDeleteMessage,
+      text: "Are you sure you want to delete this message?",
+      yesText: "Delete",
+      noText: "Cancel"
+    });
+  }
   render() {
-    if (Platform.OS === 'android' && !this.props.noAndroidAvoid) {
-      return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
-        behavior: Platform.OS === 'ios' && 'padding',
-        style: styles.chatContainer
-      }, this.renderChat(), this.renderImageUploader(), this.renderImagePopup(), this.renderVideoPlayerPopup(), this.renderPDF());
-    }
-    return /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+      behavior: "padding",
       style: styles.chatContainer
-    }, this.renderChat(), this.renderImageUploader(), this.renderImagePopup(), this.renderVideoPlayerPopup(), this.renderPDF());
+    }, this.renderChat(), this.renderImageUploader(), this.renderImagePopup(), this.renderVideoPlayerPopup(), this.renderPDF(), this.renderDeleteConfirmPopup());
   }
 }
 const styles = {
   chatContainer: {
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: "center"
   },
   eventContainer: {
     left: {
@@ -779,20 +867,20 @@ const styles = {
       paddingLeft: 15,
       paddingRight: 15,
       paddingBottom: 5,
-      flexDirection: 'row'
+      flexDirection: "row"
     },
     right: {
       paddingTop: 5,
       paddingLeft: 15,
       paddingRight: 15,
       paddingBottom: 5,
-      flexDirection: 'row-reverse'
+      flexDirection: "row-reverse"
     }
   },
   eventImage: {
     width: 80,
     height: 80,
-    resizeMode: 'cover',
+    resizeMode: "cover",
     borderRadius: 2
   },
   eventImageMargin: {
@@ -809,45 +897,45 @@ const styles = {
   },
   eventTitle: {
     fontSize: 12,
-    fontFamily: 'sf-bold',
-    backgroundColor: 'rgba(255,255,255,0)'
+    fontFamily: "sf-bold",
+    backgroundColor: "rgba(255,255,255,0)"
   },
   eventInfoAlign: {
     left: {
-      textAlign: 'left'
+      textAlign: "left"
     },
     right: {
-      textAlign: 'right'
+      textAlign: "right"
     }
   },
   messageImageLarge: {
     width: IMAGE_SIZE_LARGE,
     height: IMAGE_SIZE_LARGE,
     borderRadius: 2,
-    alignSelf: 'center'
+    alignSelf: "center"
   },
   messageImageSmall: {
     width: IMAGE_SIZE_SMALL,
     height: IMAGE_SIZE_SMALL,
     borderRadius: 2,
-    alignSelf: 'center',
+    alignSelf: "center",
     marginRight: IMAGE_MARGIN,
     marginBottom: IMAGE_MARGIN
   },
   eventDate: {
     fontSize: 12,
-    fontFamily: 'sf-regular',
-    backgroundColor: 'rgba(255,255,255,0)'
+    fontFamily: "sf-regular",
+    backgroundColor: "rgba(255,255,255,0)"
   },
   inputContainer: {
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
     paddingVertical: 8,
     paddingHorizontal: 8
   },
   inputText: {
     color: TEXT_DARKEST,
     fontSize: 14,
-    fontFamily: 'sf-medium'
+    fontFamily: "sf-medium"
   },
   input: {
     margin: 0,
@@ -860,12 +948,12 @@ const styles = {
   },
   composerInputWrapper: {
     flex: 1,
-    flexDirection: 'row'
+    flexDirection: "row"
   },
   replyingTo: {
     minHeight: 30,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     borderBottomWidth: 1,
     borderBottomColor: LINEGREY,
     marginBottom: 8
@@ -874,34 +962,34 @@ const styles = {
     marginLeft: 10
   },
   replyingRemoveContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: 10,
     width: 20,
     height: 20,
     borderWidth: 2,
-    borderColor: '#fff'
+    borderColor: "#fff"
   },
   replyingRemoveIcon: {
     fontSize: 10,
-    color: '#fff',
+    color: "#fff",
     marginBottom: 1
   },
   sendContainer: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     right: 0,
     height: 30,
     width: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#fff'
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#fff"
   },
   send: {
     fontSize: 15,
     color: TEXT_BLUEGREY,
     fontSize: 24,
-    textAlign: 'center'
+    textAlign: "center"
   },
   accessory: {
     height: IMAGE_PREVIEW_AREA_HEIGHT,
@@ -923,50 +1011,50 @@ const styles = {
     borderRadius: 2
   },
   settingDropDownOpen: {
-    height: 'auto'
+    height: "auto"
   },
   imagesContainer: {
     marginLeft: 10,
     marginRight: 10,
-    flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexDirection: "row",
+    flexWrap: "wrap"
   },
   uploadImagesContainer: {
-    flexDirection: 'row',
-    overflow: 'visible'
+    flexDirection: "row",
+    overflow: "visible"
   },
   previewItemRemoveButton: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     right: 0
   },
   previewItemRemoveContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: 10,
     width: 20,
     height: 20,
     borderWidth: 2,
-    borderColor: '#fff'
+    borderColor: "#fff"
   },
   previewItemRemoveIcon: {
     fontSize: 10,
-    color: '#fff',
+    color: "#fff",
     marginBottom: 1
   },
   imagePlayContainer: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center"
   },
   imageControlIcon: {
-    color: '#fff',
+    color: "#fff",
     fontSize: 20,
-    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowColor: "rgba(0,0,0,0.3)",
     textShadowOffset: {
       width: 2,
       height: 2