be-components 5.1.0 → 5.1.1

package/lib/typescript/src/SocialComponents/api/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/api/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQxP,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,CAAA;AAEvE,QAAA,MAAM,kBAAkB;;sBASA,OAAO,CAAC,WAAW,EAAE,CAAC;0BAQhB,UAAU,KAAE,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC;yCAQ5B,MAAM,EAAE;0CAIP,mBAAmB,KAAE,OAAO,CAAC,mBAAmB,CAAC;qCAItD,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;sCAS9B,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;oCAShC,MAAM,EAAE,KAAE,OAAO,CAAC,YAAY,EAAE,CAAC;oDASlB,MAAM,EAAE,KAAE,OAAO,CAAC,eAAe,EAAE,CAAC;8BAS1D,MAAM,EAAE;wCASE,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;wCAStD,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;iCAS/D,MAAM,KAAE,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;gDAQ1B,MAAM,KAAE,OAAO,CAAC,oBAAoB,GAAG,SAAS,CAAC;kDAS/C,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,CAAC,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,CAAC,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CAS1H,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CASrH,MAAM,mBAAkB,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG,yBAAyB,CAAC;CAS9H,CAAA;AAGD,QAAA,MAAM,kBAAkB;0BACC,UAAU;8BAYN,UAAU;;;;kCAYN,MAAM,OAAM,MAAM;+BAWrB,UAAU,EAAE;;;;;;;+BAWZ,UAAU,UAAS,UAAU,EAAE,eAAc,eAAe,EAAE,WAAU,UAAU,EAAE,YAAW,YAAY,EAAE,SAAQ,SAAS,EAAE,WAAU,WAAW,EAAE,KAAE;QAAE,KAAK,EAAC,MAAM,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,MAAM,CAAC,EAAC,WAAW,CAAC;QAAC,OAAO,CAAC,EAAC,YAAY,CAAC;QAAC,IAAI,CAAC,EAAC,SAAS,CAAA;KAAE;yBAwBzP,MAAM,aAAY,MAAM;CAM/C,CAAA;AAED,QAAA,MAAM,oBAAoB;+BACI,YAAY,KAAE,MAAM;wCAMX,oBAAoB,KAAE,MAAM;uBAO7C,MAAM;2BAMF,MAAM,OAAM,MAAM,UAAS,MAAM;CAG1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/api/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQrR,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAA;AAE/F,QAAA,MAAM,kBAAkB;;sBASA,OAAO,CAAC,WAAW,EAAE,CAAC;0BAQhB,UAAU,KAAE,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC;yCAQ5B,MAAM,EAAE;0CAIP,mBAAmB,KAAE,OAAO,CAAC,mBAAmB,CAAC;qCAItD,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;uCAS7B,MAAM,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;yCAU1C,MAAM,UAAS,MAAM,KAAE,OAAO,CAAC,iBAAiB,EAAE,CAAC;sCAQtD,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;oCAShC,MAAM,EAAE,KAAE,OAAO,CAAC,YAAY,EAAE,CAAC;oDASlB,MAAM,EAAE,KAAE,OAAO,CAAC,eAAe,EAAE,CAAC;8BAS1D,MAAM,EAAE;wCASE,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;wCAStD,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;iCAS/D,MAAM,KAAE,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;gDAQ1B,MAAM,KAAE,OAAO,CAAC,oBAAoB,GAAG,SAAS,CAAC;kDAS/C,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,CAAC,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,CAAC,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CAS1H,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CASrH,MAAM,mBAAkB,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG,yBAAyB,CAAC;CAS9H,CAAA;AAGD,QAAA,MAAM,kBAAkB;0BACC,UAAU;8BAYN,UAAU;;;;kCAYN,MAAM,OAAM,MAAM;+BAWrB,UAAU,EAAE;;;;;;;+BAWZ,UAAU,UAAS,UAAU,EAAE,eAAc,eAAe,EAAE,WAAU,UAAU,EAAE,YAAW,YAAY,EAAE,SAAQ,SAAS,EAAE,WAAU,WAAW,EAAE,KAAE;QAAE,KAAK,EAAC,MAAM,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,MAAM,CAAC,EAAC,WAAW,CAAC;QAAC,OAAO,CAAC,EAAC,YAAY,CAAC;QAAC,IAAI,CAAC,EAAC,SAAS,CAAA;KAAE;yBAwBzP,MAAM,aAAY,MAAM;CAM/C,CAAA;AAED,QAAA,MAAM,sBAAsB;gCACG,MAAM,WAAU,MAAM,KAAE,QAAQ,EAAE;gCAkBlC,MAAM,cAAa,MAAM,YAAW,MAAM,mBAAkB,MAAM;CAKhG,CAAA;AAED,QAAA,MAAM,oBAAoB;+BACI,YAAY,KAAE,MAAM;wCAMX,oBAAoB,KAAE,MAAM;uBAO7C,MAAM;2BAMF,MAAM,OAAM,MAAM,UAAS,MAAM;CAG1D,CAAA"}

