1

I am having this issue on Android where the App.Header component in React Native Paper shows a paddingTop in Android, in iOS looks great. I have attached 2 screenshots to show what I'm talking about...

Android: enter image description here

iOS: enter image description here

This is my code in the SettingsScreen.js file:

useLayoutEffect(() => {
    navigation.setOptions({
        headerMode: "screen",
        header: ({ navigation, scene }) => (
            <Appbar.Header style={appStyles.appBar}>
                <Appbar.Content titleStyle={appStyles.appBarTitle} title={t("dashboard.header")} />
                <Appbar.Action
                    icon={() => <AntDesign name="calendar" style={appStyles.appBarIcon} />}
                    onPress={() => {
                        datePicker.show();
                    }}
                />
            </Appbar.Header>
        )
        });
    }, [navigation]);
}

Any tips will be appreciated!

relez
  • 750
  • 2
  • 13
  • 28

1 Answers1

2

I've solved this issue by adding statusBarHeight={0} to Appbar.Header.

<Appbar.Header style={appStyles.appBar} statusBarHeight={0}>
chsdwn
  • 101
  • 6