Not able to fill the whole height of DrawerContentScrollView

Question

I am developing the nagivation drawer:

<Drawer.Navigator
    initialRouteName={InitialScreen}
    drawerContent={props => <MyDrawer {...props} />}
    screenOptions={{
        headerShown: true,
    }}>
    <Drawer.Screen name="main" component={MainScreen} />
</Drawer.Navigator>

As you can see above, I am customizing the content of the drawer by implementing my own MyDrawer component.

In the rendering part of MyDrawer, I have:

return (
    <View style={styles.myContent}>
      <DrawerContentScrollView
        style={{flex: 1, top: 0, bottom: 0, backgroundColor: 'yellow'}}
        {...props}>
        <View
          style={{
            backgroundColor: 'green',
            flex: 1,
            width: '100%',
            height: '100%',
          }}>
          <View>
            <DrawerItem name="Purhcase" text="Purchase" />
            <DrawerItem name="Sell" text="Sell" />
          </View>
          ...
        </View>
      </DrawerContentScrollView>
    </View>
  );

const styles = StyleSheet.create({
  myContent: {
    flex: 1,
    paddingLeft: 0,
    paddingTop: 10,
  }
});

I would like to have that green color View component which wrapped directly by DrawerContentScrollView filling the whole height of the DrawerContentScrollView. The above code shows what I tried, but no matter what I do, that green color View component always only occupy the height according to what content that it wraps. How to make it fill the whole height then?

score 9 · Accepted Answer · answered Jul 27 '20 at 17:07

9

Change the style prop on your DrawerContentScrollView to contentContainerStyle.

answered Jul 27 '20 at 17:07

Doug Watkins

1,387
12
19

Would using that cause drawer items invisible on small screen phones? I mean if it is not scrollable. – Leem.fin Jul 27 '20 at 17:08
I don't know why it would. – Doug Watkins Jul 27 '20 at 17:09
Aha, sorry, I read wrongly, you meant the style prop, could you please provide a code sample for that style? I haven't used that before. – Leem.fin Jul 27 '20 at 17:10
– Doug Watkins Jul 27 '20 at 17:10
Cool! Works. I will accept your answer in 4min. Thank you! – Leem.fin Jul 27 '20 at 17:12
No problem. I've fought this particular battle more than once. – Doug Watkins Jul 27 '20 at 17:13

Not able to fill the whole height of DrawerContentScrollView

1 Answers1