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. 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