react-native-chating-ui-kit/lib/extensions/LinkPreview/LinkPreviewBubble.js

CometChat React Native UI Kit is a collection of custom UI Components designed to build text , chat and calling features in your application. The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Linking, Image, Alert } from 'react-native';
import { LinkPreviewBubbleStyle } from './LInkPreviewBubbleStyle';
import { localize } from '../../shared/resources/CometChatLocalize';
import { DefaultLinkPreview } from "./resources";
export const LinkPreviewBubble = (props) => {
    const { style, link, title, ChildView, image, onPress, description } = props;
    const _style = new LinkPreviewBubbleStyle(style);
    const [imageSource, setImageSource] = useState({ uri: image.startsWith("https:") ? image : `https:${image.split("http:")[1]}` });
    return (<TouchableOpacity style={{
            backgroundColor: _style.backgroundColor,
            borderRadius: 8,
        }} onPress={() => onPress ? onPress() : (Linking.canOpenURL(link) && Linking.openURL(link)) || Alert.alert(localize("SOMETHING_WRONG"))}>
            <Image source={imageSource} style={{ height: 100, width: "100%", alignSelf: "center" }} onError={(err) => {
            setImageSource(DefaultLinkPreview);
        }}/>
            <View style={{ margin: 8 }}>
                <Text style={{
            color: _style.titleColor,
            ..._style.titleFont
        }} ellipsizeMode="tail">
                    {title}
                </Text>
                <Text style={{
            color: _style.subtitleColor,
            ..._style.subtitleFont,
        }} numberOfLines={2} ellipsizeMode="tail">
                    {description}
                </Text>
                {ChildView && <ChildView />}
            </View>
        </TouchableOpacity>);
};
//# sourceMappingURL=LinkPreviewBubble.js.map