Modal creates issue

[divyanshkumarsharma]

When i am opening modal while bottom navigation and status are are hidden it again pops them up so I am not able to hide them when modal is open ???

any help

[wrathyz]

Thanks for reporting issue.

Can you please provide a small sample code to reproduce the issue?

[divyanshkumarsharma]

const AppWrapper = () => {
useEffect(() => {
LogBox.ignoreAllLogs();
console.warn = () => { };
console.error = () => { };
if (Platform.OS == 'android') {
Immersive.setImmersive(true)
} else {
StatusBar.setHidden(true);
}
}, []);

return (
    <NativeBaseProvider>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <SplashScreenModal />
                {/* <App /> */}
            </PersistGate>
        </Provider>
    </NativeBaseProvider>
);

};

this is the sample code where I am rendering modal after immersion but now getting desired result

[divyanshkumarsharma]

i am playing video on Modal screen at app launch but as soon as modal open Bottom navigation shown up.

Thanks for picking this issue

[wrathyz]

So, you're getting resolved?

[divyanshkumarsharma]

No, i need the solution. I am stuck

[wrathyz]

I'm not sure you're using this lib? because this lib does't have function setImmersive.

[divyanshkumarsharma]

import 'react-native-gesture-handler';
import React, { useEffect } from 'react';
import { AppRegistry, Dimensions, LogBox, Modal, Platform, StatusBar, Text, View } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { store, persistor } from './app/store/store';
import { SplashScreenModal } from './app/screens/splashScreen/SplashScreen';
import { NativeBaseProvider } from 'native-base'
import ImmersiveMode from 'react-native-immersive-mode';
const AppWrapper = () => {
useEffect(() => {
LogBox.ignoreAllLogs();
console.warn = () => { };
console.error = () => { };
if (Platform.OS == 'android') {
console.log("!23123")
ImmersiveMode.setBarMode("Full")
ImmersiveMode.addEventListener((val) => {
console.log(val, "val")
// ImmersiveMode.fullLayout(true)
// ImmersiveMode.setBarMode("Full")
})
// ImmersiveMode.fullLayout(true)
ImmersiveMode.setBarTranslucent(true)
} else {
StatusBar.setHidden(true);
}
}, []);

return (
    <NativeBaseProvider>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={true}
                    statusBarTranslucent={true}
                    hardwareAccelerated={true}
                    style={{
                        height:Dimensions.get("screen").height
                    }}
                
                    onRequestClose={() => {
                        // Alert.alert('Modal has been closed.');
                        // setModalVisible(!modalVisible);
                    }}>
                    <View style={{flex:1}}>
                        <View>
                            <Text>Hello World!</Text>
                           
                        </View>
                    </View>
                </Modal>
                {/* <SplashScreenModal /> */}
                {/* <App /> */}
            </PersistGate>
        </Provider>
    </NativeBaseProvider>
);

};

AppRegistry.registerComponent(appName, () => AppWrapper);

This is the exact same code I am using Sorry for the wrong code snippet. This is the code full code snippet that I am using

[wrathyz]

I think there is a similar issue here: facebook/react-native#37801 that about Modal of RN.

For my advice, you may use another screen to play the video and make that screen full screen instead of using Modal.