Merge pull request #16 from AgoraIO-Community/feat/urls-in-chat

Feat/urls in chat
AgoraIO-Community · Jun 10, 2021 · 52c9350 · 52c9350
2 parents a8c8943 + ea5a1b8
commit 52c9350
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/template/package.json b/template/package.json
@@ -44,6 +44,7 @@
     "react-dom": "16.13.1",
     "react-native": "0.63.3",
     "react-native-agora": "3.1.7-appbuilder.0",
+    "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",
     "react-native-keep-awake": "4.0.0",
     "react-native-web": "0.14.13",

diff --git a/template/src/subComponents/ChatBubble.tsx b/template/src/subComponents/ChatBubble.tsx
@@ -10,7 +10,8 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View, Text, StyleSheet, Linking, Platform} from 'react-native';
+import Hyperlink from 'react-native-hyperlink';
 import ChatContext, {channelMessage} from '../components/ChatContext';
 import ColorContext from '../components/ColorContext';
 
@@ -19,6 +20,13 @@ const ChatBubble = (props: channelMessage) => {
   const {primaryColor} = useContext(ColorContext);
   let {isLocal, msg, ts, uid} = props;
   let time = new Date(ts).getHours() + ':' + new Date(ts).getMinutes();
+  const handleUrl = (url: string) => {
+    if(Platform.OS == 'web'){
+      window.open(url, '_blank');
+   } else {
+      Linking.openURL(url)
+   }
+  }
   return (
     <View>
       <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>
@@ -32,11 +40,13 @@ const ChatBubble = (props: channelMessage) => {
             ? [style.chatBubbleLocal, {backgroundColor: primaryColor}]
             : style.chatBubble
         }>
-        <Text
-          style={isLocal ? style.whiteText : style.blackText}
-          selectable={true}>
-          {msg.slice(1) + ' '}
-        </Text>
+        <Hyperlink onPress={handleUrl} linkStyle={ { color: '#2980b9', textDecorationLine: 'underline' } }>
+          <Text
+            style={isLocal ? style.whiteText : style.blackText}
+            selectable={true}>
+            {msg.slice(1) + ' '}
+          </Text>
+        </Hyperlink>
       </View>
     </View>
   );