title: How to layer components properly on React Native
body: <p>I am trying to build an app with react native and am having some trouble in building the initial screen because I do not properly understand how to layer components on to the screen and make it all appear.</p>
  
  <p>I have tried to change the code in certain portions and it either creates an error or just a portion of the screen shows up.</p>
  
  <p>This is what the Screen should look like</p>
  
  <p><a href="https://i.stack.imgur.com/5FxLf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5FxLf.png" alt="enter image description here"></a></p>
  
  <p>and here is what it looks like</p>
  
  <p><a href="https://i.stack.imgur.com/51dBz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/51dBz.png" alt="enter image description here"></a> </p>
  
  <p>This is the code in the Screen JS file</p>
  
  <pre><code>class SearchScreen extends Component&lt;Props&gt;{
     render(){
         return (
             &lt;LoadingImage&gt;
                 &lt;PopDownPanel/&gt;
             &lt;/LoadingImage&gt;
         );    
     }
  </code></pre>
  
  <p>}</p>
  
  <p>This is the code for the panel with search button</p>
  
  <pre><code>class PopDownPanel extends Component&lt;Props&gt;{
  constructor(props){
      super(props);
      this.state = {taxonA: '', taxonB: ''}
  }
  
  handleTaxonA = (text) =&gt; {
      this.setState({taxonA : text})
  }
  handleTaxonB = (text) =&gt; {
      this.setState({taxonB : text})
  }
  _onPress = () =&gt; {
      alert("Taxon A: "+ this.state.taxonA + "\n" + "Taxon B: " + this.state.taxonB);
  }
  render(){
      return(
          &lt;Animatable.View
              animation = 'fadeOutRight'
              delay = {5000}
          &gt;
              &lt;View style = {styles.panel}/&gt;
                  &lt;View style = {styles.boxA}&gt;
                      &lt;TextInput
                          fontSize = {15}
                          placeholder = 'Taxon A...'
                          onChangeText = {this.handleTaxonA}
                          style = {styles.words}
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style = {styles.boxB}&gt;
                      &lt;TextInput
                          placeholder = 'Taxon B...'
                          onChangeText = {this.handleTaxonB}
                          style = {styles.words}
                      /&gt;
                  &lt;/View&gt;
                  &lt;TouchableOpacity
                      style = {styles.searchButton}
                      onPress = {this._onPress}
                  &gt;
                      &lt;Text style = {styles.words}&gt;Search&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
          &lt;/Animatable.View&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>This is the code for the background image </p>
  
  <pre><code>class LoadingImage extends Component&lt;Props&gt;{
  constructor(props){
      super(props);
      this.state = {ready: false};
  }
  
  render(){
      return (
          &lt;ImageBackground
              source = {require('../assets/images/TimeTreeSearch.png')}
              style = {{width: '100%', height: '100%'}}
              imageStyle = {{resizeMode: 'contain'}}
          &gt;
              &lt;Animatable.Image
                  source = {require('../assets/images/TimeTree_Gray.png')}
                  animation = 'fadeOut'
                  iterationCount = {1}
                  useNativeDriver = {true}
                  style = {{height: '100%', width: '100%'}}
                  resizeMode = 'contain'
                  easing = 'ease-in-out'
              /&gt;
          &lt;/ImageBackground&gt;
      );
  }
  </code></pre>
  
  <p>}</p>