Enable links within messages (#638)

.re-natal

@@ -35,7 +35,8 @@
     "chance",
     "react-native-swiper",
     "react-native-share",
-    "react-native-emoji-picker"
+    "react-native-emoji-picker",
+    "react-native-autolink"
   ],
   "imageDirs": [
     "images"

package.json

@@ -44,6 +44,7 @@
     "react-native": "^0.38.0",
     "react-native-action-button": "2.0.13",
     "react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix",
+    "react-native-autolink": "^0.10.0",
     "react-native-camera": "git+https://github.com/alwx/react-native-camera.git",
     "react-native-circle-checkbox": "github:paramoshkinandrew/ReactNativeCircleCheckbox",
     "react-native-contacts": "^0.2.4",

src/status_im/chat/views/message.cljs

@@ -9,7 +9,9 @@
                                                 image
                                                 icon
                                                 animated-view
+                                                touchable-without-feedback
                                                 touchable-highlight
+                                                autolink
                                                 get-dimensions]]
             [status-im.components.animation :as anim]
             [status-im.chat.constants :as chat-consts]
@@ -198,10 +200,15 @@
 (defn text-message
   [{:keys [content] :as message}]
   [message-view message
-   [text {:style (st/text-message message)
-          :font  :default
-          :on-long-press  #(share content (label :t/message))}
-    (parse-text content)]])
+   (let [parsed-text (parse-text content)
+         simple-text? (= (count parsed-text) 2)]
+     (if simple-text?
+       [autolink {:style (st/text-message message)
+                  :font  :default
+                  :text  (apply str parsed-text)}]
+       [text {:style (st/text-message message)
+              :font  :default}
+        (parse-text content)]))])
 
 (defmethod message-content text-content-type
   [wrapper message]
@@ -377,12 +384,14 @@
                                    :from       from
                                    :message-id message-id}])))
        :reagent-render
-       (fn [{:keys [outgoing group-chat] :as message}]
+       (fn [{:keys [outgoing group-chat content-type content] :as message}]
          [message-container message
-          [view
-           (let [incoming-group (and group-chat (not outgoing))]
-             [message-content
-              (if incoming-group
-                incoming-group-message-body
-                message-body)
-              (merge message {:incoming-group incoming-group})])]])})))
+          [touchable-highlight {:on-long-press (when (= content-type text-content-type)
+                                                        #(share content (label :t/message)))}
+           [view
+            (let [incoming-group (and group-chat (not outgoing))]
+              [message-content
+               (if incoming-group
+                 incoming-group-message-body
+                 message-body)
+               (merge message {:incoming-group incoming-group})])]]])})))

src/status_im/components/react.cljs

@@ -52,20 +52,23 @@
 
 ;; Accessor methods for React Components
 
+(defn add-font-style [style-key {:keys [font] :as opts :or {font :default}}]
+  (let [font (get-in platform-specific [:fonts (keyword font)])
+        style (get opts style-key)]
+    (-> opts
+        (dissoc :font)
+        (assoc style-key (merge style font)))))
+
 (defn text
   ([t]
    (r/as-element [text-class t]))
-  ([{:keys [style font uppercase?] :as opts
+  ([{:keys [uppercase?] :as opts
      :or   {font :default}} t & ts]
    (r/as-element
-     (let [font (get-in platform-specific [:fonts (keyword font)])
-           ts   (cond->> (conj ts t)
-                         uppercase? (map clojure.string/upper-case))]
+     (let [ts (cond->> (conj ts t)
+                       uppercase? (map clojure.string/upper-case))]
        (vec (concat
-              [text-class
-               (-> opts
-                   (dissoc :font)
-                   (assoc :style (merge style font)))]
+              [text-class (add-font-style :style opts)]
               ts))))))
 
 (defn text-input [{:keys [font style] :as opts
@@ -133,3 +136,11 @@
 (def emoji-picker
   (let [emoji-picker (.-default emoji-picker-class)]
     (r/adapt-react-class emoji-picker)))
+
+;; Autolink
+
+(def autolink-class (r/adapt-react-class (.-default (js/require "react-native-autolink"))))
+
+(defn autolink [opts]
+  (r/as-element
+    [autolink-class (add-font-style :style opts)]))