Merge pull request #242 from aayushrautela/android-nav-bar-fix

Fix nav bar being always visible on android
This commit is contained in:
Nayif 2025-11-26 23:27:44 +05:30 committed by GitHub
commit 083da01463
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 1 deletions

View file

@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState, useCallback } from 'react';
import { Platform, Animated, TouchableWithoutFeedback, View } from 'react-native';
import Video, { VideoRef, SelectedTrack, BufferingStrategyType, ResizeMode } from 'react-native-video';
import RNImmersiveMode from 'react-native-immersive-mode';
interface VideoPlayerProps {
src: string;
@ -40,6 +41,28 @@ export const AndroidVideoPlayer: React.FC<VideoPlayerProps> = ({
const [isSeeking, setIsSeeking] = useState(false);
const [lastSeekTime, setLastSeekTime] = useState<number>(0);
// Enable immersive mode when video player mounts, disable when it unmounts
useEffect(() => {
if (Platform.OS === 'android') {
try {
RNImmersiveMode.setBarMode('Bottom');
RNImmersiveMode.fullLayout(true);
} catch (error) {
console.log('Immersive mode error:', error);
}
return () => {
// Restore navigation bar when video player unmounts
try {
RNImmersiveMode.setBarMode('Normal');
RNImmersiveMode.fullLayout(false);
} catch (error) {
console.log('Immersive mode cleanup error:', error);
}
};
}
}, []);
// Only render on Android
if (Platform.OS !== 'android') {
return null;

View file

@ -3,7 +3,6 @@ import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, DarkTheme
import { createNativeStackNavigator, NativeStackNavigationOptions, NativeStackNavigationProp } from '@react-navigation/native-stack';
import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { useColorScheme, Platform, Animated, StatusBar, TouchableOpacity, View, Text, AppState, Easing, Dimensions } from 'react-native';
import RNImmersiveMode from 'react-native-immersive-mode';
import { mmkvStorage } from '../services/mmkvStorage';
import { PaperProvider, MD3DarkTheme, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper';
import type { MD3Theme } from 'react-native-paper';