https://github.com/ide/react-native-button

A button for React apps
https://github.com/ide/react-native-button

Last synced: 1 day ago
JSON representation

A button for React apps

• Host: GitHub
• URL: https://github.com/ide/react-native-button
• Owner: ide
• License: mit
• Created: 2015-03-26T20:05:38.000Z (almost 10 years ago)
• Default Branch: main
• Last Pushed: 2023-06-15T00:57:36.000Z (over 1 year ago)
• Last Synced: 2025-01-17T11:07:25.169Z (9 days ago)
• Language: JavaScript
• Size: 38.1 KB
• Stars: 773
• Watchers: 23
• Forks: 130
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-button ★707
• awesome-reactnative-ui - react-native-button
• awesome-react-native - react-native-button ★707
• awesome-reactnative-ui - react-native-button
• awesome-react-native - react-native-button - A button for React apps.  (Components / Button)
• awesome-react-native - react-native-button - native没有提供button (组件 / 图形动画)
• my-awesome - react-native-button - A button for React apps (JavaScript)
• awesome-react-native - react-native-button ★707
• awesome-react-native-ui - react-native-button ★521
• awesome-react-native - react-native-button ★707
• ReactNativeMaterials - react-native-button

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 (

       this._handlePress()}>

        Press Me!

      

    );

  }

};

```

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 (

       this._handlePress()}

      >

        Press Me!

      

    );

  }

};

```

## Props

  

    Prop

    Required

    Type

    Description

  

  

    accessibilityLabel

    No

    String

    VoiceOver will read this string when a user selects the associated element.

  

  

    allowFontScaling

    No

    Bool

    Specifies whether fonts should scale to respect Text Size accessibility settings. 

  

  

  

    Disabled

    No

    Bool

    Disables the button

  

  

    Style

    No

    View Style Prop

    The style for the button

  

  

    styleDisabled

    No

    View Style Prop

    The style for the disabled button

  

  

    containerStyle

    No

    View Style Prop

    The style for the container

  

  

    disabledContainerStyle

    No

    View Style Prop

    The style for the container when the button is disabled

  

  

    childGroupStyle

    No

    View Style Prop

    The style for the child views

  

  

    androidBackground

    No

    Background Prop Type

    The background for andriod devices.

  

  

    onPress

    No

    Function

    Handler to be called when the user taps the button. 

  

## Container Style

You can make a button with rounded corners like this:

```js

  

    Press me!

  

```

# Contributing

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