Only button text area is clickable

Question

Clicking does not work for all parts of the button. Only the text area is clickable.

As a solution, I used contentStyle instead of style prop. But it changes only the color in the touching space of the button. I need to apply button click for the whole button and to change the color of the whole button when clicking on anywhere of the button.

Here is my code:

import * as React from "react";
import { Button } from "react-native-paper";
import styles from "./styles";

const Cbutton = ({ text, onPress }) => (
  <Button style={styles.wrapper} mode="contained" onPress={onPress}>
    {text}
  </Button>
);

export default Cbutton;

This is my code for the stylesheet.

import { StyleSheet } from 'react-native';

export default StyleSheet.create({

    wrapper: {
      flexDirection: 'row',
      justifyContent:'center',
      alignItems: 'center',
      width: ( "96%" ),
    },

});

Trevor · Answer 1 · 2021-02-14T18:13:26.147

4

I had this same problem, and thankfully the fix is super simple - just remove { alignItems: 'center' } from your Button's style prop

When applied, it shrinks the Button's content container, and it's unnecessary anyways thanks to the Button's internal styling.

For height, I recommend setting { height: '100%' } in the contentStyle prop. Not sure about customizing the onPress color, however. If you can't find a ready-made solution, I'd try rolling your own using react-native Pressable.

edited Feb 14 '21 at 18:13

answered Feb 14 '21 at 18:00

Trevor

423
1
4
10

adding { height: '100%' } in contentStyle, worked for me. Thanks! – heypran Mar 04 '21 at 07:00

score 2 · Answer 2 · answered Jun 08 '19 at 05:49

2

You must use TouchableHighlight to change on the active state.

As for as, the clickable area is concerned I think rn-paper button by default is proper. You must check the way you had exported the component.

answered Jun 08 '19 at 05:49

Naveen Vignesh

1,351
10
21

Cassio Seffrin · Answer 3 · 2019-08-26T11:21:58.343

The issue described by @os-hewawitharana just happen after you set the disabled to true and then set back to false.

Here is how to simulate the issue. In constructor the button is enabled, therefore you can tap all the button area, after disabling and reenabling his state you will only can tap in text area. There is nothing wrong with component and his export method.

constructor(props) {
    super(props);
    this.state = {
        desativado: false
    };

}


async componentDidMount() {
    setTimeout(() => {
        this.setState({ desativado: true });
    }, 2000);
    setTimeout(() => {
        this.setState({ desativado: false });
    }, 4000);
}

render(){
    return (
    <Button
         label={'Entrar'}
         color={'blue'}
         onPress={async () => {
             await this.setState({ desativado: true });
         }}
         disabled={this.state.desativado}
         mode="contained"
         ark={true} > <Text style={{ fontSize: 14 }}>Text</Text>
    </Button>
);

For while the solution is use a version 3 alpha

npm i react-native-paper@3.0.0-alpha.3

Soon they will release a v3 stable release as they answer in my issue report in github: https://github.com/callstack/react-native-paper/issues/1297

Only button text area is clickable

3 Answers3