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.
$ npm install react-native-touchable-set-active --saveFirst, require the TouchableSetActive component in your project.
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.
class ExampleButton extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return(
<TouchableSetActive
setActive={this}
style={[
styles.inactiveButton,
this.state.active && styles.activeButton,
]}
>
<Text
style={this.state.active && styles.activeText}
>
Example Button
</Text>
</TouchableSetActive>
);
}
}###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.
class ExampleButton extends React.Component {
constructor(props) {
super(props);
this.state = {
active: false,
};
}
render() {
return(
<TouchableSetActive
setActive={(isActive) => {
this.setState({active: isActive});
}}
style={[
!this.state.active && styles.inactiveButton,
this.state.active && styles.activeButton,
]}
>
<Text
style={this.state.active && styles.activeText}
>
Example Button
</Text>
</TouchableSetActive>
);
}
}TouchableSetActive is just like any other Touchable component in that it supports the following properties:
onPressIn
onPressOut
onPress
onLongPressIt also supports touchable delay properties that are (hopefully) landing in React Native core soon (via #1255):
/**
* 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.
6132
Unfortunately, it won't be available until those changes are committed. If you really need it now, take a look at the PR or my branch 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.
/**
* 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,MIT © Jeff Stout