be-components 5.1.8 → 5.1.9

package/src/SocialComponents/FormattedTextInput/index.tsx

@@ -10,10 +10,15 @@ import { useColors } from '../../constants/useColors';
 type FormattedTextInputProps = {
     onChangeText?: (data:{ text:string, formatted_text:any }) => void,
     submit_title?:string,
+    submit_caller?:string,
     submit_loading?:boolean,
     keep_on_submit?:boolean,
+    hide_border?:boolean,
+    disable_scroll?:boolean,
     icon_submit?:boolean,
+    width:number
     placeholder?:string,
+    tag_selector_location?:'bottom'|'top',
     onSelectInput?:() => void
     submit_placement?:'inline'|'bottom',
     onFocusPosition?:(position:{ height:number, width:number, x:number, y:number }) => void
@@ -21,7 +26,7 @@ type FormattedTextInputProps = {
     onSubmit:(data:{ text:string, formatted_text:any }, tags:TextTagProps[]) => void
 }
 
-const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_placement, placeholder, init_data, onSelectInput, onChangeText, onSubmit, onFocusPosition }:FormattedTextInputProps) => {
+const FormattedTextInput = ({ width, disable_scroll, submit_title, hide_border, tag_selector_location, icon_submit, keep_on_submit, submit_caller, submit_placement, placeholder, init_data, onSelectInput, onChangeText, onSubmit, onFocusPosition }:FormattedTextInputProps) => {
     const Colors = useColors();
     const [ input_state, setInputState ] = useState<{
         height:number
@@ -56,13 +61,18 @@ const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_
     const [ action_loading, setActionLoading ] = useState(false);
     const [ working_tag, setWorkingTag ] = useState<TextTagProps | undefined>();
 
+    useEffect(() => {
+        if(!submit_caller){ return }
+        handleSubmit();
+    },[submit_caller])
+
     useEffect(() => {
         SocialComponentApi.setEnvironment();
         if(init_data){
             setData({ text: init_data.text, formatted_text: init_data.formatted_text });
             setValidTags(init_data.tags)
         }
-    },[init_data])
+    },[JSON.stringify(init_data)])
 
     useEffect(() => {
         if(active_tag){ return setWorkingTag(active_tag) }
@@ -75,7 +85,7 @@ const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_
     },[active_tag]);
 
     const validateTag = async(tag:TextTagProps) => {
-        let new_tags = valid_tags.filter(t => t.local_id != tag.local_id).concat(tag);
+        let new_tags = valid_tags.concat({ ...tag });
         setValidTags(new_tags);
     }
 
@@ -108,7 +118,7 @@ const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_
     const handleUpdateTag = async(tag:TextTagProps) => {
         setActionLoading(true);
         const new_text = SocialComponentHelpers.replaceText(text, tag.start, tag.end, `@${tag.tag}`);
-        setValidTags(valid_tags.concat({ ...tag }));
+        validateTag(tag)
         setData({
             ...data,
             text: new_text
@@ -123,6 +133,7 @@ const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_
         onSubmit({ text, formatted_text }, new_tags);
         if(keep_on_submit){ return }
         setData({ text: '', formatted_text: JSON.stringify('') });
+        setInputState({ ...input_state, height: 50 })
         setValidTags([]);
     }
 
@@ -139,23 +150,24 @@ const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_
     return (
         <View transparent>
             <View transparent>
-                {tag_selector.visible && tag_selector.working_tag ?
+                {tag_selector.visible && tag_selector.working_tag && tag_selector_location != 'bottom' ?
                 <TagSelector
                     working_tag={tag_selector.working_tag}
                     type={tag_selector.type}
+                    width={width}
                     visible={tag_selector.visible}
                     onCancel={() => setTagSelector({ visible: false, type: 'player' })}
                     onSelectTag={(tag) => handleUpdateTag(tag)}
                 />
                 :<></>}
             </View>
-            <View style={{ flexDirection:'row', alignItems:'flex-end' }}>
+            <View transparent style={{ flexDirection:'row', alignItems:'flex-end' }}>
                 {onSelectInput ?
                 <Button float style={{ padding:10, width:45, marginRight:5, borderRadius:8, justifyContent:'center', alignItems:'center' }} onPress={() => onSelectInput()}>
                     <Icons.MoreIcon size={24} color={Colors.text.h1} />
                 </Button>
                 :<></>}
-                <View type='input' style={{ flex:1, flexDirection:'row' }}>
+                <View type={hide_border?undefined:'input'} style={{ flex:1, flexDirection:'row' }}>
                     <TextInput
                         value={text}
                         editable={!action_loading}
@@ -163,6 +175,7 @@ const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_
                         loading={action_loading}
                         focus_on_unload
                         transparent
+                        scrollEnabled={!disable_scroll}
                         placeholder={placeholder ?? 'Start typing here...'}
                         onFocusPosition={onFocusPosition}
                         style={{ flex:1, height: Platform.OS == 'web' ? height : undefined }}
@@ -190,6 +203,18 @@ const FormattedTextInput = ({ submit_title, icon_submit, keep_on_submit, submit_
                 </Button>
                 :<></>}
             </View>
+                {tag_selector.visible && tag_selector.working_tag && tag_selector_location == 'bottom' ?
+                <View transparent style={{ height:100 }}>
+                <TagSelector
+                    working_tag={tag_selector.working_tag}
+                    type={tag_selector.type}
+                    width={width}
+                    visible={tag_selector.visible}
+                    onCancel={() => setTagSelector({ visible: false, type: 'player' })}
+                    onSelectTag={(tag) => handleUpdateTag(tag)}
+                />
+                </View>
+                :<></>}
             {submit_placement == 'bottom' ?
             <Button
                 title={submit_title ?? 'Submit'}

package/src/SocialComponents/GifSelector/NativeSelector.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Text, View } from "../../Components/Themed"
+
+const GifyNativeSelector = () => {
+    return (
+        <View>
+            <Text>Hey</Text>
+        </View>
+    )
+}
+
+export default GifyNativeSelector
+

package/src/SocialComponents/GifSelector/WebSelector.tsx

@@ -0,0 +1,91 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import { GiphyFetch } from '@giphy/js-fetch-api'
+
+import {
+    Grid, // our UI Component to display the results
+    SearchBar, // the search bar the user will type into
+    SearchContext, // the context that wraps and connects our components
+    SearchContextManager, // the context manager, includes the Context.Provider
+    SuggestionBar, // an optional UI component that displays trending searches and channel / username results
+} from '@giphy/react-components';
+
+const gf = new GiphyFetch('MPKLmL5j0G3TesyhtNeDTE0nZ3F8CKCB')
+import { Button, View } from '../../Components/Themed';
+import { Modal, Platform, ScrollView } from 'react-native';
+
+// the search experience consists of the manager and its child components that use SearchContext
+type GifySelectModalProps = { 
+    isVisible:boolean,
+    width:number,
+    view_mode:'desktop'|'mobile',
+    gifSelect:any, 
+    closeModal:any 
+}
+
+const WebGifySelector = ({ isVisible, gifSelect, closeModal, view_mode, width }:GifySelectModalProps) => {
+    if(!isVisible){ return (<></>) }
+    if(Platform.OS != 'web'){ return <></> }
+    return (
+        <Modal
+            transparent
+            style={{ flex:1 }}
+            animationType={view_mode == 'desktop' ? 'fade' : 'slide'}
+        >
+            <View type='blur' style={{ flex:1, padding:10 }}>
+                <View float style={{flex:1, padding:10}}>
+                    <ScrollView style={{flex:1, paddingTop:10, borderTopRightRadius:2, borderTopLeftRadius:2}}>
+                        <SearchContextManager apiKey={'MPKLmL5j0G3TesyhtNeDTE0nZ3F8CKCB'}>
+                            <Components width={width - 20} gifSelect={gifSelect} />
+                        </SearchContextManager>
+                    </ScrollView>
+                    <View type='footer' style={{ flexDirection:'row', padding:10 }}>
+                        <Button 
+                            type='close'
+                            title='CLOSE'
+                            style={{ flex:1 }} 
+                            onPress={() => closeModal()}
+                        />
+                    </View>
+                </View>
+            </View>
+        </Modal>        
+    )
+}
+
+// define the components in a separate function so we can
+// use the context hook. You could also use the render props pattern
+const Components = ({ gifSelect, width }: { gifSelect:any, width:number }) => {
+    const { fetchGifs, searchKey } = useContext(SearchContext)
+    const [ initGifs, setInitGifs ] = useState<any>()
+    useEffect(() => {
+        getInitGifs()
+    },[])
+    const getInitGifs = async() => {
+        const fetchedGifs = await gf.trending({ offset: 0, limit: 10 })
+        setInitGifs(fetchedGifs.data)
+    }
+
+    if(!initGifs){ return (<></>) }
+    return (
+        <>
+            <SearchBar />
+            <View style={{paddingTop:10, paddingLeft:2}}>
+                <SuggestionBar />
+                <Grid noLink onGifClick={(gif) => gifSelect(gif)} initialGifs={searchKey===''?initGifs:[]} key={searchKey} columns={3} width={width} fetchGifs={fetchGifs} />
+            </View>
+        </>
+    )
+}
+
+
+const areEqual = (prevProps:GifySelectModalProps, nextProps:GifySelectModalProps) => {
+    let allEqual = true
+    if(prevProps.isVisible !== nextProps.isVisible){ return false }
+    return allEqual
+}
+
+export default React.memo(WebGifySelector, areEqual)
+
+
+

package/src/SocialComponents/GroupChat/components/GroupMessageCard.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Text, View } from "../../../Components/Themed";
+import { useColors } from "../../../constants/useColors";
+import type { GroupMessageProps, MyPlayerProps, PublicPlayerProps, TextTagProps } from "../../../types";
+import { FormattedText } from '../../FormattedTextInput/FormattedText';
+import moment from 'moment-mini';
+import { Image } from 'react-native';
+import ImageRenderer from '../../ImageRenderer';
+import UrlPreviewCard from '../../UrlPreviewCard';
+
+
+type GroupMessageCardProps = {
+    group_message:GroupMessageProps,
+    me?:MyPlayerProps,
+    player?:PublicPlayerProps,
+    mine?:boolean,
+    width: number,
+    onSelectImage:(image:{ url:string, height?:number, width?:number }) => void,
+    onSelectTag:(tag:TextTagProps) => void
+}
+
+const GroupMessageCard = ({group_message, mine, player, width, onSelectImage, onSelectTag}:GroupMessageCardProps) => {
+    const Colors = useColors();
+    const image = group_message.message_images ? group_message.message_images[0] : undefined
+    const url = group_message.message_urls ? group_message.message_urls[0] : undefined
+    return (
+        <View>
+            <View style={{ flexDirection:'row', alignItems:'flex-end' }}>
+                {mine ?
+                <View style={{ flex:1 }} transparent />
+                :
+                <View float style={{ borderRadius:100, padding:2 }}>
+                    <Image
+                        source={{ uri:player?.profile_pic }}
+                        style={{ height:36, width:36, borderRadius:100 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                }
+                <View float style={{ 
+                    width: width - 90, 
+                    padding:14,
+                    marginLeft:10,
+                    borderRadius:22,
+                    marginBottom:15,
+                    borderBottomLeftRadius: !mine? 0:22,
+                    borderBottomRightRadius: mine? 0:22, 
+                    backgroundColor:mine?Colors.absolutes.brand.midnight:Colors.absolutes.highlights.highlight200 
+                }}>
+                    {url ?
+                    <UrlPreviewCard
+                        url={url}
+                        width={width - 120}
+                        color={Colors.text.white}
+                    />
+                    :<></>}
+                    {image ?
+                    <ImageRenderer
+                        image={image}
+                        width={width - 120}
+                        onSelectImage={onSelectImage}
+                    />
+                    :<></>}
+                    {group_message.formatted_text ?
+                    <FormattedText
+                        text={group_message.formatted_text}
+                        tags={group_message.tags ?? []}
+                        text_color={Colors.text.white}
+                        onSelectTag={(tag) => onSelectTag(tag)}
+                    />
+                    : group_message.message ?
+                    <Text size={12} color={Colors.text.white}>{group_message.message}</Text>
+                    :<></>}
+                </View>
+                {!mine ?
+                <View transparent />
+                :<></>}
+            </View>
+            <Text theme="light" textAlign={mine?'right':'left'}>{!mine && player ?`@${player?.username} - `: ''}Delivered {moment(group_message.create_datetime).format('hh:mm a')}</Text>
+        </View>
+    )
+}
+
+export default GroupMessageCard

package/src/SocialComponents/GroupChat/index.tsx

@@ -0,0 +1,333 @@
+import React from 'react';
+import moment from "moment-mini";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, FlatList, Image } from "react-native"
+import { useColors } from "../../constants/useColors";
+import type { GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, PublicPlayerProps, TextTagProps } from "../../types";
+import { SocialComponentApi, SocialComponentHelpers } from "../api";
+import { Text, View } from "../../Components/Themed";
+import GroupMessageCard from './components/GroupMessageCard';
+import InputBar from '../InputBar';
+import FormattedTextInput from '../FormattedTextInput';
+import SocketManager from '../../Socket';
+
+type GroupChatProps = {
+    group_id?:string,
+    my_id?:string,
+    player_id?:string,
+    access_token?:string,
+    width:number,
+    distinct_id:string,
+    onSelectTag: (tag:TextTagProps) => void,
+    onSelectImage:(image: { url:string, height?:number, width?:number }) => void,
+    onFocusPosition?:(position:{ height:number, width:number, x:number, y:number }) => void
+}
+
+const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_id, onFocusPosition, onSelectImage, onSelectTag }:GroupChatProps) => {
+    const Colors = useColors();
+    const [ chat_size, setChatSize ] = useState({ height:0, width:0 });
+    const [ show_input_bar, setShowInputBar ] = useState(false);
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ message_loading, setMessageLoading ] = useState(false);
+    const [ socket_message, setSocketMessage ] = useState<GroupMessageProps|undefined>(undefined);
+    const [ my_data, setMyData ] = useState<{
+        me?: MyPlayerProps
+    }>({});
+    const { me } = my_data;
+    const [ screen_data, setData ] = useState<{
+        loading:boolean,
+        players:PublicPlayerProps[],
+        group?:GroupProps,
+        group_players:GroupPlayerProps[]
+    }>({
+        loading:false,
+        players:[],
+        group_players: []
+    })
+    const { loading, players, group } = screen_data;
+
+    const [ message_data, setMessageData ] = useState<{
+        messages_loading:boolean,
+        messages: GroupMessageProps[]
+    }>({
+        messages_loading: false,
+        messages:[]
+    });
+    const { messages } = message_data
+    const chat_ref = useRef(null);
+
+    const unique_dates = useMemo(() => [ ...new Set(messages.map(m => moment(m.create_datetime).format('MMM DD YYYY')))],[messages.length, socket_message]);
+
+    useEffect(() => {
+        SocialComponentApi.setEnvironment();
+        if(group_id){
+            getGroupFromServer(group_id);
+            return
+        }
+        if(player_id){
+            getChatFromServer(player_id);
+            return
+        }
+    },[group_id, player_id]);
+
+    useEffect(() => {
+        if(!my_id){ return }
+        getMyData();
+    },[my_id]);
+
+    const getMyData = async() => {
+        const player = await SocialComponentApi.getMyDetails();
+        setMyData({ me:player })
+    }
+
+    useEffect(() => {
+        if(!socket_message){ return }
+        setMessageData({
+            ...message_data,
+            messages: messages.filter(m => m.group_message_id != socket_message.group_message_id).concat(socket_message)
+        })
+    },[socket_message]);
+
+    const chat_player = group?.type == 'direct' ? players.find(p => p.player_id == player_id) : undefined
+
+    const getChatFromServer = async(id:string) => {
+        setData({ ...screen_data, loading:true });
+        if(!my_id){ return }
+        setMessageData({ ...message_data, messages_loading:true });
+        const group_response = await SocialComponentApi.getChat(id);
+        if(!group_response){ return setData({ ...screen_data, loading:false }) }
+        let player_ids:string[] = []
+        if(player_id){ player_ids.push(player_id) }
+        if(my_id){ player_ids.push(my_id) }
+        const players = await SocialComponentApi.getPlayersByIds(player_ids);
+
+        let group_messages_with_tags = await SocialComponentHelpers.addTagsToMessages(group_response.group_messages);
+
+        setData({
+            ...screen_data,
+            players: players,
+            group: group_response.group,
+            group_players: group_response.group_players,
+            loading: false
+        });
+        setMessageData({
+            ...message_data,
+            messages_loading:false,
+            messages: group_messages_with_tags
+        });
+    }
+
+    const getGroupFromServer = async(id:string) => {
+        setData({ ...screen_data, loading:true });
+        setMessageData({ ...message_data, messages_loading:true });
+        const group_response = await SocialComponentApi.getGroupById(id);
+        if(!group_response){ return setData({ ...screen_data, loading:false }) }
+        const players = await SocialComponentApi.getPlayersByIds(group_response.group_messages.map(p => p.player_id));
+
+        let group_messages_with_tags = await SocialComponentHelpers.addTagsToMessages(group_response.group_messages);
+
+        setData({
+            ...screen_data,
+            players: players,
+            group: group_response.group,
+            group_players: group_response.group_players,
+            loading: false
+        });
+        setMessageData({
+            ...message_data,
+            messages_loading:false,
+            messages: group_messages_with_tags
+        });
+    }
+
+    //const message_valid = message_text != '' ? true : false
+
+    const handleSendImage = async(image:any) => {
+        if(!group || message_loading){ return }
+        setMessageLoading(true);
+        const group_message = SocialComponentHelpers.getEmptyMessage();
+        const gm = await SocialComponentApi.sendChat({ 
+            ...group_message, 
+            formatted_text: '',
+            tags: [],
+            message_images: [image],
+            group_id: group.group_id,
+            message: ''
+        });
+        if(!gm){
+            setMessageLoading(false);
+            return
+        }
+        setMessageData({
+            ...message_data,
+            messages: messages.filter(m => m.group_message_id != gm.group_message_id).concat(gm)
+        })
+        setMessageLoading(false);
+
+    }
+
+    const handleSendMessage = async(data: { formatted_text: string, text:string }, tags:TextTagProps[]) => {
+        if(!group || message_loading){ return }
+        setMessageLoading(true);
+
+        //Find urls!
+        const url = SocialComponentHelpers.getUrlsFromString(data.text);
+        let message_urls:string[] = []
+        if(url){ message_urls.push(url) }
+        const group_message = SocialComponentHelpers.getEmptyMessage();
+        const gm = await SocialComponentApi.sendChat({ 
+            ...group_message, 
+            formatted_text: data.formatted_text,
+            tags: tags.map(t => { return { ...t, data:undefined } }), //Drop the data!
+            group_id: group.group_id,
+            message_urls: message_urls,
+            message: data.text 
+        });
+        if(!gm){
+            setMessageLoading(false);
+            return
+        }
+        setMessageData({
+            ...message_data,
+            messages: messages.filter(m => m.group_message_id != gm.group_message_id).concat(gm)
+        })
+        setMessageLoading(false);
+    }
+
+    const renderMessages = (data:{item:GroupMessageProps, index:number}) => {
+        const player = players.find(p => p.player_id == data.item.player_id)
+        const mine = player?.player_id == me?.player_id ? true: false
+        return (
+            <View style={{ margin:5 }}>
+                <GroupMessageCard
+                    player={player}
+                    me={me}
+                    width={chat_size.width}
+                    mine={mine}
+                    onSelectImage={onSelectImage}
+                    group_message={data.item}
+                    onSelectTag={onSelectTag}
+                />
+            </View>
+        )
+    }
+
+    const renderDates = (data:{ item:string, index:number }) => {
+        const date_messages = messages.filter(m => moment(m.create_datetime).format('MMM DD YYYY') == data.item);
+
+        return (
+            <View>
+                <View style={{ padding:10 }}>
+                    <Text size={16} theme="light" textAlign="center">{data.item}</Text>
+                </View>
+                <FlatList
+                    key={'date_messages'}
+                    keyExtractor={(item) => item.group_message_id.toString()}
+                    data={date_messages.sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())}
+                    renderItem={renderMessages}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout;
+            setChatSize({ height, width });
+        }}>
+            {group?.type == 'direct' && chat_player ?
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent>
+                    <Image
+                        source={{ uri: chat_player.profile_pic }}
+                        style={{ height:40, width:40, borderRadius:100 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">@{chat_player.username}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">Joined {moment(chat_player.create_datetime).fromNow()}</Text>
+                </View>
+            </View>
+            :group ?
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent>
+                    <Image
+                        source={{ uri: group.group_image?.url }}
+                        style={{ height:40, width:40, borderRadius:100 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">{group.name}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{moment(group.last_update_datetime).format('YYYY MM DD')}</Text>
+                </View>
+            </View>
+            :<></>}
+            <View style={{ flex:1 }}>
+                <FlatList
+                    ref={chat_ref}
+                    data={unique_dates}
+                    inverted
+                    style={{ flex:1 }}
+                    renderItem={renderDates}
+                    key={`chat_${group_id}dates`}
+                    keyExtractor={(item) => item}
+                />
+                
+            </View>
+            {show_input_bar ?
+            <View type='header' style={{ padding:5 }}>
+                <InputBar
+                    actions={['image']}
+                    width={200}
+                    onImageUpload={(image) => handleSendImage(image)}
+                />
+            </View>
+            :<></>}
+            <View type='footer' style={{ padding:5 }}>
+                <FormattedTextInput
+                    submit_placement='inline'
+                    icon_submit
+                    width={width}
+                    onSelectInput={() => setShowInputBar(!show_input_bar)}
+                    onSubmit={(data, tags) => handleSendMessage(data, tags)}
+                    onFocusPosition={onFocusPosition}
+                />
+            </View>
+            {group ?
+            <SocketManager
+                distinct_id={distinct_id}
+                access_token={access_token}
+                group_id={group.group_id}
+                subscribed_events={['V1_UPDATE_GROUP_MESSAGE']}
+                onConnect={() => {
+                    if(!needs_reload){ return }
+                    if(group_id){ return getGroupFromServer(group_id) }
+                    if(player_id){ return getChatFromServer(player_id) }
+                    return
+                }}
+                onDisconnect={() => {
+                    setNeedsReload(true)
+                }}
+                onSocketEvent={(ev) => {
+                    if(!ev.data){ return }
+                    let gm:GroupMessageProps = ev.data;
+                    if(gm.group_id != group.group_id){ return }
+                    setSocketMessage(gm);
+                }}
+            />
+            :<></>}
+            {loading ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', padding:20 }}>
+                <ActivityIndicator
+                    size='large'
+                    color={Colors.text.h1}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default GroupChat

package/src/SocialComponents/ImageRenderer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Image } from "react-native"
+import { Button } from "../Components/Themed";
+
+type ImageRendererProps = {
+    image: { url:string, height?:number, width?:number },
+    style?:any,
+    width: number,
+    max_height?:number,
+    allow_aspect_change?:boolean,
+    onSelectImage?:(image:{ url:string, height?:number, width?:number, [key:string]:any }) => void
+}
+const ImageRenderer = ({ image, width, onSelectImage, max_height, style, allow_aspect_change }:ImageRendererProps) => {
+    const getImageRatio = () => {
+        let ratio = 1
+        if(image.width && image.height){
+            ratio = image.width / image.height
+        }
+        return ratio
+    }
+    const ratio = getImageRatio();
+
+    let image_width = width
+    let image_height = width * ratio
+
+    if(max_height && image_height > max_height){
+        image_height = max_height
+        if(!allow_aspect_change){ image_width = image_height / ratio }
+    }
+
+    return (
+        <Button disabled={!onSelectImage} transparent style={{ padding:0 }} onPress={() => onSelectImage ? onSelectImage(image) : console.log('')}>
+            <Image
+                source={{ uri: image.url }}
+                style={{ height: image_height, width: image_width, ...style }}
+                resizeMode="cover"
+            />
+        </Button>
+    )
+}
+
+export default ImageRenderer