diff --git a/package.json b/package.json index 7453608..4e23a71 100644 --- a/package.json +++ b/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", diff --git a/src/LinkPreview.tsx b/src/LinkPreview.tsx index 7642d17..13246e0 100644 --- a/src/LinkPreview.tsx +++ b/src/LinkPreview.tsx @@ -20,11 +20,13 @@ import { getPreviewData, oneOf } from './utils' export interface LinkPreviewProps { containerStyle?: StyleProp enableAnimation?: boolean + header?: string metadataContainerStyle?: StyleProp metadataTextContainerStyle?: StyleProp 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, + + {header} + + )(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 diff --git a/src/__tests__/LinkPreview.test.tsx b/src/__tests__/LinkPreview.test.tsx index 05b6f4e..6bb8f59 100644 --- a/src/__tests__/LinkPreview.test.tsx +++ b/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( { 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 () => { diff --git a/src/styles.ts b/src/styles.ts index bd11a27..f23f131 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -4,6 +4,9 @@ export default StyleSheet.create({ description: { marginTop: 4, }, + header: { + marginBottom: 6, + }, image: { alignSelf: 'center', backgroundColor: '#f7f7f8', diff --git a/src/utils.ts b/src/utils.ts index 30bff8d..1725570 100644 --- a/src/utils.ts +++ b/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 = //g