package/lib/typescript/src/SocialComponents/index.d.ts

@@ -6,5 +6,7 @@ import PodcastModule from './PodcastModule';
 import AudioPlayer from "./AudioPlayer";
 import { useContacts } from "./Contacts/useContacts";
 import PostCard from './PostCard';
-export { PlayerCard, PlayerList, PlayerProfile, CompanyProfile, PodcastModule, AudioPlayer, useContacts, PostCard };
+import FormattedTextInput from "./FormattedTextInput";
+import { FormattedText } from "./FormattedText";
+export { PlayerCard, PlayerList, FormattedTextInput, FormattedText, PlayerProfile, CompanyProfile, PodcastModule, AudioPlayer, useContacts, PostCard };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/SocialComponents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/SocialComponents/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EACH,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACX,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/SocialComponents/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EACH,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACX,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/ProfileManager/Components/VouchCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, Image, Modal, Alert, FlatList, Platform } from 'react-native';
+import { TouchableOpacity, Image, Modal, Alert, FlatList, Platform, useWindowDimensions } from 'react-native';
 import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
@@ -36,7 +36,7 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
     const [ disclaimer_confirmed, setDisclaimerConfirmed ] = useState(false);
     const [ id_disclaimer_confirmed, setIDDisclaimerConfirmed ] = useState(false);
     const [ info_visible, setInfoVisible ] = useState(false);
