CODEWITHSUNDEEP
react-nativereact-navigation
Rachid Debu
Rachid Debu

Reputation: 1

TabNavigator - Hide status bar

I'm using react-native and react-navigation.

I want to hide the status bar. But it's either remains visible, or it is not working the way I try to hide it.

First attempt leads to a complete white screen. As if the navigator isn't even loaded. Same thing for second attempt. Last attempt is working, i have what i want but status bar is displayed. I want it hidden.

Example i found on the web were working with the same syntax as my second attempt. I don't understand why mine isn't working.. 

import React from 'react';
import { StyleSheet, StatusBar, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import PageLecture from './js/PageLecture';
import PageSalat from './js/PageSalat';
import PageHadiths from './js/PageHadiths';
import PageParametres from './js/PageParametres';

export default class App extends React.Component {
    render() {
        // This is not working
        // return (
        //     <View>
        //         <View>
        //             <StatusBar hidden={true}/>
        //         </View>
        //
        //         <ReactCoran />
        //     </View>
        // );

        // This is not working
        // return (
        //     <View>
        //         <StatusBar hidden={true}/>
        //         <ReactCoran />
        //     </View>
        // );

        // This is working but status bar is displayed
        return (
            <ReactCoran />
        );
    }
}


const ReactCoran = TabNavigator({
    Lecture: {
        screen: PageLecture,
    },
    Salat: {
        screen: PageSalat,
    },
    Hadith: {
        screen: PageHadiths,
    },
    Parametres: {
        screen: PageParametres,
    }
},
{
    tabBarPosition: 'bottom',
    animationEnabled: false,
    tabBarOptions: {
        allowFontScaling: true,
        activeTintColor: '#000000',
        showIcon: true,
        showLabel: false,
        activeBackgroundColor: '#ff0000',
        style: {
            backgroundColor: '#aa0000',
        },
        indicatorStyle: {
            height:2,
            backgroundColor: '#ffffff',
        }
    },
});

Thanks

Upvotes: 0

Views: 5304

Answers (3)

Jagroop
Jagroop

Reputation: 2084

There are below three methods to remove :

  1. First Method

    <Stack.Navigator
initialRouteName="HomeActivity"
screenOptions={{headerShown: false}}
>
<Stack.Screen>
.......
</Stack.Screen>
</Stack.Navigator>

  2. Method

    React.useLayoutEffect(() => {
navigation.setOptions({headerShown: false});
 }, [navigation]);

  3. Method you are using in your code

If it doesn't work please provide some more details , because if you don't want to use Status bar then there is no use to you can simple choose 1st method.

Upvotes: 1

Val
Val

Reputation: 22807

I don't know how ReactCoran is implemented, but this usually works:

Add style={{flex: 1}} to parent view

import { StatusBar } from 'react-native'

<View style={{flex: 1}}>
    <StatusBar hidden={true}/>
    <ReactCoran />
</View>

Let me know if this helps. If not show us code of ReactCoran.

Upvotes: 3

jarmlaht
jarmlaht

Reputation: 47

In react-navigation the status bar can be hidden by adding:

static navigationOptions = {
    header: null
}

to the component. More info here: https://reactnavigation.org/docs/stack-navigator.html#navigationoptions-used-by-stacknavigator

Upvotes: -1

Related Questions