https://github.com/jmstout/react-native-TouchableSetActive
Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of.
https://github.com/jmstout/react-native-TouchableSetActive
Last synced: 3 months ago
JSON representation
Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of.
- Host: GitHub
- URL: https://github.com/jmstout/react-native-TouchableSetActive
- Owner: jmstout
- License: mit
- Created: 2015-05-14T03:01:25.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-05-23T03:49:34.000Z (over 10 years ago)
- Last Synced: 2024-11-24T08:05:03.983Z (11 months ago)
- Language: JavaScript
- Size: 148 KB
- Stars: 31
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-touchable-set-active ★30 - Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of. (Components / UI)
- awesome-reactnative-ui - react-native-TouchableSetActive
- awesome-react-native - react-native-touchable-set-active ★30 - Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of. (Components / UI)
- awesome-react-native - react-native-touchable-set-active ★30 - Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of. (Components / UI)
- awesome-reactnative-ui - react-native-TouchableSetActive
- awesome-react-native - react-native-touchable-set-active ★30 - Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of. (Components / UI)
- awesome-react-native-ui - react-native-touchable-set-active ★28 - Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of. (Components / UI)
README
# react-native-TouchableSetActive
Touchable component for [React Native](https://github.com/facebook/react-native) that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of.
## Install
```sh
$ npm install react-native-touchable-set-active --save
```
## Usage
First, require the `TouchableSetActive` component in your project.
```javascript
var TouchableSetActive = require('react-native-touchable-set-active');
```
There are two different ways you can use this component. They both involve passing a value to the `setActive` property on `TouchableSetActive`.
###setActive={this}
The simplest implementation is achieved by just passing `this`. The component will set an `active` state (using `this.setState`) on the parent component. To toggle a style, set one conditionally in the style property that is dependent on `this.state.active`.
```javascript
class ExampleButton extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return(
Example Button
);
}
}
```
###setActive={*function*}
Instead of passing `this`, you can provide a function. It will be called whenever the component's active state changes, with a boolean value representing the active state as the only argument.
```javascript
class ExampleButton extends React.Component {
constructor(props) {
super(props);
this.state = {
active: false,
};
}
render() {
return(
{
this.setState({active: isActive});
}}
style={[
!this.state.active && styles.inactiveButton,
this.state.active && styles.activeButton,
]}
>
Example Button
);
}
}
```
## Additional Props
`TouchableSetActive` is just like any other [Touchable component](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html) in that it supports the following properties:
```javascript
onPressIn
onPressOut
onPress
onLongPress
```
It also supports touchable delay properties that are (*hopefully*) landing in React Native core soon (via [\#1255](https://github.com/facebook/react-native/pull/1255)):
```javascript
/**
* Delay in ms, from the release of the touch, before onPress is called.
*/
delayOnPress: React.PropTypes.number,
/**
* Delay in ms, from the start of the touch, before onPressIn is called.
*/
delayOnPressIn: React.PropTypes.number,
/**
* Delay in ms, from the release of the touch, before onPressOut is called.
*/
delayOnPressOut: React.PropTypes.number,
/**
* Delay in ms, from onPressIn, before onLongPress is called.
*/
delayOnLongPress: React.PropTypes.number,
```
*Support for `delayOnLongPress` is dependent on some underlying changes to the `Touchable` library. Unfortunately, it won't be available until those changes are committed. If you really need it now, take a look at [the PR](https://github.com/facebook/react-native/pull/1255) or [my branch](https://github.com/jmstout/react-native/tree/touchable-custom-delays) which adds this functionality. It should also be noted that until this PR lands, `delayOnPressIn` can be set to a maximum of `249` ms before throwing an error.*
Additionally, the props `delayActive` and `delayInactive` can be used to decouple the active state from the press events.
```javascript
/**
* Delay in ms, from the start of the touch, before the active state is shown.
*/
delayActive: React.PropTypes.number,
/**
* Delay in ms, from the start of the active state, before it becomes inactive.
*/
delayInactive: React.PropTypes.number,
```
## License
MIT © [Jeff Stout](http://jmstout.com)