title: React Native Area On Screen Not Clickable
body: <p>For some reason theres an imaginary block in the middle of the screen that wont allow me to click parts of TextInput's or TouchableOpacity/TouchableHighlights (i.e. buttons with icons, text, padding and colour), if that part is inside this imaginary box. It is the strangest bug. In trying to debug it, I've added a ScrollView and if I scroll these TouchableHighlights out of the way of this imaginary box, i can click them. If i scroll them back inside the box, they dont click. if theyre half in, half the button clicks. You get the idea.</p>
  <p>I've used the same CSS and component hierarchy for these buttons to other parts of the project and they work fine outside of this imaginary box. I am truly flabbergasted.</p>
  <p>Here is some sample code of my project.</p>
  <pre><code> &lt;&gt;
                  &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}&gt;
                  &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' , backgroundColor: '#cc0000'}}&gt;
                  
                      &lt;Image source={require('../../images/logo.png')} style={{}}/&gt;
                      &lt;Text style={{ color: 'white', fontSize:20, fontWeight: &quot;bold&quot;, paddingBottom:60}}&gt;iPhone Wallet&lt;/Text&gt;
                      &lt;TextInput
                      autoCapitalize=&quot;none&quot;
                      onChangeText = {text =&gt; this.setUserName(text)}
                      style={{height: 60, fontSize: 20, borderColor: '#c0cbd3', color: 'black', backgroundColor: 'white', borderRadius: 5, width: 300, margin: 10, padding: 10}}
                      placeholder = &quot;Student Email&quot;
                      placeholderTextColor=&quot;#000&quot;
                      /&gt;
                      &lt;TextInput
                      autoCapitalize=&quot;none&quot;
                      onChangeText = {text =&gt; this.setPassword(text)}
                      style={{height: 60, fontSize: 20, borderColor: '#c0cbd3', color: 'black', backgroundColor: 'white', borderRadius: 5, width: 300, margin: 10, padding: 10}}
                      placeholder = &quot;Password&quot;
                      placeholderTextColor=&quot;#000&quot;
                      secureTextEntry={true}
                      /&gt;
                      &lt;TouchableHighlight 
                      onPress = {() =&gt; this.loginUser()}
                      style={{height: 60, borderRadius: 5, width: 300, margin: 10, padding:10, backgroundColor: '#1985ff', alignItems: 'center', justifyContent: 'center', underlayColor:'blue'}} &gt;
                      &lt;View style={{alignItems: 'center', justifyContent: 'center',width: '100%',flexDirection:'row', flexWrap:'wrap'}}&gt;
                              &lt;Ionicons name={'log-in-outline'} size={23} color={'white'}  /&gt;
                              &lt;Text style={{color: 'white',fontSize: 20, marginLeft:10}}&gt;Login&lt;/Text&gt;           
                          &lt;/View&gt;
                      &lt;/TouchableHighlight&gt;
                      
                      &lt;TouchableHighlight 
                          onPress = {() =&gt; this.resetPasswordAlert()}
                          style={{ marginTop:'5%', padding:10, alignItems: 'center', justifyContent: 'center'}} &gt;
                          &lt;Text style={{color: 'white',fontSize: 17}}&gt;Forgot Password?&lt;/Text&gt;
                      &lt;/TouchableHighlight&gt;
      
                      &lt;TouchableHighlight 
                          onPress = {() =&gt; this.props.navigation.navigate('Signup')}
                          style={{ marginTop:'5%', padding:10, alignItems: 'center', justifyContent: 'center'}} &gt;
                          &lt;Text style={{color: 'white',fontSize: 17}}&gt;Create Account&lt;/Text&gt;
                      &lt;/TouchableHighlight&gt;
  
                  &lt;/View&gt;
                  &lt;/TouchableWithoutFeedback&gt;
              
              &lt;View style={{ position: 'absolute', marginTop:'85%',marginLeft:'35%'}}&gt;
                  &lt;ActivityIndicator animating = {this.state.loadingIndicator} color=&quot;#000000&quot; size=&quot;large&quot; /&gt;
              &lt;/View&gt;
  
  &lt;/&gt;
  </code></pre>
  <p>I've been testing on both iPhone 12 emulator and on an actual iPhone XR, both with the same effect. Here is an image of the above code, with the imaginary box i have added. A good chunk of the login button is not clickable (in pink tint).</p>
  <p><a href="https://i.stack.imgur.com/xIzYu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xIzYu.png" alt="enter image description here" /></a></p>
  <p>This imaginary box is happening across multiple different screens which are using both the stack navigator or tab navigator to navigate between screens/components. It is hard to tell if the imaginary box is the same size for all components. Any help is greatly appreciated! Thanks.</p>