Why has a empty background in my drawer?

Question

I use react-native-drawer, i set a image and a list for its content, i find that has a empty background between with image and list.

Even i remove the image that empty background is still there. I really can't figure it out. Any one can give me some suggestion ?

Here is my Drawer settings:

<Drawer
    type="displace"
    ref={(ref) => { this.drawer = ref; }}
    content={<ControlPanel navigation={this.props.navigation}/>}
    backgroundColor= '#33FFAA'
    openDrawerOffset={0.4}
    panOpenMask={0.90}
    tweenHandler={(ratio) => ({
      main: { opacity:(2-ratio)/2 }
    })}
    captureGestures="open"
    onClose={() => this.closeDrawer()} >

This is my ControlPanel.js

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';
import { List, ListItem } from 'react-native-elements';
class ControlPanel extends Component {
  state = {
    expanded: false
  };
  renderDescription() {
    if (this.state.expanded) {
      return (
        <Text>Hi</Text>
      );
    }
  }

  changeExpanded() {
    this.setState({ expanded: true });
  }
  render() {
    console.log('render!');
    const list = [
      {
        title: 'test1',
        icon: 'av-timer'
      },
      {
        title: 'test2',
        icon: 'flight-takeoff'
      },
      {
        title: 'test3',
        icon: 'av-timer'
      },
      {
        title: 'test4',
        icon: 'av-timer'
      },
      {
        title: 'test5',
        icon: 'av-timer'
      },
    ];
    return (
      <ScrollView>
        <Image
          style={{width: '100%', height: 180, flex: 1}} 
          source={{ uri: 'https://shoutem.github.io/static/getting-started/restaurant-1.jpg' }}
        />   
        <List>
          {
            list.map((item, i) => (
              <ListItem
                onPress={this.changeExpanded.bind(this)}
                key={i}
                title={item.title}
                leftIcon={{name: item.icon}}
              />
            ))
          }  
          {this.renderDescription()} 
        </List>                    
     </ScrollView>
    );
  }
}

export default ControlPanel;

Answer 1

As mentioned in their List index.d.ts, the default styling for the container is

@default '{marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9}'

Therefore you need to use it as

<List containerStyle={{marginTop: 0}}>