title: Remove gap between two objects
body: <p>I'm creating an app with React Native and I'm using React-Native-Elements(<a href="https://react-native-training.github.io/react-native-elements/API/searchbar/" rel="nofollow noreferrer">https://react-native-training.github.io/react-native-elements/API/searchbar/</a>)</p>
  
  <p>I added search bar to my application, but I have a gap between it and my header.
  it looks like this:
  <a href="https://i.stack.imgur.com/1RoKZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1RoKZ.png" alt="enter image description here"></a></p>
  
  <p>This is my code:</p>
  
  <pre><code>render(){
  return(
    &lt;View style={styles.container}&gt;
      &lt;SearchBar
      lightTheme
      clearIcon
      returnKeyType="go"
      placeholder='Type Here...'
      textInputRef="search"
      containerStyle={{backgroundColor: "#553A91", }}/&gt;
    &lt;/View&gt;
  );
  }
  </code></pre>
  
  <p>How can I remove the gap?</p>
  
  <p>EDIT:
  I tried to use marginTop, it works, but it still a little visible that they are overlap, How can I color the the gap instead?</p>
  
  <p>Thanks in advance!</p>