-
+    const { height } = useWindowDimensions();
     const { code_request, promo } = code_details;
     useEffect(() => {
         getPlayerFromServer()
@@ -107,6 +107,7 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
     const renderSections = (data:{item:string, index:number}) => {
         switch(data.item){
             case 'header':
+                if(height < 830){ return <></> }
                 return (
                     <View style={{ padding:20 }}>
                         <Text size={30} theme='h1'>Help us identify you</Text>

package/src/SocialComponents/FormattedText.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Button, Text, View } from "../Components/Themed";
+import type { TagProps } from '../types';
+
+type FormattedTextProps = {   
+    text: string,
+    tags:TagProps[],
+    onSelectTag: (tag:SelectedTagProps) => void
+} 
+
+type SelectedTagProps = {
+    tag_character: string,
+    tag_type: 'player',
+    full_tag: string,
+    tag_target: string
+}
+
+export const FormattedText = ({ text, tags, onSelectTag }:FormattedTextProps) => {
+
+    const components = formatText(text, tags, onSelectTag);
+    let unique_lines = [ ...new Set(components.map(c => c.line)) ];
+ 
+    return (
+        <View transparent>
+            {unique_lines.map(l => {
+                let render_components = components.filter(c => c.line == l)
+                return (
+                    <View transparent type='row' style={{ flexWrap:'wrap' }}>
+                        {render_components.map(c => c.component)}
+                    </View>
+                )
+            })}
+        </View>
+    )
+}
+
+export const splitTextByArray = (text:string, separators:string[]) => {
+    const regex = new RegExp(separators.join('|'), 'g');
+    return text.split(regex);
+}
+
+const getTagFromString = (tag:string):SelectedTagProps | undefined => {
+    let tag_character = tag.charAt(0);
+    let tag_target = tag.split(tag_character)[1]
+    if(!tag_target){ return undefined }
+    let full_tag = tag
+    let tag_type:'player' = 'player'
+    switch(tag_character){
+        case '@': tag_type = 'player'; break; 
+        default: break
+    }
+    return {
+        tag_character,
+        tag_target,
+        full_tag,
+        tag_type
+    }
+
+}
+
+export const formatText = (text:string, included_tags:TagProps[], onSelectTag:(tag:SelectedTagProps) => void):{ line:number, component:any }[] => {
+    let raw_text = text.replace(/\\n/g, " {ln} ")
+    let parsed_text:string[] = JSON.parse(raw_text as string).split(' ');
+    //First - lets grab the line breaks
+    let line_breaks:number[] = []
+    parsed_text.map((t,i) => {
+        let breaks = t.split('{ln}');
+        if(breaks.length > 1){
+            line_breaks.push(i);
+        }
+    })
+
+    let components:{line:number, component:any}[] = []
+    let lines:{ [key:number]: string } = {}
+    let tags:{ [key:number]: string[] } = {}
+
+    //Second - Lets generate the lines and grab tags out of the lines
+    let curr_line = 0
+    parsed_text.map((t,i) => {
+        let line_break = line_breaks.find(b => b == i)
+        if(line_break){ curr_line += 1; return }
+        let curr_string = lines[curr_line] ?? ''
+        curr_string += `${t} `
+        lines[curr_line] = curr_string
+        let tag = t.split('@');
+        if(tag.length == 2){
+            let curr_tags = tags[curr_line] ?? []
+        tags[curr_line] = curr_tags.concat(t)
+        }
+    });
+
+    Object.values(lines).map((l,i) => {
+        let line_tags = tags[i] ?? [];
+        let split_line = splitTextByArray(l, line_tags);
+        split_line.map((sl, index) => {
+            components.push({
+                line: i,
+                component: <Text>{sl}</Text>
+            })
+            let tag = line_tags[index]
+            if(tag){
+                //Check if it is valid!
+                const included_tag = included_tags.find(t => t.tag == tag);
+                console.log(included_tag)
+                components.push({
+                    line: i,
+                    component: (
+                        <Button
+                            style={{ padding:0 }}
+                            type='text'
+                            transparent
+                            title={tag}
+                            onPress={() => {
+                                if(!onSelectTag){ return }
+                                let selected_tag = getTagFromString(tag)
+                                if(!selected_tag){ return }
+                                onSelectTag(selected_tag)
+                            }}
+                        />
+                    )
+                })
+            }
+        })
+    })
+    return components
+}

package/src/SocialComponents/FormattedTextInput/components/TagSelector.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../../../Components/Themed";
+import type { PublicPlayerProps, TagProps } from '../../../types';
+import { SocialComponentApi } from '../../api';
+import { FlatList, Image } from 'react-native';
+
+type TagSelectorProps = {
+    type: 'player',
+    visible:boolean,
+    working_tag:TagProps,
+    onCancel: () => void,
+    onSelectTag:(tag:TagProps) => void
+}
+
+const TagSelector = ({ type, visible, working_tag, onSelectTag, onCancel } : TagSelectorProps) => {
+    const [ player_tag, setPlayerTag ] = useState<{
+        loading:boolean,
+        players:PublicPlayerProps[],
+        offset:number
+    }>({
+        loading: false, players:[], offset:0
+    });
+    
+
+    useEffect(() => {
+        if(!visible){ return }
+        startUpSelector(type, working_tag)
+    },[visible, working_tag]);
+
+    const startUpSelector = async(type:'player', working_tag:TagProps) => {
+        switch(type){
+            case 'player':
+                return searchPlayers(working_tag, 0);
+            default: return //Not handled
+        }
+    }
+
+    const searchPlayers = async(tag:TagProps, page:number) => {
+        setPlayerTag({ ...player_tag, loading: true });
+        const plys = await SocialComponentApi.searchPlayersByValue(tag.tag, page);
+        setPlayerTag({
+            ...player_tag,
+            loading: false,
+            players: plys,
+            offset: page
+        })
+    }
+
+    const handleSelectPlayer = (player:PublicPlayerProps) => {
+        if(!working_tag){ return }
+        onSelectTag({
+            ...working_tag,
+            tag: player.username,
+            player,
+            valid: true
+        })
+    }
+
+    const renderPlayers = (data:{ item:PublicPlayerProps, index:number }) => {
+        return (
+            <Button float style={{ margin:4, padding:0, maxWidth:120 }} onPress={() => handleSelectPlayer(data.item)}>
+                <Image
+                    source={{ uri: data.item.profile_pic }}
+                    style={{ height:80, width:120, borderTopRightRadius:8, borderTopLeftRadius:8 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ padding:5 }}>
+                    <Text theme='h2' textAlign='center'>@{data.item.username}</Text>
+                </View>
+            </Button>
+        )
+    }
+    
+    if(!visible){ return <></> }
+
+    return (
+        <View style={{ position:'absolute', bottom:5, left:0, right:0 }}>
+            {type == 'player' ?
+            <View float>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='h2'>Tag A Player!</Text>
+                    </View>
+                    <Button
+                        title='X'
+                        float
+                        onPress={() => onCancel()}
+                    />
+                </View>
+                <View style={{ padding:5 }}>
+                    <FlatList
+                        data={player_tag.players}
+                        key={'player_selector_list_format'}
+                        horizontal
+                        keyExtractor={(item) => item.player_id.toString()}
+                        renderItem={renderPlayers}
+                    />
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default TagSelector

package/src/SocialComponents/FormattedTextInput/index.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { TextInput, View } from "../../Components/Themed"
+import { Platform, type NativeSyntheticEvent, type TextInputSelectionChangeEventData } from 'react-native';
+import type { TagProps } from '../../types';
+import { SocialComponentApi, SocialComponentHelpers } from '../api';
+import TagSelector from './components/TagSelector';
+
+type FormattedTextInputProps = {
+    onChangeText?: (data:{ text:string, formatted_text:any }) => void,
+    onTagsUpdate:(tags:TagProps[]) => void
+}
+
+const FormattedTextInput = ({ onChangeText }:FormattedTextInputProps) => {
+    const [ input_state, setInputState ] = useState<{
+        height:number
+    }>({
+        height: 50
+    });
+    const [ data, setData ] = useState<{  
+        text: string,
+        formatted_text:string
+    }>(
+        {
+            text: '',
+            formatted_text: JSON.stringify('')
+        }
+    );
+    const [ location, setLocation ] = useState({
+        start:0,
+        end:0
+    });
+    const [ tag_selector, setTagSelector ] = useState<{
+        visible:boolean,
+        type:'player',
+        working_tag?:TagProps
+    }>({ visible: false, type: 'player'  })
+
+
+    const { text } = data;
+    const { height } = input_state;
+    const tags = useMemo(() => SocialComponentHelpers.extractTagsFromText(text, location.start), [location.start])
+    const active_tag = tags.find(t => t.active);
+
+    const [ valid_tags, setValidTags ] = useState<TagProps[]>([]);
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ working_tag, setWorkingTag ] = useState<any>();
+
+    useEffect(() => {
+        SocialComponentApi.setEnvironment();
+    },[])
+
+     useEffect(() => {
+        if(active_tag){ return setWorkingTag(active_tag) }
+        if(working_tag){
+            validateTag(working_tag)
+            searchPlayer(working_tag);
+            setWorkingTag(undefined)
+            return
+        }
+    },[active_tag]);
+
+
+    const validateTag = async(tag:TagProps) => {
+        console.log(tag)
+    }
+
+    const searchPlayer = async(tag:TagProps) => {
+        setActionLoading(true);
+        const player = await SocialComponentApi.searchPlayerByUsername(tag.tag);
+        if(player){
+            setValidTags(valid_tags.concat({ ...tag, player }));
+            return setActionLoading(false);
+        }
+        setTagSelector({
+            visible:true,
+            working_tag:tag,
+            type:'player'
+        })
+        return setActionLoading(false);
+    }
+
+
+    const handleSelectionChange = (ev:NativeSyntheticEvent<TextInputSelectionChangeEventData | any>) => {
+        if(ev.nativeEvent.selection.start == location.start){ return }
+        setLocation({
+            start: ev.nativeEvent.selection.start,
+            end: ev.nativeEvent.selection.end
+        });
+    }
+
+    const handleUpdateTag = async(tag:TagProps) => {
+        const new_text = SocialComponentHelpers.replaceText(text, tag.start, tag.end, `@${tag.tag}`);
+        setValidTags(valid_tags.concat({ ...tag }));
+        setData({
+            ...data,
+            text: new_text
+        });
+        setTagSelector({ visible: false, type: 'player' })
+
+    }
+
+    const handleChange = (ev:any) => {
+        let text:string = JSON.stringify(ev.text)
+        setData({
+            ...data,
+            text: ev.text,
+            formatted_text:text
+        });
+        if(onChangeText){ onChangeText({ text: ev.text, formatted_text: text }) }
+    }
+
+    return (
+        <View>
+            <View transparent>
+                {tag_selector.visible && tag_selector.working_tag ?
+                <TagSelector
+                    working_tag={tag_selector.working_tag}
+                    type={tag_selector.type}
+                    visible={tag_selector.visible}
+                    onCancel={() => setTagSelector({ visible: false, type: 'player' })}
+                    onSelectTag={(tag) => handleUpdateTag(tag)}
+                />
+                :<></>}
+            </View>
+            <View transparent>
+                <TextInput
+                    value={text}
+                    editable={!action_loading}
+                    multiline
+                    style={{ flexGrow:1, height: Platform.OS == 'web' ? height : undefined }}
+                    onContentSizeChange={(e) => {
+                        if(Platform.OS != 'web'){ return }
+                        setInputState({ ...input_state, height: e.nativeEvent.contentSize.height })
+                    }}
+                    onSelectionChange={handleSelectionChange}
+                    onChange={(ev) => handleChange(ev.nativeEvent)}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default FormattedTextInput

package/src/SocialComponents/api/index.ts

@@ -1,14 +1,14 @@
 import axios from "axios";
 import { APIOverrides } from "../../ApiOverrides";
-import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, PlayerPodcastEpisodeProps, PlayerPodcastProps, PodcastEpisodesProps, PodcastProps, PostReactionProps, TeamProps, TournamentProps } from "../../types";
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, PlayerPodcastEpisodeProps, PlayerPodcastProps, PodcastEpisodesProps, PodcastProps, PostReactionProps, PublicPlayerProps, TagProps, TeamProps, TournamentProps } from "../../types";
 import Colors from "../../constants/colors";
 import moment from "moment-mini";
 
 let SOCIAL_SVC_API = '';
 let EVENT_SVC_API = '';
 let MK_SVC_API = '';
-//let AUTH_SVC_API = '';
-export { SocialComponentApi, SocialOrderHelpers, SocialPodcastHelpers }
+let AUTH_SVC_API = '';
+export { SocialComponentApi, SocialOrderHelpers, SocialPodcastHelpers, SocialComponentHelpers }
 
 const SocialComponentApi = {
     setEnvironment: () => {
@@ -16,7 +16,7 @@ const SocialComponentApi = {
         SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
         EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
         MK_SVC_API = endpoints['MK_SVC_API'] as string;
-        //AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
 
     },
     getLeagues: async():Promise<LeagueProps[]> => {
@@ -52,6 +52,24 @@ const SocialComponentApi = {
             return []
         }
     },
+    searchPlayerByUsername: async(username:string):Promise<PublicPlayerProps|undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/search/username`, { username })
+            return resp.data.player
+        } catch (e) {
+            console.log('there was an error')
+            console.log(e)
+            return undefined
+        }
+    },
+    searchPlayersByValue: async(search_value:string, offset:number):Promise<PublicPlayerProps[]> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/search/value`, { search_value, offset })
+            return resp.data.players
+        } catch (e) {
+            return []
+        }
+    },
     getMatchesByMatchIds: async(match_ids:string[]):Promise<MatchProps[]> => {
         if(match_ids.length == 0){ return [] }
         try {
@@ -232,6 +250,32 @@ const SocialOrderHelpers = {
     }
 }
 
+const SocialComponentHelpers = {
+    extractTagsFromText: (text:string, cursor?:number):TagProps[] => {
+        let tags:TagProps[] = []
+        let split_text = text.split(' ');
+        if(split_text.length == 0){ return [] }
+        let location = 0
+        split_text.map(t => {
+            let text_length = t.length + 1
+            location += text_length
+            if(t[0] == '@'){
+                let tag = t.split('@')[1]
+                let start = location - text_length
+                let end = location - 1
+                const active = cursor && cursor >= start && cursor <= end ? true :false
+                tags.push({ indicator:'@', type:'player', tag: tag ?? '', start, end, active})
+            }
+        })
+        return tags
+    },
+    replaceText :(originalText:string, startIndex:number, endIndex:number, replacementText:string) => {
+        const before = originalText.substring(0, startIndex);
+        const after = originalText.substring(endIndex);
+        return before + replacementText + after;
+    }
+}
+
 const SocialPodcastHelpers = {
     getPodcastImage: (podcast:PodcastProps):string => {
         let image_source = podcast.image_override?.url

package/src/SocialComponents/index.tsx

@@ -6,9 +6,14 @@ import PodcastModule from './PodcastModule';
 import AudioPlayer from "./AudioPlayer";
 import { useContacts } from "./Contacts/useContacts";
 import PostCard from './PostCard';
+import FormattedTextInput from "./FormattedTextInput";
+import { FormattedText } from "./FormattedText";
+
 export {
     PlayerCard,
     PlayerList,
+    FormattedTextInput,
+    FormattedText,
     PlayerProfile,
     CompanyProfile,
     PodcastModule,

package/src/types.d.ts

@@ -500,7 +500,17 @@ export interface PlayerFollowerStatsProps {
     team_member_count:number
 }
 
-
+export interface TagProps {
+    type: 'player' | string,
+    tag_type_id?:string,
+    player?:PublicPlayerProps,
+    indicator: string,
+    tag: string,
+    start: number,
+    end: number,
+    active?:boolean,
+    valid?:boolean
+}
 
 export interface CampaignProps {
     campaign_id:string,