title: React Native Component Renders under other components inside a modal
body: <p>I have a modal that contains various children components. One of them being a calendar component  that is opened after pressing the text &quot;Select Date&quot;</p>
  <p>Upon opening the Calendar component renders underneath the other components on the page.</p>
  <p>I have tried using position: 'absolute' with a higher zIndex but I still cannot get the Calendar Component to render on top of everything else...how can I accomplish this?</p>
  <p><a href="https://i.stack.imgur.com/aNn5R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aNn5R.png" alt="Here is an image of what is occuring" /></a></p>
  <p><a href="https://i.stack.imgur.com/6eZFr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6eZFr.png" alt="This is wrapped in a View component with position: absolute and a high zindex" /></a></p>
  <p><a href="https://i.stack.imgur.com/Dz8Ku.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dz8Ku.png" alt="This is wrapped in a View component with position: absolute and a high zindex" /></a></p>
  <p>JSX For the components</p>
  <pre><code>&lt;View style={styles.container}&gt;
  
       &lt;View style={styles.routineitems}&gt;
              &lt;TouchableOpacity &gt;
                &lt;Text style={{ }}&gt;Due Date&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              
              &lt;TouchableOpacity onPress={()=&gt;calendarShouldShow(calendarVisible)}&gt;
                 &lt;Text style={{ }}&gt;Select Date&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
       &lt;/View&gt;
  
       &lt;Calendar style={{position: 'absolute',zIndex: 4}}/&gt;
  
       &lt;View style={styles.routineitems}&gt;
              &lt;Text&gt;Tags&lt;/Text&gt;
              &lt;DropDownPicker
                placeholder=&quot;Tags&quot;
              /&gt;
       &lt;/View&gt;
  
       &lt;View style={styles.routineitems}&gt;
               &lt;Text&gt;Notes&lt;/Text&gt;
                      
               &lt;TextInput
                  style={styles.input}
                  onChangeText ={ value =&gt; setNotes(value)}
                  value={notes}
                  laceholder=&quot;Notes&quot;
                  textAlign={'right'}
                /&gt;
        &lt;/View&gt;
  
  &lt;/View&gt;
  
  </code></pre>
  <p>STYLESHEET</p>
  <pre><code>const styles = StyleSheet.create({
  container: {
          flex: 1,
          alignItems: 'center',
          width: '100%'
      },
  routineitems: {
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          width: '90%',
          marginBottom: '1%',
          marginTop: '1%',
          alignItems: 'center',
          zIndex: 0
      },
  input: {
          height: 40,
          width: '30%',
          borderRadius: 20,
          backgroundColor: 'white',
          fontSize: 50,
          textAlignVertical:'bottom', 
          paddingTop: 0, 
          paddingBottom:0,
          textAlign: 'right'
      }
  });
  </code></pre>