I'm using the latest RN version + expo development build.

I have noticed an issue on Android that only happens when I'm using the Stack.Screen headers.

Here's an example snippet -

<>
  
  {Platform.OS === "android" && (
    
      
        
                  </View>
        <View style={{ height: 100, backgroundColor: "red" }} />
      </ScrollView>
    </KeyboardAvoidingView>
  )}
</>
</code></pre>
<p>This results in the following -
<a href="https://i.sstatic.net/WijCyU2w.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WijCyU2w.png" alt="enter image description here" /></a></p>
<p><a href="https://i.sstatic.net/mLhwxvoD.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/mLhwxvoD.png" alt="enter image description here" /></a></p>
<p>How can I get the Red bar to fully show up above the keyboard always?</p>
<p>I tried so many things, like wrapping it inside SafeAreaView but to no avail.</p>
<p>What am I doing wrong?</p>

        </div>      </div>
      <div class="tags">
          
                  <span class="tag">react-native</span>
                <!--<span class="tag">Async</span>-->
        <!--<span class="tag">Promises</span>-->
      </div>
    </div>
    
    
    
<!-- Add Answer (only visible if logged in) -->
    <div id="addAnswerSection" class="add-answer" style="display: none;">
      <h4>Your Answer</h4>
      <form>
        <div class="mdl-textfield mdl-js-textfield">
          <textarea
            class="mdl-textfield__input"
            rows="4"
            id="answer"
          >
          Write your answer...