React Native Area On Screen Not Clickable

Question

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.

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.

Here is some sample code of my project.

 <>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' , backgroundColor: '#cc0000'}}>
                
                    <Image source={require('../../images/logo.png')} style={{}}/>
                    <Text style={{ color: 'white', fontSize:20, fontWeight: "bold", paddingBottom:60}}>iPhone Wallet</Text>
                    <TextInput
                    autoCapitalize="none"
                    onChangeText = {text => this.setUserName(text)}
                    style={{height: 60, fontSize: 20, borderColor: '#c0cbd3', color: 'black', backgroundColor: 'white', borderRadius: 5, width: 300, margin: 10, padding: 10}}
                    placeholder = "Student Email"
                    placeholderTextColor="#000"
                    />
                    <TextInput
                    autoCapitalize="none"
                    onChangeText = {text => this.setPassword(text)}
                    style={{height: 60, fontSize: 20, borderColor: '#c0cbd3', color: 'black', backgroundColor: 'white', borderRadius: 5, width: 300, margin: 10, padding: 10}}
                    placeholder = "Password"
                    placeholderTextColor="#000"
                    secureTextEntry={true}
                    />
                    <TouchableHighlight 
                    onPress = {() => this.loginUser()}
                    style={{height: 60, borderRadius: 5, width: 300, margin: 10, padding:10, backgroundColor: '#1985ff', alignItems: 'center', justifyContent: 'center', underlayColor:'blue'}} >
                    <View style={{alignItems: 'center', justifyContent: 'center',width: '100%',flexDirection:'row', flexWrap:'wrap'}}>
                            <Ionicons name={'log-in-outline'} size={23} color={'white'}  />
                            <Text style={{color: 'white',fontSize: 20, marginLeft:10}}>Login</Text>           
                        </View>
                    </TouchableHighlight>
                    
                    <TouchableHighlight 
                        onPress = {() => this.resetPasswordAlert()}
                        style={{ marginTop:'5%', padding:10, alignItems: 'center', justifyContent: 'center'}} >
                        <Text style={{color: 'white',fontSize: 17}}>Forgot Password?</Text>
                    </TouchableHighlight>
    
                    <TouchableHighlight 
                        onPress = {() => this.props.navigation.navigate('Signup')}
                        style={{ marginTop:'5%', padding:10, alignItems: 'center', justifyContent: 'center'}} >
                        <Text style={{color: 'white',fontSize: 17}}>Create Account</Text>
                    </TouchableHighlight>

                </View>
                </TouchableWithoutFeedback>
            
            <View style={{ position: 'absolute', marginTop:'85%',marginLeft:'35%'}}>
                <ActivityIndicator animating = {this.state.loadingIndicator} color="#000000" size="large" />
            </View>

</>

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).

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.