# react-native-button

> A button for React apps

Latest version **3.1.0** (published 2023-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-button
pnpm add react-native-button
yarn add react-native-button
bun add react-native-button
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2023-06-15 |
| First published | 2015-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-button) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 770 |
| Author | James Ide |
| Maintainers | ide, ccheever |
| Keywords | react-native, button, component |

## Links

- npm: https://www.npmjs.com/package/react-native-button
- Repository: https://github.com/ide/react-native-button
- Issues: https://github.com/ide/react-native-button/issues
- npm.io page: https://npm.io/package/react-native-button

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [deprecated-react-native-prop-types](https://npm.io/package/deprecated-react-native-prop-types.md) ^3.0.1

## Recent versions

- 3.1.0 (latest) — 2023-06-15
- 3.0.1 — 2020-03-24
- 3.0.0 — 2020-03-23
- 2.4.0 — 2019-05-03
- 2.3.0 — 2018-02-12
- 2.2.0 — 2017-12-19
- 2.1.0 — 2017-07-15
- 2.0.0 — 2017-06-06
- 1.8.2 — 2017-02-14
- 1.8.1 — 2017-02-14
- 1.8.0 — 2017-02-14
- 1.7.1 — 2016-09-27
- 1.7.0 — 2016-08-31
- 1.6.0 — 2016-05-13
- 1.5.0 — 2016-05-06
- … 10 more at https://npm.io/package/react-native-button/versions

## README

# react-native-button
A button for React apps

# Usage

Install the button from npm with `npm install react-native-button --save`. Then, require it from your app's JavaScript files with `import Button from 'react-native-button'`.

```js
import React, { Component } from 'react';
import Button from 'react-native-button';

export default class ExampleComponent extends Component {
  constructor(props, context) {
    super(props, context);
  }
  _handlePress() {
    console.log('Pressed!');
  }
  render() {
    return (
      <Button
        style={{fontSize: 20, color: 'green'}}
        styleDisabled={{color: 'red'}}
        onPress={() => this._handlePress()}>
        Press Me!
      </Button>
    );
  }
};

```

The React packager will include the Button component in your app's JS package and make it available for your app to use.

## Disabled prop usage

You can control a button's state by setting `disabled` prop value in this way:

```js
import React, { Component } from 'react';
import Button from 'react-native-button';

export default class ExampleComponent extends Component {
  constructor(props, context) {
    super(props, context);
      this.state = {
        isDisabled: false
      }
    }
  _handlePress() {
    this.setState({
      isDisabled: true
    });
    console.log('Now, button disabled');
  }
  render() {
    const { isDisabled } = this.state;
    return (
      <Button
        style={{ fontSize: 20, color: 'white' }}
        styleDisabled={{ color: 'white' }}
        disabled={isDisabled}
        containerStyle={{ padding: 10, height: 45, overflow: 'hidden', borderRadius: 4, backgroundColor: 'aqua' }}
        disabledContainerStyle={{ backgroundColor: 'pink' }}
        onPress={() => this._handlePress()}
      >
        Press Me!
      </Button>
    );
  }
};

```

## Props

<table>
  <tr>
    <th>Prop</th>
    <th>Required</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>accessibilityLabel</td>
    <td>No</td>
    <td>String</td>
    <td>VoiceOver will read this string when a user selects the associated element.</td>
  </tr>
  <tr>
    <td>allowFontScaling</td>
    <td>No</td>
    <td>Bool</td>
    <td>Specifies whether fonts should scale to respect Text Size accessibility settings. </td>
  </tr>
  
  <tr>
    <td>Disabled</td>
    <td>No</td>
    <td>Bool</td>
    <td>Disables the button</td>
  </tr>
  <tr>
    <td>Style</td>
    <td>No</td>
    <td>View Style Prop</td>
    <td>The style for the button</td>
  </tr>
  <tr>
    <td>styleDisabled</td>
    <td>No</td>
    <td>View Style Prop</td>
    <td>The style for the disabled button</td>
  </tr>
  <tr>
    <td>containerStyle</td>
    <td>No</td>
    <td>View Style Prop</td>
    <td>The style for the container</td>
  </tr>
  <tr>
    <td>disabledContainerStyle</td>
    <td>No</td>
    <td>View Style Prop</td>
    <td>The style for the container when the button is disabled</td>
  </tr>
  <tr>
    <td>childGroupStyle</td>
    <td>No</td>
    <td>View Style Prop</td>
    <td>The style for the child views</td>
  </tr>
  <tr>
    <td>androidBackground</td>
    <td>No</td>
    <td>Background Prop Type</td>
    <td>The background for andriod devices.</td>
  </tr>
  <tr>
    <td>onPress</td>
    <td>No</td>
    <td>Function</td>
    <td>Handler to be called when the user taps the button. </td>
  </tr>
</table>

## Container Style

You can make a button with rounded corners like this:

```js
  <Button
    containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: 'white'}}
    disabledContainerStyle={{backgroundColor: 'grey'}}
    style={{fontSize: 20, color: 'green'}}>
    Press me!
  </Button>
```

# Contributing

Contributions are welcome. Please verify that styling matches the latest version of iOS when you are changing the visual look of the buttons.

---
_Source: https://npm.io/package/react-native-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._