be-components 3.8.6 → 3.8.7

package/src/SocialComponents/CompanyProfile/index.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, Image, ScrollView, FlatList, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, Image, FlatList } from 'react-native';
 import type { ArticleFeedProps, ArticleProps, BEEventProps, BracketCompetitionProps, BracketProps, CompanyProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, LeagueProps, PodcastProps, PublicPlayerProps, SquaresCompetitionProps } from '../../types';
 import type { CompanyMemberProps } from '../../Authenticator/api/types';
 import { CompanyProfileApi, CompanyProfileHelpers } from './api';
-import Colors from '../../constants/colors';
-import { Icons, Text } from '../../Components';
-import { view_styles } from '../../constants/styles';
+import { Icons, Toggle } from '../../Components';
 import PlayerCard from '../PlayerCard';
 import CompetitionCard from '../../Engage/components/CompetitionCard';
 import BracketCompetitionCard from '../../Engage/components/BracketCompetitionCard';
@@ -13,6 +11,8 @@ import SquaresCompetitionCard from '../../Engage/components/SquaresCompetitionCa
 import ArticleCard from '../ArticleCard';
 import PodcastCard from '../PodcastCard';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type CompanyProfileProps = {
     company_id:string,
@@ -27,7 +27,11 @@ type CompanyProfileProps = {
     onBack?:() => void,
     onShareCompany?:(company:CompanyProps) => void
 }
+
+const co_profile_sections = ['gap','info','members','podcasts','engage_toggle', 'competitions','feeds']
 const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSelectBracketCompetition, onSelectSquaresCompetition, onArticleSelect, onEvent, onSelectPodcast, onSelectPlayer, onBack, onShareCompany }:CompanyProfileProps) => {
+    const Colors = useColors();
+    
     const [ module_size, setModuleSize ] = useState({ height:700, width:300 });
     const [ podcast_data, setPodcastData ] = useState<{
         podcast_loading:boolean,
@@ -48,7 +52,7 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
         company_loading: false,
         company_members: [],
         players:[],
-        active_toggle: 'Comps'
+        active_toggle: 'competitions'
     });
     const { company_loading, company_members, company, players, active_toggle } = company_data;
 
