[android] Padding in headers since the Expo Client's update

Expo Development Tools
1

Hello,

I’m new to Expo Client and I have a problem with my React Native app and I don’t know how to fix it:

Since the update of Expo Client, when I’m running my app on Expo I see that my headers have a padding at the top that wasn’t there before (I’m expected the icons to be vertically centered) :

Screenshot_20200401_153623
Screenshot_20200401_1536231080×384 19.2 KB

Even reducing the height of the header didn’t fix it, the only thing I can say is that this problem is fixed if I remove all headers customizations such as :

 static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: ({ style }) => {
                return (
                    <View>
                        <StatusBar barStyle="dark-content" backgroundColor="#6a51ae" />
                    </View>
                );
            },
            headerStyle: {
                textAlign: 'center',
                width: '100%',
                ...elevationShadowStyle(0, true)
            },
            headerTitleStyle: {
                color: 'black'
            }
        };
    };

and

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: ({ style }) => {
                return (
                    <View>
                        <StatusBar barStyle="dark-content" backgroundColor="#6a51ae" />
                    </View>
                );
            },
            headerStyle: {
                backgroundColor: '#f6f6f5',
                textAlign: 'center',
                width: '100%'
            },
            headerLeft: (
                <TouchableOpacity
                    onPress={() => {
                        navigation.navigate('Home');
                    }}
                    style={{ paddingLeft: 20, paddingRight: 10 }}
                >
                    <FontAwesome name={'home'} size={30} color={'#1E1E1E'} />
                </TouchableOpacity>
            )
        };
    };

How can I fix this problem and keep my headers parameters?

Thanks in advance for your answers,

Lola P

[EDIT] 02/04/2020 : I think I found what the problem is, for Android the whole screen is not overlapping the StatusBar anymore (so the Android StatusBar has the same color on every screen), and the padding going “behind” the Status Bar is now visible, because the whole screen moved under this status bar. I still don’t know how to fix it.

2

Having the same problem.

I’m getting around it for now by adding headerStyle:{ marginTop: Constants.statusBarHeight * -1, } to my StackNavigator’s NavigationOptions, but I’m a little worried that the next client update will break that.

Edit: Also, the issue only occurs on Android apparently, so I guess that should be
marginTop: Platform.OS === ‘ios’ ? 0 : Constants.statusBarHeight * -1,

1 Like
3

Thanks, it worked for me. Yes, we’ll probably have to change it at the next client update.

4

Also, keep in mind it may only be with the Expo client. When running standalone, it might not occur. We ran into an issue where our keyboardDidShow / hide code which was working fine across all Platforms broke with the new 2.15.0 client on both emulator and device, but still working from when built as an APK.

To work around this, we had to call in Constants.appOwnership into our conditional in addition to the Platform.OS check.

1 Like
5

I’m having the same problem with Android emulator. Expo team please look into this?

2 Likes
6

What i found for now is that something changed the way the window is handled in new expo client. so wherever you used Constants.statusBarHeight before to leave space for statusbar in your view is now giving you extra space since the statusBar is no longer part of your layout. There is param in “app.json”
for this => “translucent”: true wchich should controll how the statusbar part of screen is handled - but it’s doing nothing.
Cheers.

1 Like
7

I’m trying to pin down what’s going on here and having trouble. Wondering if it’s related to React Navigation. I’m on 4.x and I notice on my first screen the translucent status bar sticks around, but then is replaced by the non-translucent version when I push the next screen onto the stack. Anybody else notice something similar?

8

Yeah I noticed this too.

Also @michalkrakow Expo does seem to handle it differently, but then if you deploy the APK to an Android device without the client, it seems to be off by that much space again. Have you experienced this?

9

Sounds very similar to the problem I have. Did you get anywhere with it?