Cannot click button at bottom of page

[thegolddustrush]

Description

I cannot click a button or touchable opacity at the bottom of the page. We have to either move it to the top of the page or higher up.

Here's an example

import React, { useRef, createRef,useEffect } from "react";

import {ScrollView,Text,View,Image,Dimensions,StyleSheet,Animated, TouchableOpacity, BackHandler,Button} from 'react-native';

export default class TestButtonScreen extends React.Component{

    constructor(props){
        super(props);
    }

    render(){

        const TestButton=(event,id)=>{
                console.log("testbutton");

            }
            let deviceWidth = Dimensions.get('window').width;
            let deviceHeight = Dimensions.get('window').height;

        return (

                        <View>

                            <View style={{height:'90%' }}>
                            <Text> top of view</Text>
                            </View>
                            <View style={{height: '10%' , paddingTop:10, marginTop: 0}}>

                           <Button
                                                          onPress={(event) => TestButton(event)} title="test button">
                                                    </Button>
                            </View>
                        </View>
            );
    }
}

Version

0.68.2

Output of npx react-native info

info Fetching system and libraries information... System: OS: macOS 12.5.1 CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz Memory: 83.02 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 16.15.0 - /usr/local/bin/node Yarn: Not Found npm: 8.5.5 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8512546 Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Users/testuser/.jenv/shims/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.2 => 0.68.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

use the code example in the description I provided in the example. I tried in an android emulator and it doesn't work. when you click the button at the bottom of the page it doesn't work unless you click the far left or right edge.

Snack, code example, screenshot, or link to a repository

Code example is in description.

[ahmetbilgay]

Use Flex

   <View>
           <View style={styles.header}>
                       <Text> top of view</Text>
            </View>
             <View style={styles.footer}>
                        <Button onPress={(event) => TestButton(event)} title="test button"></Button>
              </View>
    </View>

  const styles = StyleSheet.create({
     header:{
       flex:0.9
     },
     footer:{
       flex:0.1
     }
  })

[thegolddustrush]

Thanks a lot for the help but I have tried many different permutations of making buttons and more and more it seems we have an android bug on our hands. With every version of my button it appears the button is only clickable on the far left or right edge but not in the middle. My original code in the description works in the expo snack containers but I have yet to try on ios. I have upgraded my project up to .69.6 and the problem still exists.

I tried your code with the flex : 1 on the containing view.

function SandboxComponent({ component }) {




        return (
 <View style={{flex : 1}}>

           <View style={styles.header}>
                       <Text> top of view</Text>
            </View>
             <View style={styles.footer}>
                        <Button onPress={(event) => {console.log('hello')}} title="test button"></Button>
              </View>
    </View>


        );

}




export default SandboxComponent
  const styles = StyleSheet.create({
     header:{
       flex:.9
       , borderWidth:1
       , borderColor : 'red'
     },
     footer:{
       flex:.1
              , borderWidth:1
              , borderColor : 'green'
     }
  })

[ahmetbilgay]

Try giving Buttons with and height values

[thegolddustrush]

Yes I tried that too and had no success. Thanks for the suggestion.

function SandboxComponent({ component }) {

        return (
 <View style={{flex : 1}}>

           <View style={styles.header}>
                       <Text> top of view</Text>
            </View>
             <View style={styles.footer}>
                        <Button style={{width:'100%',height:'100%'}}onPress={(event) => {console.log('hello')}} title="test button"></Button>
              </View>
    </View>


        );

}

export default SandboxComponent

  const styles = StyleSheet.create({
     header:{
       flex:.9
       , borderWidth:1
       , borderColor : 'red'
     },
     footer:{
       flex:.1
              , borderWidth:1
              , borderColor : 'green'
              , width: 500
              , height : 100
     }
  })

[ahmetbilgay]

button:{ width:500, height:100 }

and <Button styles={styles.button} title={"Title"} />

[thegolddustrush]

Thanks for all your help. We actually figured it out. It appears our network provider utility was interfering with the rendered components.

This library : import { useNetInfo } from '@react-native-community/netinfo';

We had some <View></View> appear when the network connection was not live. Although our connection to the network was up, it still was getting in the way of the buttons it appears.