Add hyperlink

package.json

@@ -56,6 +56,7 @@
     "react-native-emojicon": "^1.0.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-htmlview": "^0.16.0",
+    "react-native-hyperlink": "^0.0.22",
     "react-native-ionicons": "^4.6.5",
     "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-neat-date-picker": "^1.4.12",

src/app/(tabs)/home/index.tsx

@@ -3,6 +3,7 @@ import { router } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { ActivityIndicator, ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import Hyperlink from 'react-native-hyperlink';
 
 import styles from './styles';
 import ContentCard from '../../../components/ContentCard/ContentCard';
@@ -162,9 +163,19 @@ function HomeScreen() {
             {featuredStoriesHeader != '' &&
               featuredStoriesDescription != null &&
               featuredStoriesDescription != '' && (
-                <Text style={[globalStyles.body1, styles.featuredDescription]}>
-                  {featuredStoriesDescription}
-                </Text>
+                <Hyperlink
+                  linkStyle={[
+                    globalStyles.body1,
+                    styles.featuredDescriptionLink,
+                  ]}
+                  linkDefault={true}
+                >
+                  <Text
+                    style={[globalStyles.body1, styles.featuredDescription]}
+                  >
+                    {featuredStoriesDescription}
+                  </Text>
+                </Hyperlink>
               )}
             <View style={{ marginRight: 24 }}>
               {featuredStories.map(story => (

src/app/(tabs)/home/styles.ts

@@ -41,6 +41,10 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     marginRight: 24,
   },
+  featuredDescriptionLink: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
 });
 
 export default styles;