Как скрыть bottom bar в telegram mini app?
Его видно только в версии браузера, я пытался его убрать разными методами, но не выходит, подскажите в чем проблема и как мне его все все таки скрыть? Пробывал:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover">
<meta
content="width=device-width, height=device-height, initial-scale=1, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
name="viewport" />
tgAny.expand();
tg.setHeaderColor("#151515");
tg.setBackgroundColor("#151515");
if (tgAny.setBottomBarColor) {
tgAny.setBottomBarColor("#151515");
}
if (tgAny.requestFullscreen) {
tgAny.requestFullscreen();
}
Вот весь код с telegramApp для контекста
import { useEffect, useState } from "react";
import { generateRandomUser } from "../utils/generateRandomUser";
import { useAppDispatch, useAppSelector } from "./useRedux";
import { authenticatedUser, setUser } from "../store/slices/user.slice";
import { TelegramUser } from "../types/types";
import { checkUserAuth } from "../utils/checkUserAuth";
import { logger } from "../utils/logger";
export const useTelegram = () => {
const { user, isAuthenticated } = useAppSelector((state) => state.user);
const dispatch = useAppDispatch();
const [loading, setLoading] = useState(true);
const [inTelegram, setInTelegram] = useState(false);
const checkAuth = async (user: TelegramUser) => {
try {
logger.info("Checking user authentication...");
const login = await checkUserAuth(user as TelegramUser);
console.log("User auth check result:", login);
logger.info(`Auth check result: ${login.result ? "SUCCESS" : "FAILED"}`);
if (login.result) {
logger.success("User authenticated successfully");
dispatch(setUser(login.login));
dispatch(authenticatedUser(true));
} else {
logger.warn("User not found in database, need registration");
user.is_admin = false;
user.is_banned = false;
dispatch(setUser(user));
dispatch(authenticatedUser(false));
}
} catch (error) {
logger.error("Auth check error", error);
console.error("Auth check error:", error);
dispatch(setUser(user));
dispatch(authenticatedUser(false));
} finally {
setLoading(false);
}
};
useEffect(() => {
const initializeTelegram = async () => {
if (window.Telegram?.WebApp) {
const tgAny = window.Telegram.WebApp as any; // Используем any для доступа к недокументированным методам
setInTelegram(true);
logger.info("Telegram WebApp detected");
try {
// Уведомляем Telegram, что приложение готово
tgAny.ready();
logger.info("Telegram WebApp.ready() called");
tgAny.expand();
logger.info("WebApp expanded and header color set");
// Пытаемся получить пользователя с повторными попытками
let attempts = 0;
const maxAttempts = 10;
logger.info("Starting user authentication attempts...");
const tryGetUser = () => {
attempts++;
const user = tgAny.initDataUnsafe?.user;
logger.info(
`Attempt ${attempts}/${maxAttempts}: Checking for user data`
);
console.log(`Attempt ${attempts}: Telegram user data:`, user);
if (user) {
logger.success(
`User data found on attempt ${attempts}: ${
user.first_name || "No name"
}`
);
checkAuth(user);
return true;
}
if (attempts >= maxAttempts) {
logger.warn(
`Max attempts (${maxAttempts}) reached, generating random user`
);
console.warn("Max attempts reached, generating random user");
dispatch(setUser(generateRandomUser()));
setLoading(false);
return true;
}
logger.info(`Attempt ${attempts} failed, retrying...`);
return false;
};
// Первая попытка сразу
if (!tryGetUser()) {
logger.info("First attempt failed, setting up retry interval");
// Если не получилось, пытаемся каждые 200ms
const interval = setInterval(() => {
if (tryGetUser()) {
logger.success("User authentication successful via retry");
clearInterval(interval);
}
}, 200);
// Очистка интервала при размонтировании
return () => clearInterval(interval);
} else {
logger.success("User authentication successful on first attempt");
}
} catch (error) {
logger.error("Telegram WebApp initialization error", error);
console.error("Telegram WebApp initialization error:", error);
dispatch(setUser(generateRandomUser()));
setLoading(false);
}
} else {
// Открыто вне Telegram
logger.info(
"Not running in Telegram environment, generating random user"
);
console.log("Not in Telegram, generating random user");
setInTelegram(false);
dispatch(setUser(generateRandomUser()));
setLoading(false);
}
};
initializeTelegram();
}, [dispatch]);
return {
user,
isAuthenticated,
loading,
inTelegram,
};
};