@@ -100,10 +104,10 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
 
     useEffect(() => {
         switch(active_toggle){
-            case 'Comps':
+            case 'competitions':
                 getCompsFromServer(company_id, 0);
                 return
-            case 'Feeds':
+            case 'feeds':
                 getFeedFromServer(company_id, 0);
                 return
             default: return
@@ -188,12 +192,13 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
         const player = players.find(p => p.player_id == data.item.player_id);
         if(!player){ return <></> }
         return (
-            <View style={{ padding:4 }}>
+            <View float style={{ margin:4 }}>
                 <PlayerCard
                     player={player}
-                    width={120}
-                    border
+                    width={150}
+                    
                     alignment='vertical'
+                    show_follow
                     onSelectPlayer={onSelectPlayer}
                     onFollowingUpdate={(pf) => console.log(pf)}
                 />
@@ -206,7 +211,7 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
         let article_width = (module_size.width - 60) / 2
         if(article_width > 240){ article_width = 240 }
         return (
-            <View style={{ width:article_width, margin:5 }}>
+            <View float style={{ margin:4 }}>
                 <ArticleCard
                     article_feed={article_feed}
                     article={data.item}
@@ -222,7 +227,7 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
         let pod_width = (module_size.width) / 3
         if(pod_width > 200){ pod_width = 200 }
         return (
-            <View style={{  }}>
+            <View float style={{ margin:4 }}>
                 <PodcastCard
                     podcast={data.item}
                     width={pod_width}
@@ -233,16 +238,6 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
         )
     }
 
-    const renderToggles = (data:{ item:string, index:number }) => {
-        const active = data.item == active_toggle ? true : false
-        return (
-            <TouchableOpacity style={{ width: (module_size.width - 65) / 2, padding:15, borderRadius:22, backgroundColor:active?Colors.brand.midnight:'transparent' }}
-            onPress={() => setCompanyData({ ...company_data, active_toggle: data.item })}>
-                <Text textAlign='center' weight='bold' size={14} color={active ?Colors.shades.white:Colors.brand.midnight}>{data.item}</Text>
-            </TouchableOpacity>
-        )
-    }
-
     const renderComps = (data: { item:{ type: 'competition'|'squares_competition'|'bracket_competition', id:string, start_time:any }, index:number }) => {
         switch(data.item.type){
             case 'competition':
@@ -253,14 +248,15 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
                 const competition_result_type = competition_result_types.find(ct => ct.competition_result_type_id == competition.competition_result_type_id);
                 if(!competition_result_type){ return <></> }
                 return (
-                    <CompetitionCard
-                        competition={competition}
-                        company={company}
-                        competition_type={competition_type}
-                        competition_result_type={competition_result_type}
-                        onCompetitionSelect={onSelectCompetition}
-
-                    />
+                    <View float style={{ margin:5 }}>
+                        <CompetitionCard
+                            competition={competition}
+                            company={company}
+                            competition_type={competition_type}
+                            competition_result_type={competition_result_type}
+                            onCompetitionSelect={onSelectCompetition}
+                        />
+                    </View>
                 )
             case 'bracket_competition':
                 const bracket_competition = bracket_competitions.find(bc => bc.bracket_competition_id == data.item.id);
@@ -270,102 +266,101 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
                 const bracket = brackets.find(b => b.bracket_id == bracket_competition.bracket_id);
                 const league = leagues.find(l => l.league_id == bracket?.league_id);
                 return (
-                    <BracketCompetitionCard
-                        bracket_competition={bracket_competition}
-                        competition_result_type={crt}
-                        company={company}
-                        bracket={bracket}
-                        league={league}
-                        onCompetitionSelect={onSelectBracketCompetition}
-                    />
+                    <View float style={{ margin:5 }}>
+                        <BracketCompetitionCard
+                            bracket_competition={bracket_competition}
+                            competition_result_type={crt}
+                            company={company}
+                            bracket={bracket}
+                            league={league}
+                            onCompetitionSelect={onSelectBracketCompetition}
+                        />
+                    </View>
                 )
             case 'squares_competition':
                 const squares_competition = squares_competitions.find(sc => sc.sq_comp_id == data.item.id);
                 if(!squares_competition){ return <></> }
                 const event = events.find(e => e.event_id == squares_competition.event_id);
                 return (
-                    <SquaresCompetitionCard
-                        squares_competition={squares_competition}
-                        onSelectCompetition={onSelectSquaresCompetition}
-                        company={company}
-                        event={event}
-                    />
+                    <View float style={{ margin:5 }}>
+                        <SquaresCompetitionCard
+                            squares_competition={squares_competition}
+                            onSelectCompetition={onSelectSquaresCompetition}
+                            company={company}
+                            event={event}
+                        />
+                    </View>
                 )
             default: return <></>
         }
     }
-
-    if(company_loading || !company){
-        return (
-            <View style={{ flex:1 }}>
-                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
-            </View>
-        )
-    }
-
-    return (
-        <View style={{ flex:1 }}>
-        <View style={{ flex:1, backgroundColor:Colors.shades.black_faded }} onLayout={(ev) => {
-            const { height, width } = ev.nativeEvent.layout
-            setModuleSize({ width, height });
-        }}>
-            <View style={{ position:'absolute', top:0, left:0, right:0, alignItems:'center' }} nativeID='profile_image'>
-                <Image
-                    source={{ uri: company.company_image?.url }}
-                    style={{ width: module_size.width, height: module_size.width, borderBottomRightRadius:50, borderBottomLeftRadius:50 }}
-                    resizeMode='cover'
-                />
-            </View>
-            <ScrollView style={{ flex:1 }}>
-                <View style={{ ...view_styles.section, marginTop:module_size.width - 150 }}>
-                    <View style={{ ...view_styles.section_header }}>
-                        <View style={{ flex:1, marginRight:10 }}>
-                            <Text theme='header'>{company.company_name}</Text>
-                            <Text style={{ marginTop:4 }} theme='body_2'>{company.company_description}</Text>
-                        </View>
-                        <View style={{ backgroundColor:Colors.highlights.highlight500, padding:10, borderRadius:22 }}>
-                            <Text size={10} weight='bold' color={Colors.shades.white} textAlign='center'>{company.type.toUpperCase()}</Text>
+    
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'gap':
+                return (
+                    <View transparent style={{ height:300 }} />
+                )
+            case 'info':
+                if(!company){ return <></> }
+                return (
+                    <View style={{ borderTopRightRadius: 22, borderTopLeftRadius:22 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20, borderTopRightRadius: 22, borderTopLeftRadius:22 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>{company.company_name}</Text>
+                                <Text style={{ marginTop:4 }} theme='description'>{company.company_description}</Text>
+                            </View>
+                            <Button disabled style={{ backgroundColor:Colors.absolutes.highlights.highlight500 }}>
+                                <Text size={10} theme='h1' color={Colors.text.white} textAlign='center'>{company.type.toUpperCase()}</Text>
+                            </Button>
                         </View>
                     </View>
-                </View>
-                <View style={{ ...view_styles.section }}>
-                    <View style={{ ...view_styles.section_header }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header'>Company Members</Text>
-                            <Text style={{ marginTop:3 }} theme='body_2'>The following are members of {company.company_name}</Text>
-                        </View>
-                        <View style={{ padding:10 }}>
-                            <Text theme='header_2'>{company_members.length}</Text>
+                )
+            case 'members':
+                if(!company){ return <></> }
+                return (
+                     <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
+                            <View transparent>
+                                <Text theme='h1'>Members</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>The following are members of {company.company_name}</Text>
+                            </View>
+                            <View transparent style={{ padding:10, flex:1, alignItems:'flex-end' }}>
+                                <Text theme='h1'>{company_members.length}</Text>
+                            </View>
                         </View>
-                    </View>
-                    <View style={{ ...view_styles.section_body, padding:10 }}>
-                        <View style={{ ...view_styles.body_row }}>
-                            <View style={{ flex:1 }}>
-                                <FlatList
-                                    key='company_members'
-                                    horizontal
-                                    showsHorizontalScrollIndicator={false}
-                                    data={company_members}
-                                    renderItem={renderMembers}
-                                    keyExtractor={(item) => item.player_id.toString()}
-                                />
+                        <View type='body' style={{ padding:10 }}>
+                            <View type='row'>
+                                <View style={{ flex:1 }}>
+                                    <FlatList
+                                        key='company_members'
+                                        horizontal
+                                        showsHorizontalScrollIndicator={false}
+                                        data={company_members}
+                                        renderItem={renderMembers}
+                                        keyExtractor={(item) => item.player_id.toString()}
+                                    />
+                                </View>
                             </View>
                         </View>
                     </View>
-                </View>
-                {podcasts.length > 0 ?
-                <View style={{ ...view_styles.section }}>
-                    <View style={{ ...view_styles.section_header }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header'>Podcasts</Text>
-                            <Text style={{ marginTop:3 }} theme='body_2'>The following are podcasts hosted by {company.company_name}</Text>
-                        </View>
-                        <View style={{ padding:10 }}>
-                            <Text theme='header_2'>{podcasts.length}</Text>
+                )
+            case 'podcasts':
+                if(!company){ return <></> }
+                if(podcasts.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Podcasts</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>The following are podcasts hosted by {company.company_name}</Text>
+                            </View>
+                        <View transparent style={{ padding:10 }}>
+                            <Text theme='h2'>{podcasts.length}</Text>
                         </View>
                     </View>
-                    <View style={{ ...view_styles.section_body, padding:0 }}>
-                        <View style={{ ...view_styles.body_row }}>
+                    <View type='body' style={{ padding:10 }}>
+                        <View type='row'>
                             <View style={{ flex:1 }}>
                                 <FlatList
                                     key='company_pods'
@@ -379,69 +374,100 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
                         </View>
                     </View>
                 </View>
-                :<></>}
-                <View style={{ ...view_styles.section }}>
-                    <View style={{ ...view_styles.section_header }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header'>Engage</Text>
-                            <Text style={{ marginTop:3 }} theme='body_2'>Use the toggles below to see recent activity from {company.company_name}</Text>
-                        </View>
-                    </View>
-                    <View style={{ ...view_styles.section_body, padding:0 }}>
-                        <View style={{ ...view_styles.body_row, margin:10, marginLeft:20, marginRight:20, borderRadius:22, padding:1, backgroundColor:Colors.shades.shade100 }}>
-                            <FlatList
-                                key={'toggles'}
-                                horizontal
-                                showsHorizontalScrollIndicator={false}
-                                data={['Comps', 'Feeds']}
-                                renderItem={renderToggles}
-                                keyExtractor={(item) => item}
-                            />
+                )
+            case 'engage_toggle':
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{flex:1, paddingLeft:10}}>
+                                <Text theme='h1'>Engage with {company?.company_name}</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Use the toggle to find ways to engage</Text>
+                            </View>
                         </View>
-                        {active_toggle == 'Comps' ?
-                        <View>
-                            {competition_loading ?
-                            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:20, alignSelf:'center' }} />
-                            :<></>}
-                            <FlatList
-                                key={'comps_list'}
-                                data={sorted_comps.sort((a,b) => a.start_time.unix() - b.start_time.unix())}
-                                renderItem={renderComps}
-                                keyExtractor={(item) => `${item.id}:${item.type}`}
+                        <View style={{ padding:10 }}>
+                            <Toggle
+                                options={[
+                                    { key: 'competitions', label: 'Comps' },
+                                    { key: 'feeds', label: 'Feeds' }
+                                ]}
+                                selected_option={active_toggle}
+                                onSelectOption={(option) => setCompanyData({ ...company_data, active_toggle: option })}
                             />
                         </View>
-                        :active_toggle == 'Feeds' ?
-                        <View>
-                            {feed_loading ?
-                            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:20, alignSelf:'center' }} />
-                            :<></>}
-                            <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
-                                {articles.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).map((a,i) => {
-                                    return renderArticles({ item: a, index:i })
-                                })}
-                            </View>
-                        </View>
+                    </View>
+                )
+            case 'competitions':
+                if(active_toggle != 'competitions'){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        {competition_loading ?
+                        <ActivityIndicator size='large' color={Colors.text.h1} style={{ padding:20, alignSelf:'center' }} />
                         :<></>}
+                        <FlatList
+                            key={'comps_list'}
+                            data={sorted_comps.sort((a,b) => a.start_time.unix() - b.start_time.unix())}
+                            renderItem={renderComps}
+                            keyExtractor={(item) => `${item.id}:${item.type}`}
+                        />
                     </View>
-                </View>
-            </ScrollView>
+                )
+            case 'feeds':
+                if(active_toggle!='feeds'){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        {feed_loading ?
+                        <ActivityIndicator size='large' color={Colors.text.h1} style={{ padding:20, alignSelf:'center' }} />
+                        :<></>}
+                        <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                            {articles.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).map((a,i) => {
+                                return renderArticles({ item: a, index:i })
+                            })}
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout
+            setModuleSize({ width, height });
+        }}>
+            <View style={{ position:'absolute', top:0, left:0, right:0, alignItems:'center' }} nativeID='profile_image'>
+                <Image
+                    source={{ uri: company?.company_image?.url }}
+                    style={{ width: module_size.width, height: module_size.width, borderBottomRightRadius:50, borderBottomLeftRadius:50, backgroundColor:Colors.text.white }}
+                    resizeMode='cover'
+                />
+            </View>
+             <FlatList
+                data={co_profile_sections}
+                key='co_profile_sections_list'
+                keyExtractor={(item) => item}
+                onRefresh={() => getCompanyDataFromServer(company_id)}
+                refreshing={company_loading}
+                renderItem={renderSections}
+            />
             {onBack ?
-            <TouchableOpacity 
-                style={{ position:'absolute', top:padding_insets?.top ?? 0, left:0, ...view_styles.section, backgroundColor:Colors.shades.shade100, height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+            <Button 
+                float
+                style={{ position:'absolute', top:padding_insets?.top ?? 0, left:0, height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
                 onPress={() => onBack()}>
-                <Icons.ChevronIcon direction='left' color={Colors.brand.midnight} size={14} />
-            </TouchableOpacity> 
+                <Icons.ChevronIcon direction='left' color={Colors.text.h1} size={14} />
+            </Button> 
             :<></>}
-            {onShareCompany?
-            <TouchableOpacity 
-                style={{ position:'absolute', top:padding_insets?.top ?? 0, right:0, ...view_styles.section, backgroundColor:Colors.shades.shade100, height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+            {company && onShareCompany?
+            <Button 
+                float
+                style={{ position:'absolute', top:padding_insets?.top ?? 0, right:0, height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
                 onPress={() => onShareCompany(company)}>
-                <Icons.ShareIcon color={Colors.brand.electric} size={14} />
-            </TouchableOpacity> 
+                <Icons.ShareIcon color={Colors.text.h1} size={14} />
+            </Button> 
             :<></>}
         </View>
-        </View>
     )
 }
 
-export default CompanyProfile
+export default CompanyProfile
+

package/src/SocialComponents/PlayerCard.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { PlayerFollowerProps, PublicPlayerProps } from "../types";
-import { Image, View, TouchableOpacity, StyleSheet } from 'react-native';
-import Colors from '../constants/colors';
-import { Text } from '../Components';
-import { view_styles } from '../constants/styles';
+import { Image, StyleSheet } from 'react-native';
 import PlayerFollowButton from './PlayerFollowButton';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
 
 type PlayerCardProps = {
     player:PublicPlayerProps,
@@ -15,20 +14,16 @@ type PlayerCardProps = {
     player_following?:PlayerFollowerProps,
     show_follow?:boolean,
     style?:any,
-    border?:boolean,
-    float?:boolean,
-    onSelectPlayer:(p:PublicPlayerProps) => void,
+    onSelectPlayer?:(p:PublicPlayerProps) => void,
     onFollowingUpdate:(pf:PlayerFollowerProps) => void
 }
 
-const PlayerCard = ({ player, width, border, follow_loading, alignment, style, float, show_follow, player_follower, player_following, onSelectPlayer, onFollowingUpdate }:PlayerCardProps) => {
-
+const PlayerCard = ({ player, width, follow_loading, alignment, style, show_follow, player_follower, player_following, onSelectPlayer, onFollowingUpdate }:PlayerCardProps) => {
+    const Colors = useColors();
     let player_style = alignment == 'vertical' ? local_styles.player_vertical : local_styles.player_horizontal;
-    let container_style = { ...local_styles.container }
-    if(float){ container_style = { ...container_style, ...view_styles.float } }
     return (
-        <View style={{ ...container_style, ...style, width, borderWidth: border?1:0, borderColor:Colors.shades.shade600 }}>
-            <TouchableOpacity style={player_style} onPress={() => onSelectPlayer(player)}>
+        <View style={{ ...style, borderColor:Colors.borders.light, borderRadius:8 }}>
+            <Button disabled={!onSelectPlayer} style={player_style} onPress={() => onSelectPlayer ? onSelectPlayer(player): console.log('')}>
                 {alignment == 'vertical' ? 
                 <View>
                     <Image
@@ -46,12 +41,12 @@ const PlayerCard = ({ player, width, border, follow_loading, alignment, style, f
                     />
                 </View>
                 }
-                <View style={{ flex:1, padding:10 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign={alignment == 'vertical' ? 'center' : 'left'}>{player.first_name} {player.last_name}</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign={alignment == 'vertical' ? 'center' : 'left'}>@{player.username}</Text>
+                <View style={{ flexGrow:1, padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                    <Text size={14} theme='h1' textAlign={alignment == 'vertical' ? 'center' : 'left'}>{player.first_name} {player.last_name}</Text>
+                    <Text style={{ marginTop:4 }} size={14} theme='description' textAlign={alignment == 'vertical' ? 'center' : 'left'}>@{player.username}</Text>
                 </View>
                 {show_follow ?
-                <View style={{ padding:10, paddingTop:alignment=='vertical'?0:10 }}>
+                <View style={{ padding:10, paddingTop:alignment=='vertical'?0:10, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                     <PlayerFollowButton
                         loading={follow_loading}
                         player_id={player.player_id}
@@ -61,26 +56,23 @@ const PlayerCard = ({ player, width, border, follow_loading, alignment, style, f
                     />
                 </View>
                 :<></>}
-            </TouchableOpacity>
+            </Button>
         </View>
     )
 }
 
 const local_styles = StyleSheet.create({
-    container: {
-        flex:1,
-        backgroundColor:Colors.shades.white,
-        borderRadius:8
-    },
     player_vertical: {
         flex:1,
         flexDirection:'column',
+        padding:0
         //alignItems:'center'
     },
     player_horizontal: {
         flex:1,
         flexDirection: 'row',
-        alignItems:'center'
+        alignItems:'center',
+        padding:0
     }
 })
 

package/src/SocialComponents/PlayerList.tsx

@@ -1,20 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { SocialComponentApi } from './api';
 import PlayerCard from './PlayerCard';
 import type { PlayerFollowerProps, PublicPlayerProps } from '../types';
+import { View } from '../Components/Themed';
 
 type PlayerListProps = {
     players:PublicPlayerProps[],
     style?: any,
-    onPlayerSelect:(p:PublicPlayerProps) => void,
+    onPlayerSelect?:(p:PublicPlayerProps) => void,
     options: {
         follow_status?:boolean,
         direction: 'horizontal' | 'vertical',
     }
 }
 
-const PlayerList = ({ players, style, options, onPlayerSelect }:PlayerListProps) => {
+const PlayerList = ({ players, options, onPlayerSelect }:PlayerListProps) => {
     const [ size, setSize ] = useState({ width: 0, height:0 });
     const [ follow_status_loading, setFollowStatusLoading ] = useState(false);
     const [ player_followers, setPlayerFollowers ] = useState<PlayerFollowerProps[]>([]);
@@ -32,7 +33,6 @@ const PlayerList = ({ players, style, options, onPlayerSelect }:PlayerListProps)
         if(follow_status){
             setFollowStatusLoading(true);
             const player_followers = await SocialComponentApi.getBulkPlayerfollowers(players.map(p => p.player_id));
-            console.log(player_followers)
             setPlayerFollowers(player_followers)
             setFollowStatusLoading(false);
         }
@@ -41,7 +41,7 @@ const PlayerList = ({ players, style, options, onPlayerSelect }:PlayerListProps)
     const alignment = direction == 'vertical' ? 'horizontal' : 'vertical'
     const player_width = direction == 'vertical' ? size.width - 20: (size.width - 40) / 2
     return (
-        <View style={{ ...new_style, ...style }} onLayout={(ev) => {
+        <View style={{ flex:1, ...new_style }} onLayout={(ev) => {
             const { width, height } = ev.nativeEvent.layout
             setSize({ width, height })
         }}>
@@ -49,12 +49,11 @@ const PlayerList = ({ players, style, options, onPlayerSelect }:PlayerListProps)
                 let following = player_followers.find(pf => pf.following_id == p.player_id);
                 let follower = player_followers.find(pf => pf.player_id == p.player_id);
                 return (
-                    <View key={p.player_id.toString()} style={{ width: player_width, margin:8 }}>
+                    <View float key={p.player_id.toString()} style={{ width: player_width, margin:8, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                         <PlayerCard
                             width={player_width}
                             style={{ borderRadius:8 }}
                             player={p}
-                            float={true}
                             alignment={alignment}
                             player_following={following}
                             player_follower={follower}