CODEWITHSUNDEEP
react-nativereact-native-paper
OS Hewawitharana
OS Hewawitharana

Reputation: 75

Only button text area is clickable

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%" ),
    },

});

Upvotes: 2

Views: 3205

Answers (3)

Trevor
Trevor

Reputation: 443

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.

Upvotes: 4

Cassio Seffrin
Cassio Seffrin

Reputation: 8600

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 [email protected]

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

Upvotes: 1

Naveen Vignesh
Naveen Vignesh

Reputation: 1357

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.

Upvotes: 2

Related Questions