be-components 2.8.1 → 3.0.0

package/src/Components/LinearDiagnal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { View, StyleSheet } from "react-native"
-import LinearGradient from "react-native-linear-gradient";
+import {LinearGradient} from "expo-linear-gradient";
 import Colors from '../constants/colors';
 import Text from './Text';
 

package/src/Components/Spring.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import { Modal, Platform } from 'react-native';
 import { useSpring, animated } from '@react-spring/web';
+import Text from './Text';
 
 type SpringViewProps = {
     style?: any,
@@ -33,15 +35,30 @@ const SpringView = ({ style, children, from, to, slide, onResolve }:SpringViewPr
 
     const props = useSpring(config)
 
-    return (
-        <animated.div
-            onAnimationEnd={() => console.log('animation has ended')}
-            style={{ ...props, ...style }}
-            
+    if(Platform.OS == 'web'){
+        return (
+            <animated.div
+                onAnimationEnd={() => console.log('animation has ended')}
+                style={{ ...props, ...style }}
+                
+            >
+                {children}
+            </animated.div>
+        )
+    } else {
+        return (
+        <Modal 
+        style={{ ...style }}
+        animationType="slide"
+        visible={true}
         >
+            <Text>HEY THIS SHOULD BE IN HERE!!!</Text>
             {children}
-        </animated.div>
-    )
+        </Modal>
+        )
+    }
+
+    
 }
 
 export default SpringView

package/src/Components/Text.tsx

@@ -4,7 +4,6 @@ import '../Font.css';
 import Colors from '../constants/colors';
 import { text_styles } from '../constants/styles';
 
-
 export interface TextProps { 
     weight?:'bold'|'semibold'|'regular'|'light', 
     color?:string, 
@@ -20,7 +19,6 @@ const STANDARD_SIZE = 414
 
 const Text = ({ weight, color, size, children, theme, selectable, textAlign, style }: TextProps) => {
     const dimensions = useWindowDimensions();
-
     let rendered_size = size ?? 14
     let diff_from_normal = dimensions.width - STANDARD_SIZE
     if(diff_from_normal < 0){
@@ -30,16 +28,16 @@ const Text = ({ weight, color, size, children, theme, selectable, textAlign, sty
 
     const getFontFamily = (weight:string) => {
         switch(weight){
-            case 'bold': return 'barlow-bold'
-            case 'semibold': return 'barlow-semibold'
-            case 'regular': return 'barlow-regular'
-            case 'light': return 'barlow-light'
-            default: return 'barlow-regular'
+            case 'bold': return 'BarlowBold'
+            case 'semibold': return 'BarlowSemiBold'
+            case 'regular': return 'BarlowRegular'
+            case 'light': return 'BarlowLight'
+            default: return 'BarlowRegular'
         }
     }
 
     const getAttributes = () => {
-        let default_theme = { color:color??Colors.shades.black, fontSize: size??14, fontFamily:weight?getFontFamily(weight):'barlow-regular', textAlign: textAlign??'left'  }
+        let default_theme = { color:color??Colors.shades.black, fontSize: size??14, fontFamily:weight?getFontFamily(weight):'BarlowRegular', textAlign: textAlign??'left'  }
         switch(theme){
             case 'header': return text_styles.header
             case 'header_2': return text_styles.header_2
@@ -48,7 +46,6 @@ const Text = ({ weight, color, size, children, theme, selectable, textAlign, sty
             case 'error_body': return text_styles.error_body
             case 'body_2': return text_styles.body_2
             case 'error_body_2': return text_styles.error_body_2
-
             default: return default_theme
         }
     }

package/src/Components/TextInput.tsx

@@ -5,7 +5,7 @@ import Colors from '../constants/colors';
 
 type TextInputProps = {
     value?:string,
-    key?:string,
+    input_key?:string,
     placeholder?:string,
     autoFocus?:boolean,
     multiline?:boolean,
@@ -23,7 +23,7 @@ type TextInputProps = {
 
 const STANDARD_SIZE = 414
 
-const TextInput = ({ onChangeText, key, placeholderTextColor, value, placeholder, style, autoFocus, multiline, keyboardType, textContentType, editable, secureTextEntry, onContentSizeChange, onSubmitEditing, onBlur } : TextInputProps) => {
+const TextInput = ({ onChangeText, input_key, placeholderTextColor, value, placeholder, style, autoFocus, multiline, keyboardType, textContentType, editable, secureTextEntry, onContentSizeChange, onSubmitEditing, onBlur } : TextInputProps) => {
     const dimensions = useWindowDimensions();
 
     let rendered_size = style?.fontSize ?? 14
@@ -35,7 +35,7 @@ const TextInput = ({ onChangeText, key, placeholderTextColor, value, placeholder
     
     return (
         <RNTextInput
-            key={key}
+            key={input_key}
             onContentSizeChange={onContentSizeChange}
             multiline={multiline ? true : false}
             style={{ 

package/src/Components/ViewportObserver.tsx

@@ -1,8 +1,11 @@
 import  { useState, useMemo, useEffect } from "react";
+import { Platform } from 'react-native';
 
 export const useIsInViewport = (ref:any) => {
     const [ isIntersecting, setIsIntersecting ] = useState(false);
   
+  if(Platform.OS != 'web'){ return true }
+
     const observer = useMemo(
       () =>
         new IntersectionObserver(([entry]) => {
@@ -15,6 +18,7 @@ export const useIsInViewport = (ref:any) => {
   
     useEffect(() => {
       if(!ref?.current){ return }
+      if(Platform.OS != 'web'){ return }
       observer.observe(ref.current);
       return () => {
         observer.disconnect();

package/src/EventComponents/TeamProfile/index.tsx

@@ -3,7 +3,7 @@ import { View, Image, ScrollView, FlatList, TouchableOpacity, ActivityIndicator
 import type { EventProps, OrderProps, TeamProps, TradeProps } from '../../types';
 import { EventComponentApi } from '../api';
 import { Text } from '../../Components';
-import LinearGradient from 'react-native-linear-gradient';
+import { LinearGradient } from 'expo-linear-gradient';
 import Colors from '../../constants/colors';
 import { view_styles } from '../../constants/styles';
 import TeamEventList from '../../MarketComponents/components/TeamEventList';

package/src/Font.css

@@ -1,23 +1,23 @@
 @font-face {
     font-family: 'barlow-bold';
-    src: local('Barlow-Bold'),
+    src: local('BarlowBold'),
     url('./Assets/fonts/Barlow-Bold.ttf')
 }
 
 @font-face {
     font-family: 'barlow-semibold';
-    src: local('Barlow-SemiBold'),
+    src: local('BarlowSemiBold'),
     url('./Assets/fonts/Barlow-SemiBold.ttf')
 }
 
 @font-face {
     font-family: 'barlow-regular';
-    src: local('Barlow-Regular'),
+    src: local('BarlowRegular'),
     url('./Assets/fonts/Barlow-Regular.ttf')
 }
 
 @font-face { 
     font-family: 'barlow-light';
-    src: local('Barlow-Light'),
+    src: local('BarlowLight'),
     url('./Assets/fonts/Barlow-Light.ttf')
 }

package/src/LocationTracker/LocationStatus.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { LocationApi, LocationHelpers } from './api';
 import type { LocationProps, PlayerAddressProps } from '../types';
+import * as Location from 'expo-location';
 
 type UsePlayerLocationProps = {
     player_id?:string,
@@ -24,7 +25,7 @@ export const usePlayerLocation = ({ player_id, distinct_id }:UsePlayerLocationPr
     })
     const [ permission, setPermission ] = useState<{
         checked:boolean,
-        permission?: 'granted'|'denied'|'prompt'
+        permission?: Location.PermissionStatus
     }>({
         checked:false
     })
@@ -55,22 +56,21 @@ export const usePlayerLocation = ({ player_id, distinct_id }:UsePlayerLocationPr
         setLocation({ ...location, loading: true })
         try {
 
-            let cached_loc = await LocationApi.getCachedLocation();
+            let cached_loc = undefined//await LocationApi.getCachedLocation();
             if(cached_loc && !options?.no_cache){
                 setLocation(cached_loc)
-                setPermission({ checked: true, permission: 'granted' });
+                setPermission({ checked: true, permission: Location.PermissionStatus.GRANTED });
             } else {
                 const coordinates = await LocationApi.getPosition();
                 setPermission({
                     checked:true,
-                    permission: 'granted'
+                    permission: Location.PermissionStatus.GRANTED
                 })
                 const locations = await LocationApi.getLocations();
 
                 //OK! First we are going to try and compare to the players last location
                 //If the user is within a mile, then we will use their last one for this
                 const { last_location, distance } = await LocationApi.compareLastLocation({ anonymous_id:distinct_id, player_id: player_id ?? '0', coordinates:coordinates, player_location_id: '', create_datetime: '' })
-                
                 if(last_location && distance < 5){
                     const gen_addy = LocationHelpers.getAddressFromLastLocation(last_location, locations);
                     if(gen_addy){
@@ -110,7 +110,7 @@ export const usePlayerLocation = ({ player_id, distinct_id }:UsePlayerLocationPr
             console.log('ERROR GETTING LOC!')
             setPermission({
                 checked:true,
-                permission: 'denied'
+                permission: Location.PermissionStatus.DENIED
             })
             setLocation({
                 loading:false,

package/src/LocationTracker/api/index.tsx

@@ -1,7 +1,7 @@
 import axios from "axios"
 import { Platform } from 'react-native';
-import Geolocation from '@react-native-community/geolocation';
-
+//import Geolocation from '@react-native-community/geolocation';
+import * as Location from 'expo-location';
 import { APIOverrides } from "../../ApiOverrides";
 import type { LocationProps, PlayerAddressProps, PlayerLocationProps } from "../../types";
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -26,7 +26,10 @@ const LocationApi = {
     },
     compareLastLocation: async(player_location:PlayerLocationProps):Promise<{ last_location?:PlayerLocationProps, distance:number }> => {
         try {
+            if(Platform.OS != 'web'){ return { distance: 1000 } }
+            console.log('comparing!!!')
             const resp = await axios.post(`${SOCIAL_SVC_API}/v1/locations/player/compare`, { player_location })
+            console.log(resp.data)
             return { distance: resp.data.distance, last_location: resp.data.last_location }
         } catch (e) {
             console.log(e)
@@ -42,13 +45,9 @@ const LocationApi = {
             return undefined
         }
     },
-    getPermission: async():Promise<'denied'|'prompt'|'granted'> => {
-        if(Platform.OS == 'web' && navigator?.permissions){
-            let permissions = await navigator.permissions.query({ name: "geolocation" })
-            return permissions.state
-        } else {
-            return 'denied'
-        }
+    getPermission: async():Promise<Location.PermissionStatus> => {
+        let { status } = await Location.requestForegroundPermissionsAsync();
+        return status
     },
     cache_location: async(loc:any):Promise<void> => {
         await AsyncStorage.setItem('cache_location', JSON.stringify({ ...loc, cached_at:moment() }))
@@ -64,51 +63,184 @@ const LocationApi = {
         return undefined
     },
     getPosition: async():Promise<any> => {
-        return new Promise((resolve, reject) => {
-            Geolocation.getCurrentPosition((position) => {
-                resolve({
-                    latitude: position.coords.latitude,
-                    longitude: position.coords.longitude,
-                    altitude: position.coords.altitude,
-                    altitudeAccuracy: position.coords.altitudeAccuracy,
-                    speed: position.coords.speed,
-                    accuracy: position.coords.accuracy
-                })
-            }, (error) => {
-                reject(error)
-            })
-        })            
+        const location = await Location.getCurrentPositionAsync();
+        
+        if(!location){ return undefined }
+        const { coords } = location;
+        return {
+            latitude: coords.latitude,
+            longitude: coords.longitude,
+            altitude: coords.altitude,
+            altitudeAccuracty: coords.altitudeAccuracy,
+            speed: coords.speed,
+            accuracy: coords.accuracy
+        }      
     },
     reverseCoordLookup : async(latitude:number, longitude:number) => {
-        const resp = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${LOCATION_API}`, {
-            headers: {
-                'Authorization': undefined,
-                'x-api-key':undefined,
-                'sessionid':undefined,
-                'distinctid':undefined
-            }
-        })
-        return resp.data.results
+        let addresses:Location.LocationGeocodedAddress[] = []
+        if(Platform.OS == 'web'){
+            const resp = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${LOCATION_API}`, {
+                headers: {
+                    'Authorization': undefined,
+                    'x-api-key':undefined,
+                    'sessionid':undefined,
+                    'distinctid':undefined
+                }
+            })
+            addresses = LocationHelpers.getAddressesFromWebReverseGeocode(resp.data.results);
+            return addresses
+        } else {
+            addresses = await Location.reverseGeocodeAsync({ latitude, longitude });
+
+        }
+        return addresses
     }
 }
 
 
 const LocationHelpers = {
-    getAddressFromGeoCodeResults: (addresses:any[], locations:LocationProps[]):{ player_address?: PlayerAddressProps, region: string, location?:LocationProps } => {
+    getAddressFromGeoCodeResults: (addresses:Location.LocationGeocodedAddress[], locations:LocationProps[]):{ player_address?: PlayerAddressProps, region: string, location?:LocationProps } => {
+        let address = addresses[0]
+        if(!address){ return { region: 'UNKNOWN' } }
+        let location = locations.find(l => l.value.toLowerCase() == address.region?.toLowerCase());
+        if(!location){ return { region: address.region??'UNKNOWN' } }
+        let region = location.label
+        
         let player_address:PlayerAddressProps = {
             player_address_id: '',
             player_id: '',
-            street: '',
-            city: '',
-            state: '',
-            zip:'',
+            street: `${address.streetNumber} ${address.street}`,
+            city: `${address.city}`,
+            state: `${address.region}`,
+            zip:`${address.postalCode}`,
             create_datetime: '', last_update_datetime: '',
-            country: 'US',
+            country: `${address.country}`,
             type: 'billing',
             status: 'active'
         }
+        return { player_address, region, location }
+    },
+    getAddressFromLastLocation: (player_location:PlayerLocationProps, locations:LocationProps[]):{ player_address: PlayerAddressProps, region: string, location?:LocationProps } | undefined => {
+        if(!player_location.player_address || !player_location.region){ return undefined }
+        let location = locations.find(l => l.label.toLowerCase() == player_location.region?.toLowerCase())
+        if(!location){ return undefined }
+        return { player_address: player_location.player_address, region: player_location.region, location }
+    },
+    genPlayerLocationFromAddress: (coordinates: any, region:string, player_address?:PlayerAddressProps, player_id?:string, distinct_id?:string):PlayerLocationProps => {
+        return {
+            player_location_id: '',
+            player_id:player_id ?? '0',
+            anonymous_id: distinct_id,
+            player_address,
+            region,
+            coordinates,
+            create_datetime:''
+        }
+    },
+    getAddressesFromWebReverseGeocode: (addresses:any[]):Location.LocationGeocodedAddress[] => {
+        let geo_addresses:Location.LocationGeocodedAddress[] = []
+        let administrative = addresses.find(r => r.types.includes('administrative_area_level_1'))?.address_components;
+        let street_address_components = addresses.find(r => r.types.includes('street_address'))?.address_components;
+        let premise_address_component = addresses.find(r => r.types.includes('premise'))?.address_components;
+
+        let route_address_component = addresses.find(r => r.types.includes('route'))?.address_components;
+        let found = false;
+        if(street_address_components){
+            let street_number = street_address_components.find((c:any) => c.types.includes('street_number'))?.long_name
+            let street = street_address_components.find((c:any) => c.types.includes('route'))?.long_name
+            let city = street_address_components.find((c:any) => c.types.includes('locality'))?.long_name
+            let state = street_address_components.find((c:any) => c.types.includes('administrative_area_level_1'))?.short_name
+            let zip = street_address_components.find((c:any) => c.types.includes('postal_code'))?.short_name
+            let country = street_address_components.find((c:any) => c.types.includes('country'))?.short_name
+            geo_addresses.push({
+                streetNumber: street_number,
+                street,
+                city,
+                region: state,
+                postalCode: zip,
+                country,
+                name: 'street',
+                district: '',
+                subregion: '',
+                isoCountryCode: country,
+                timezone: '',
+                formattedAddress: `${street_number} ${street} ${city} ${state} ${zip}`
+            })
+            if(state){ found = true }
+        }
+        if(found) { return geo_addresses }
+        if(premise_address_component){
+            let street_number = premise_address_component.find((c:any) => c.types.includes('street_number'))?.long_name
+            let street = premise_address_component.find((c:any) => c.types.includes('route'))?.long_name
+            let city = premise_address_component.find((c:any) => c.types.includes('locality'))?.long_name
+            let state = premise_address_component.find((c:any) => c.types.includes('administrative_area_level_1'))?.short_name
+            let zip = premise_address_component.find((c:any) => c.types.includes('postal_code'))?.short_name
+            let country = premise_address_component.find((c:any) => c.types.includes('country'))?.short_name
+            geo_addresses.push({
+                streetNumber: street_number,
+                street,
+                city,
+                region: state,
+                postalCode: zip,
+                country,
+                name: 'premis',
+                district: '',
+                subregion: '',
+                isoCountryCode: country,
+                timezone: '',
+                formattedAddress: `${street_number} ${street} ${city} ${state} ${zip}`
+            })
+            if(state){ found = true }
+        }
+        if(route_address_component){
+            let street_number = route_address_component.find((c:any) => c.types.includes('street_number'))?.long_name
+            let street = route_address_component.find((c:any) => c.types.includes('route'))?.long_name
+            let city = route_address_component.find((c:any) => c.types.includes('locality'))?.long_name
+            let state = route_address_component.find((c:any) => c.types.includes('administrative_area_level_1'))?.short_name
+            let zip = route_address_component.find((c:any) => c.types.includes('postal_code'))?.short_name
+            let country = route_address_component.find((c:any) => c.types.includes('country'))?.short_name
+            geo_addresses.push({
+                streetNumber: street_number,
+                street,
+                city,
+                region: state,
+                postalCode: zip,
+                country,
+                name: 'route',
+                district: '',
+                subregion: '',
+                isoCountryCode: country,
+                timezone: '',
+                formattedAddress: `${street_number} ${street} ${city} ${state} ${zip}`
+            })
+            if(state){ found = true }
+        }
+        if(administrative){
+            let state = route_address_component.find((c:any) => c.types.includes('administrative_area_level_1'))?.short_name
+            let country = route_address_component.find((c:any) => c.types.includes('country'))?.short_name
+            geo_addresses.push({
+                streetNumber: '',
+                street: '',
+                city: '',
+                region: state,
+                postalCode: '',
+                country,
+                name: 'administrative',
+                district: '',
+                subregion: '',
+                isoCountryCode: country,
+                timezone: '',
+                formattedAddress: `${state} ${country}`
+            })
+        }
+        return geo_addresses
+
+    }
+}
 
-        //First try to get the administrative area
+
+/*
+//First try to get the administrative area
         let region = '';
         let location:LocationProps | undefined
         let administrative = addresses.find(r => r.types.includes('administrative_area_level_1'))?.address_components;
@@ -157,23 +289,4 @@ const LocationHelpers = {
             region = state_component.long_name
             location = locations.find(l => l.label.toLowerCase() == region?.toLowerCase())
         }
-        return { player_address, region, location }
-    },
-    getAddressFromLastLocation: (player_location:PlayerLocationProps, locations:LocationProps[]):{ player_address: PlayerAddressProps, region: string, location?:LocationProps } | undefined => {
-        if(!player_location.player_address || !player_location.region){ return undefined }
-        let location = locations.find(l => l.label.toLowerCase() == player_location.region?.toLowerCase())
-        if(!location){ return undefined }
-        return { player_address: player_location.player_address, region: player_location.region, location }
-    },
-    genPlayerLocationFromAddress: (coordinates: any, region:string, player_address?:PlayerAddressProps, player_id?:string, distinct_id?:string):PlayerLocationProps => {
-        return {
-            player_location_id: '',
-            player_id:player_id ?? '0',
-            anonymous_id: distinct_id,
-            player_address,
-            region,
-            coordinates,
-            create_datetime:''
-        }
-    }
-}
+*/

package/src/LocationTracker/index.tsx

@@ -4,12 +4,13 @@ import { Button, Text } from '../Components';
 import Colors from '../constants/colors';
 import { isSafari, isChrome, isIOS } from 'react-device-detect';
 import type { LocationProps, PlayerAddressProps } from '../types';
+import * as Location from 'expo-location';
 
 type LocationTrackerProps = {
     onClose: () => void,
     permission: {
         checked:boolean,
-        permission?: 'granted'|'denied'|'prompt'
+        permission?: Location.PermissionStatus | 'prompt'
     },
     location: {
         loading: boolean,

package/src/MarketComponents/api/index.ts

@@ -65,9 +65,7 @@ const MarketComponentApi = {
     },
     getPodcastsByKeywords: async(keywords:string):Promise<PodcastProps[]> => {
         try {
-            console.log(keywords)
             const resp = await axios.get(`${SOCIAL_SVC_API}/v1/podcasts/search/keywords?keywords=${keywords}`);
-            console.log(resp.data)
             return resp.data.podcasts
         } catch (e) {
             return []

package/src/MarketComponents/components/AthleteMarket/index.tsx

@@ -64,7 +64,7 @@ const AthleteMarket = ({ event, show_event, league, hide_liquidity, hide_stat_ba
     },[athlete.athlete_id, is_locked, market.market_id, JSON.stringify(event_order_stats), JSON.stringify(best_available_orders)])
 
     return (
-        <View style={{ ...view_styles.section, flex:1, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
+        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
@@ -79,7 +79,7 @@ const AthleteMarket = ({ event, show_event, league, hide_liquidity, hide_stat_ba
                 <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{event.event_title}</Text>
             </View>
             :<></>}
-            <View style={{ ...view_styles.section_body, flex:1, padding:0, justifyContent:'center', alignItems:'center' }}>
+            <View style={{ ...view_styles.section_body, padding:0, justifyContent:'center', alignItems:'center' }}>
                 <AthleteImage
                     athlete={athlete}
                     league={league}

package/src/MarketComponents/components/EventMarket/index.tsx

@@ -60,7 +60,7 @@ const EventMarket = ({ width, event, hide_liquidity, market, latest_trades, best
     },[JSON.stringify(best_available_orders)])
 
     return (
-        <View style={{ ...view_styles.section, flex:1, borderWidth:1, borderColor:Colors.shades.shade600, width, maxWidth:175 }}>
+        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600, width, maxWidth:175 }}>
             {!hide_market_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}

package/src/MarketComponents/components/MatchMarket/index.tsx

@@ -39,7 +39,6 @@ const MatchMarket = ({ league, match, show_event, hide_liquidity, hide_stat_bann
     const match_time_detail = MarketComponentHelpers.getMatchTimeDetail(match);
     let image_size = 32
     if(width){ image_size = width * 0.18 }
-    console.log(width)
     
     const renderSides = useCallback((data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
         const ba_order = best_available_orders.find(o => o.market_id == market.market_id && o.side == data.item.side && o.show);
@@ -56,7 +55,7 @@ const MatchMarket = ({ league, match, show_event, hide_liquidity, hide_stat_bann
         let side_label = data.item.side == 'away' ? away_athlete?.last_name : home_athlete?.last_name
 
         return (
-            <View style={{ margin:2, height:50, width:75 }}>
+            <View key={`${match.match_id}_${data.item.side}`} style={{ margin:2, height:50, width:75 }}>
                 <MarketButton
                     side_option={data.item}
                     market={data.market}
@@ -79,7 +78,7 @@ const MatchMarket = ({ league, match, show_event, hide_liquidity, hide_stat_bann
     if(match.participant_type == 'athlete' && (!home_athlete || !away_athlete)){ return <></> }
     if(match.participant_type == 'team' && (!home_team || !away_team)){ return <></> }
     return (
-        <View style={{ ...view_styles.section, flex:1, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
+        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
@@ -94,7 +93,7 @@ const MatchMarket = ({ league, match, show_event, hide_liquidity, hide_stat_bann
                 <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{match.match_title}</Text>
             </View>
             :<></>}
-            <View style={{ ...view_styles.section_body, flex:1, padding:2, justifyContent:'center', alignItems:'center' }}>
+            <View style={{ ...view_styles.section_body, padding:2, justifyContent:'center', alignItems:'center' }}>
                 {match.participant_type == 'athlete' && away_athlete && home_athlete ?
                 <View style={{ flexDirection:'row', alignItems:'center' }}>
                     <View style={{ borderRadius:100, borderWidth:match.winner == away_athlete?.athlete_id ? 2 : 0, borderColor:Colors.incentive.gold }}>