When using a basic DrawerNavigator, there is proper paddingTop that avoids overlaying content over the status bar; however, when adding a custom contentComponent, the padding is not there. Code: https://github.com/myplaceonline/testreactexpo/tree/drawermargin
Without custom contentComponent on Android:
With custom contentComponent on Android:
I can add some explicit margin, but what value should I choose? I'm already using SafeAreaView, but I believe that's only for iOS.
Here's the code. Comment the contentComponent: CustomDrawerContentComponent, line to see the working view.
import React from 'react';
import { SafeAreaView, ScrollView, Text, View } from 'react-native';
import { createAppContainer, createDrawerNavigator, createStackNavigator, DrawerItems } from 'react-navigation';
class TestScreen extends React.Component {
static navigationOptions = {
title: "Test",
};
render() {
return (
<View style={{flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Test</Text>
</View>
);
}
}
const CustomDrawerContentComponent = props => (
<SafeAreaView style={{flex: 1}} forceInset={{ top: "always", horizontal: "never" }}>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
);
export default AppDrawer = createAppContainer(
createDrawerNavigator(
{
DrawerTest: {
screen: createStackNavigator(
{
Test: TestScreen
},
),
navigationOptions: {
drawerLabel: "Test",
}
},
},
{
contentComponent: CustomDrawerContentComponent,
}
)
);
<div data-snack-id="@git/github.com/myplaceonline/testreactexpo@drawermargin" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
