- Notifications
You must be signed in to change notification settings - Fork2
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.
License
jmstout/react-native-TouchableSetActive
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Touchable component forReact 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 theTouchableSetActive 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 thesetActive property onTouchableSetActive.
###setActive={this}The simplest implementation is achieved by just passingthis. The component will set anactive state (usingthis.setState) on the parent component. To toggle a style, set one conditionally in the style property that is dependent onthis.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 passingthis, 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 otherTouchable component in that it supports the following properties:
onPressInonPressOutonPressonLongPressIt 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 fordelayOnLongPress is dependent on some underlying changes to theTouchable library. Unfortunately, it won't be available until those changes are committed. If you really need it now, take a look atthe PR ormy branch which adds this functionality. It should also be noted that until this PR lands,delayOnPressIn can be set to a maximum of249 ms before throwing an error.
Additionally, the propsdelayActive anddelayInactive 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
About
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.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.