Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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

Last synced: about 1 month ago
JSON representation

A button for React apps

Awesome Lists containing this project

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.