npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2022 – Pkg Stats / Ryan Hefner

apsl-react-native-button

v3.1.1

Published

React Native button component with rounded corners.

Downloads

3,747

Readme

apsl-react-native-button

A React Native button component customizable via style props.

Renders a TouchableOpacity under iOS and a TouchableNativeFeedback under Android.

Install

apsl-react-native-button>=2.6.0 needs React Native 0.28 or higher. apsl-react-native-button>=2.5.0 needs React Native 0.25 or higher. apsl-react-native-button<=2.4.2 needs React Native 0.16 or higher.

Install the package:

$ npm i apsl-react-native-button --save

Import the Button component:

import Button from 'apsl-react-native-button'

Usage

Provide TouchableWithoutFeedback' props to the component (including style), textStyle's StyleSheet to customize the inner text and a children node to render. You can also provide the isLoading prop that will dim the button and disable it to prevent accidental taps.

<Button style={{backgroundColor: 'red'}} textStyle={{fontSize: 18}}>
  Hello!
</Button>

You can also provide a <Button> element with nested children that are not strings or <Text> elements as long as they are valid React elements or numbers. This helps if your project is using another library that provides easy icon integration utilizing the <i> tag, for instance, as well as various other cases where you are creating visually complex buttons. You may omit the textStyle property and apply your own styles to your child elements as you see fit. Multiple children are allowed.

<Button style={{backgroundColor: 'blue'}}>
  <View style={styles.nestedViewStyle}>
    <Text style={styles.nestedTextStyle}>Nested views!</Text>
  </View>
</Button>

API

| Prop | Type | Description | |------|------|-------------| | onPress | func | Function to execute when the onPress event is triggered. | | onPressIn | func | Function to execute when the onPressIn event is triggered. | | onPressOut | func | Function to execute when the onPressOut event is triggered. | | onLongPress | func | Function to execute when the onLongPress event is triggered. | | textStyle | TextStylePropTypes | The StyleSheet to apply to the inner button text. | | disabledStyle | TextStylePropTypes | The StyleSheet to apply when disabled. | | children | string, number, React.Element,or array | The child nodes to render inside the button. If child is string or number, it will be rendered inside of a <Text> element with textStyle applied if present. Multiple children are allowed (array).| | isLoading | bool | Renders an inactive state dimmed button with a spinner if true. | | isDisabled | bool | Renders an inactive state dimmed button if true. | | activeOpacity | Number | The button onpressing transparency (Usually with a point value between 0 and 1). | | activityIndicatorColor | string | Sets the button of the ActivityIndicatorIOS or ProgressBarAndroid in the loading state. | | background | TouchableNativeFeedback.propTypes.background | Android only. The background prop of TouchableNativeFeedback. | Check the included example for more options.

Similar projects

James Ide's react-native-button https://github.com/ide/react-native-button/

License

MIT.