Add header node and update REGEX

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyerhq/react-native-link-preview",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Fully customizable preview of the URL extracted from the provided text.",
   "homepage": "https://github.com/flyerhq/react-native-link-preview#readme",
   "main": "lib/index.js",

src/LinkPreview.tsx

@@ -20,11 +20,13 @@ import { getPreviewData, oneOf } from './utils'
 export interface LinkPreviewProps {
   containerStyle?: StyleProp<ViewStyle>
   enableAnimation?: boolean
+  header?: string
   metadataContainerStyle?: StyleProp<ViewStyle>
   metadataTextContainerStyle?: StyleProp<ViewStyle>
   onPreviewDataFetched?: (previewData: PreviewData) => void
   previewData?: PreviewData
   renderDescription?: (description: string) => React.ReactNode
+  renderHeader?: (header: string) => React.ReactNode
   renderImage?: (image: PreviewDataImage) => React.ReactNode
   renderLinkPreview?: (payload: {
     aspectRatio?: number
@@ -43,11 +45,13 @@ export const LinkPreview = React.memo(
   ({
     containerStyle,
     enableAnimation,
+    header,
     metadataContainerStyle,
     metadataTextContainerStyle,
     onPreviewDataFetched,
     previewData,
     renderDescription,
+    renderHeader,
     renderImage,
     renderLinkPreview,
     renderMinimizedImage,
@@ -106,6 +110,17 @@ export const LinkPreview = React.memo(
       )(description)
     }
 
+    const renderHeaderNode = () => {
+      return header
+        ? oneOf(
+            renderHeader,
+            <Text numberOfLines={1} style={styles.header}>
+              {header}
+            </Text>
+          )(header)
+        : null
+    }
+
     const renderImageNode = (image: PreviewDataImage) => {
       return oneOf(
         renderImage,
@@ -137,6 +152,7 @@ export const LinkPreview = React.memo(
               textContainerStyle,
             ])}
           >
+            {renderHeaderNode()}
             {renderTextNode()}
             {/* Render metadata only if there are either description OR title OR
                 there is an image with an aspect ratio of 1 and either description or title

src/__tests__/LinkPreview.test.tsx

@@ -42,11 +42,13 @@ describe('link preview', () => {
     openUrlMock.mockRestore()
   })
 
-  it('renders image node', async () => {
-    expect.assertions(1)
+  it('renders image node and header', async () => {
+    expect.assertions(2)
+    const header = 'header'
     const link = 'https://github.com/flyerhq/'
     const { getByRole, getByText } = render(
       <LinkPreview
+        header={header}
         previewData={{
           image: {
             height: 544,
@@ -61,6 +63,8 @@ describe('link preview', () => {
     await waitFor(() => getByText(link))
     const image = getByRole('image')
     expect(image.props).toHaveProperty('style.height', 0)
+    const headerNode = getByText(header)
+    expect(headerNode).toBeDefined()
   })
 
   it('responses to the layout event change', async () => {

src/styles.ts

@@ -4,6 +4,9 @@ export default StyleSheet.create({
   description: {
     marginTop: 4,
   },
+  header: {
+    marginBottom: 6,
+  },
   image: {
     alignSelf: 'center',
     backgroundColor: '#f7f7f8',

src/utils.ts

@@ -200,7 +200,7 @@ export const REGEX_IMAGE_CONTENT_TYPE = /image\/*/g
 // Consider empty line after img tag and take only the src field, space before to not match data-src for example
 export const REGEX_IMAGE_TAG = /<img[\n\r]*.*? src=["'](.*?)["']/g
 export const REGEX_LINK =
-  /([\w+]+:\/\/)?([\w\d-]+\.)*[\w-]+[.:]\w+([/?=&#.]?[\w-]+)*\/?/i
+  /((http|ftp|https):\/\/)?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/i
 // Some pages write content before the name/property, some use single quotes instead of double
 export const REGEX_META =
   /<meta.*?(property|name)=["'](.*?)["'].*?content=["'](.*?)["'].*?>/g