733 lines
20 KiB
TypeScript
733 lines
20 KiB
TypeScript
import { HomeHeader } from "@/components/home-header";
|
|
import { MatchCard } from "@/components/match-card";
|
|
import { MatchesByLeague } from "@/components/matches-by-league";
|
|
import { SelectionModal } from "@/components/selection-modal";
|
|
import { CalendarModal } from "@/components/simple-calendar";
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { Colors } from "@/constants/theme";
|
|
import { useAppState } from "@/context/AppStateContext";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import {
|
|
checkFavorite,
|
|
fetchLeagues,
|
|
fetchLiveScore,
|
|
fetchSports,
|
|
fetchTodayMatches,
|
|
} from "@/lib/api";
|
|
import { storage } from "@/lib/storage";
|
|
import { League, Match, Sport } from "@/types/api";
|
|
import { useRouter } from "expo-router";
|
|
import React, { useEffect, useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
ActivityIndicator,
|
|
FlatList,
|
|
RefreshControl,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
|
|
export default function HomeScreen() {
|
|
const router = useRouter();
|
|
const { theme } = useTheme();
|
|
const { t } = useTranslation();
|
|
const insets = useSafeAreaInsets();
|
|
const isDark = theme === "dark";
|
|
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
|
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
|
|
|
const { state, updateSportId, updateDate, updateLeagueKey, updateTimezone } =
|
|
useAppState();
|
|
|
|
const [sports, setSports] = useState<Sport[]>([]);
|
|
const [leagues, setLeagues] = useState<League[]>([]);
|
|
const [matches, setMatches] = useState<Match[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [loadingLeagues, setLoadingLeagues] = useState(false);
|
|
const [now, setNow] = useState(() => new Date());
|
|
const [liveLeagueIdByMatchId, setLiveLeagueIdByMatchId] = useState<
|
|
Record<string, number>
|
|
>({});
|
|
const [page, setPage] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
|
|
const deviceTimeZone = useMemo(() => {
|
|
try {
|
|
console.log(
|
|
"deviceTimeZone",
|
|
Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
);
|
|
return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
|
|
} catch {
|
|
return "UTC";
|
|
}
|
|
}, []);
|
|
|
|
// 初始化时同步设备时区到 Context
|
|
useEffect(() => {
|
|
updateTimezone(deviceTimeZone);
|
|
}, [deviceTimeZone]);
|
|
|
|
// Selection States - 从 Context 读取
|
|
const selectedSportId = state.selectedSportId;
|
|
const selectedDate = state.selectedDate;
|
|
const selectedLeagueKey = state.selectedLeagueKey;
|
|
const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
|
|
|
|
// Modal Visibilities
|
|
const [showSportModal, setShowSportModal] = useState(false);
|
|
const [showCalendarModal, setShowCalendarModal] = useState(false);
|
|
|
|
// Load Sports and Leagues
|
|
useEffect(() => {
|
|
loadSports();
|
|
loadLeagues();
|
|
}, []);
|
|
|
|
// 当前时间：每秒刷新（用于展示“现在时间/时区”）
|
|
useEffect(() => {
|
|
const id = setInterval(() => setNow(new Date()), 1000);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
|
|
// Load Matches when sport or date changes
|
|
useEffect(() => {
|
|
if (selectedSportId !== null) {
|
|
loadMatches(selectedSportId);
|
|
}
|
|
}, [selectedSportId, selectedDate]);
|
|
|
|
useEffect(() => {
|
|
setPage(1);
|
|
setTotal(0);
|
|
}, [selectedSportId, selectedDate, state.selectedLeagueKey]);
|
|
|
|
const timezoneLabel = useMemo(() => {
|
|
// 仅展示 UTC 偏移（不展示时区名）
|
|
const offsetMin = -now.getTimezoneOffset();
|
|
const sign = offsetMin >= 0 ? "+" : "-";
|
|
const abs = Math.abs(offsetMin);
|
|
const hh = String(Math.floor(abs / 60)).padStart(2, "0");
|
|
const mm = String(abs % 60).padStart(2, "0");
|
|
return `UTC${sign}${hh}`;
|
|
}, [now]);
|
|
|
|
const nowTimeText = useMemo(() => {
|
|
const hh = String(now.getHours()).padStart(2, "0");
|
|
const mm = String(now.getMinutes()).padStart(2, "0");
|
|
const ss = String(now.getSeconds()).padStart(2, "0");
|
|
return `${hh}:${mm}`;
|
|
}, [now]);
|
|
|
|
// Load Leagues when sport changes
|
|
useEffect(() => {
|
|
if (selectedSportId !== null) {
|
|
loadLeagues();
|
|
}
|
|
}, [selectedSportId]);
|
|
|
|
const loadSports = async () => {
|
|
try {
|
|
const apiList = await fetchSports();
|
|
// 创建8个运动的完整列表
|
|
const defaultSports: Sport[] = [
|
|
{
|
|
id: 1,
|
|
name: "football",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "basketball",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "tennis",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "cricket",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "baseball",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "badminton",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "snooker",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "volleyball",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
];
|
|
|
|
// 合并API返回的运动和默认列表
|
|
const sportsMap = new Map<number, Sport>();
|
|
apiList.forEach((sport) => {
|
|
sportsMap.set(sport.id, sport);
|
|
});
|
|
|
|
// 补充默认运动到8个
|
|
defaultSports.forEach((sport) => {
|
|
if (!sportsMap.has(sport.id)) {
|
|
sportsMap.set(sport.id, sport);
|
|
}
|
|
});
|
|
|
|
const allSports = Array.from(sportsMap.values())
|
|
.sort((a, b) => a.id - b.id)
|
|
.slice(0, 8);
|
|
|
|
setSports(allSports);
|
|
} catch (e) {
|
|
console.error(e);
|
|
// API失败时使用默认8个运动
|
|
const defaultSports: Sport[] = [
|
|
{
|
|
id: 1,
|
|
name: "football",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "basketball",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "tennis",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "cricket",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "baseball",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "badminton",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "snooker",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "volleyball",
|
|
description: "",
|
|
icon: "",
|
|
isActive: true,
|
|
updatedAt: "",
|
|
createdAt: "",
|
|
},
|
|
];
|
|
setSports(defaultSports);
|
|
}
|
|
};
|
|
|
|
// 加载联赛
|
|
const loadLeagues = async () => {
|
|
try {
|
|
if (selectedSportId !== null) {
|
|
setLoadingLeagues(true);
|
|
const res = await fetchLeagues({ sportId: selectedSportId });
|
|
setLeagues(res.list);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoadingLeagues(false);
|
|
}
|
|
};
|
|
|
|
const loadMatches = async (sportId: number, isRefresh = false) => {
|
|
if (!isRefresh) setLoading(true);
|
|
try {
|
|
const res = await fetchTodayMatches({
|
|
sportId,
|
|
date: selectedDate,
|
|
timezone: deviceTimeZone,
|
|
leagueKey: state.selectedLeagueKey || "",
|
|
page: 1,
|
|
pageSize: 50,
|
|
});
|
|
setPage(1);
|
|
setTotal(res.total);
|
|
|
|
const normalizeDate = (d: Date) => {
|
|
const year = d.getFullYear();
|
|
const month = String(d.getMonth() + 1).padStart(2, "0");
|
|
const day = String(d.getDate()).padStart(2, "0");
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
const todayStr = normalizeDate(new Date());
|
|
const selectedStr = normalizeDate(selectedDate);
|
|
const shouldMergeLive = selectedStr === todayStr;
|
|
|
|
let merged: Match[] = res.list.map((m) => ({
|
|
...m,
|
|
date: m.date || selectedStr,
|
|
sportId: m.sportId ?? sportId,
|
|
}));
|
|
|
|
if (shouldMergeLive) {
|
|
try {
|
|
const liveData = await fetchLiveScore(
|
|
sportId,
|
|
state.selectedLeagueKey
|
|
? parseInt(state.selectedLeagueKey)
|
|
: undefined,
|
|
state.timezone || deviceTimeZone,
|
|
);
|
|
|
|
const formatLiveTime = (status: string, fallback: string) => {
|
|
const s = (status || "").trim();
|
|
if (!s) return (fallback || "").trim();
|
|
if (/^\d{1,3}$/.test(s)) return `${s}'`;
|
|
return s;
|
|
};
|
|
|
|
const map: Record<string, number> = {};
|
|
const liveMatches: Match[] = (liveData || []).map((item) => {
|
|
const id = item.event_key.toString();
|
|
map[id] = item.league_key;
|
|
return {
|
|
id,
|
|
league: item.league_name,
|
|
leagueName: item.league_name,
|
|
leagueLogo: item.league_logo,
|
|
time: formatLiveTime(item.event_status, item.event_time),
|
|
date: item.event_date,
|
|
home: item.event_home_team,
|
|
away: item.event_away_team,
|
|
homeTeamName: item.event_home_team,
|
|
awayTeamName: item.event_away_team,
|
|
homeTeamLogo: item.home_team_logo || "",
|
|
awayTeamLogo: item.away_team_logo || "",
|
|
scoreText: item.event_halftime_result || "0 - 0",
|
|
fav: false,
|
|
sportId: sportId,
|
|
isLive: true,
|
|
leagueKey: item.league_key,
|
|
};
|
|
});
|
|
|
|
setLiveLeagueIdByMatchId(map);
|
|
|
|
// Merge by id: live takes precedence
|
|
const byId = new Map<string, Match>();
|
|
liveMatches.forEach((m) => byId.set(m.id, m));
|
|
merged.forEach((m) => {
|
|
if (!byId.has(m.id)) byId.set(m.id, m);
|
|
});
|
|
merged = Array.from(byId.values());
|
|
} catch (e) {
|
|
// Live merge failure should not block base list
|
|
console.warn("Fetch live score failed:", e);
|
|
}
|
|
} else {
|
|
setLiveLeagueIdByMatchId({});
|
|
}
|
|
|
|
const token = await storage.getAccessToken();
|
|
let listWithFavStatus = merged;
|
|
|
|
if (token) {
|
|
listWithFavStatus = await Promise.all(
|
|
merged.map(async (m) => {
|
|
try {
|
|
const favRes = await checkFavorite("match", m.id);
|
|
return { ...m, fav: favRes.isFavorite };
|
|
} catch (error) {
|
|
console.error(`Check favorite failed for match ${m.id}:`, error);
|
|
return m;
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
|
|
// 收藏置顶，其次直播置顶
|
|
const sortedList = [...listWithFavStatus].sort((a, b) => {
|
|
if (a.fav !== b.fav) return a.fav ? -1 : 1;
|
|
const aLive = !!a.isLive;
|
|
const bLive = !!b.isLive;
|
|
if (aLive !== bLive) return aLive ? -1 : 1;
|
|
return 0;
|
|
});
|
|
|
|
setMatches(sortedList);
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
if (!isRefresh) setLoading(false);
|
|
}
|
|
};
|
|
|
|
const onRefresh = async () => {
|
|
if (!selectedSportId) return;
|
|
setRefreshing(true);
|
|
await loadMatches(selectedSportId, true);
|
|
setRefreshing(false);
|
|
};
|
|
|
|
const loadMoreMatches = async () => {
|
|
if (loadingMore || loading) return;
|
|
if (!selectedSportId) return;
|
|
if (matches.length >= total) return;
|
|
|
|
setLoadingMore(true);
|
|
try {
|
|
const nextPage = page + 1;
|
|
const res = await fetchTodayMatches({
|
|
sportId: selectedSportId,
|
|
date: selectedDate,
|
|
timezone: deviceTimeZone,
|
|
leagueKey: state.selectedLeagueKey || "",
|
|
page: nextPage,
|
|
pageSize: 50,
|
|
});
|
|
|
|
setPage(nextPage);
|
|
setTotal(res.total);
|
|
|
|
setMatches((prev) => {
|
|
const byId = new Map<string, Match>();
|
|
prev.forEach((m) => byId.set(m.id, m));
|
|
res.list.forEach((m) => {
|
|
if (!byId.has(m.id)) byId.set(m.id, m);
|
|
});
|
|
return Array.from(byId.values());
|
|
});
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoadingMore(false);
|
|
}
|
|
};
|
|
|
|
const handleFavoriteToggle = (matchId: string, isFav: boolean) => {
|
|
setMatches((prev) => {
|
|
const updated = prev.map((m) =>
|
|
m.id === matchId ? { ...m, fav: isFav } : m,
|
|
);
|
|
return [...updated].sort((a, b) => {
|
|
if (a.fav === b.fav) return 0;
|
|
return a.fav ? -1 : 1;
|
|
});
|
|
});
|
|
};
|
|
|
|
const currentSport = sports.find((s) => s.id === selectedSportId);
|
|
|
|
// 获取当前运动的国际化名称
|
|
const getSportName = (sport: Sport | undefined): string => {
|
|
if (!sport) return t("home.select_sport");
|
|
const sportKeyMap: { [key: number]: string } = {
|
|
1: "football",
|
|
2: "basketball",
|
|
3: "tennis",
|
|
4: "cricket",
|
|
5: "baseball",
|
|
6: "badminton",
|
|
7: "snooker",
|
|
8: "volleyball",
|
|
};
|
|
const sportKey = sportKeyMap[sport.id] || sport.name.toLowerCase();
|
|
return t(`sports.${sportKey}`, { defaultValue: sport.name });
|
|
};
|
|
|
|
const handleLeagueSelect = (leagueKey: string) => {
|
|
updateLeagueKey(leagueKey);
|
|
console.log("Selected league:", leagueKey);
|
|
};
|
|
|
|
// 缓存运动选项，避免每次渲染都重新计算
|
|
const sportOptions = useMemo(() => {
|
|
return sports.map((s) => {
|
|
const sportKeyMap: { [key: number]: string } = {
|
|
1: "football",
|
|
2: "basketball",
|
|
3: "tennis",
|
|
4: "cricket",
|
|
5: "baseball",
|
|
6: "badminton",
|
|
7: "snooker",
|
|
8: "volleyball",
|
|
};
|
|
const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
|
|
return {
|
|
id: s.id,
|
|
label: s.name,
|
|
value: s.id,
|
|
icon: s.icon,
|
|
};
|
|
});
|
|
}, [sports]);
|
|
|
|
const renderHeader = () => (
|
|
<View style={styles.filterContainer}>
|
|
{/* Time/League Filter Toggle */}
|
|
<TouchableOpacity
|
|
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
|
onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
|
|
>
|
|
<IconSymbol
|
|
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
|
size={18}
|
|
color={iconColor}
|
|
/>
|
|
<ThemedText style={styles.filterText}>
|
|
{filterMode === "time" ? t("home.time") : t("home.league")}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
|
|
{/* Sport Selector */}
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.filterBtn,
|
|
styles.mainFilterBtn,
|
|
{ backgroundColor: filterBg },
|
|
]}
|
|
onPress={() => setShowSportModal(true)}
|
|
>
|
|
<IconSymbol name="football-outline" size={18} color={iconColor} />
|
|
<ThemedText style={styles.filterText}>
|
|
{getSportName(currentSport)}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
|
|
{/* Date Selector */}
|
|
<TouchableOpacity
|
|
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
|
onPress={() => setShowCalendarModal(true)}
|
|
>
|
|
<ThemedText style={styles.dateDayText}>
|
|
{selectedDate.getDate()}
|
|
</ThemedText>
|
|
<ThemedText style={styles.dateMonthText}>
|
|
{timezoneLabel} {nowTimeText}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<HomeHeader />
|
|
|
|
{renderHeader()}
|
|
|
|
{loading ? (
|
|
<View style={styles.center}>
|
|
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
|
<ThemedText style={{ marginTop: 10 }}>{t("home.loading")}</ThemedText>
|
|
</View>
|
|
) : filterMode === "time" ? (
|
|
<FlatList
|
|
data={matches}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<MatchCard match={item} onFavoriteToggle={handleFavoriteToggle} />
|
|
)}
|
|
refreshControl={
|
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
|
}
|
|
onEndReached={loadMoreMatches}
|
|
onEndReachedThreshold={0.4}
|
|
ListFooterComponent={
|
|
loadingMore ? (
|
|
<View style={styles.footer}>
|
|
<ActivityIndicator size="small" color={Colors[theme].tint} />
|
|
</View>
|
|
) : null
|
|
}
|
|
contentContainerStyle={[
|
|
styles.listContent,
|
|
{ paddingBottom: 80 + insets.bottom },
|
|
]}
|
|
ListEmptyComponent={
|
|
<View style={styles.center}>
|
|
<ThemedText>{t("home.no_matches")}</ThemedText>
|
|
</View>
|
|
}
|
|
/>
|
|
) : (
|
|
<MatchesByLeague
|
|
sportId={selectedSportId || 1}
|
|
date={selectedDate}
|
|
timezone={deviceTimeZone}
|
|
onFavoriteToggle={handleFavoriteToggle}
|
|
/>
|
|
)}
|
|
|
|
{/* Modals - 条件渲染，只在可见时渲染 */}
|
|
{showSportModal && (
|
|
<SelectionModal
|
|
visible={showSportModal}
|
|
onClose={() => setShowSportModal(false)}
|
|
title={t("home.select_sport")}
|
|
options={sportOptions}
|
|
selectedValue={selectedSportId}
|
|
onSelect={updateSportId}
|
|
/>
|
|
)}
|
|
|
|
{showCalendarModal && (
|
|
<CalendarModal
|
|
visible={showCalendarModal}
|
|
onClose={() => setShowCalendarModal(false)}
|
|
selectedDate={selectedDate}
|
|
onSelectDate={updateDate}
|
|
/>
|
|
)}
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
center: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingTop: 50,
|
|
},
|
|
filterContainer: {
|
|
flexDirection: "row",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
gap: 12,
|
|
},
|
|
filterBtn: {
|
|
flex: 1,
|
|
height: 44, // Increased from 36
|
|
flexDirection: "column", // Stacked logic for Date, or Row for others
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: 8, // Rounded corners
|
|
// iOS shadow
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 2,
|
|
// Android elevation
|
|
elevation: 2,
|
|
},
|
|
mainFilterBtn: {
|
|
flex: 2, // Wider for sport
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
},
|
|
filterText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
},
|
|
dateDayText: {
|
|
fontSize: 16,
|
|
lineHeight: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
dateMonthText: {
|
|
fontSize: 12,
|
|
lineHeight: 12,
|
|
opacity: 0.6,
|
|
},
|
|
listContent: {
|
|
padding: 16,
|
|
paddingTop: 8,
|
|
},
|
|
footer: {
|
|
paddingVertical: 16,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
});
|