Skip to content

jmstout/react-native-TouchableSetActive

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

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.

Install

$ npm install react-native-touchable-set-active --save

Usage

First, 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>
    );
  }
}

Additional Props

TouchableSetActive is just like any other Touchable component in that it supports the following properties:

onPressIn
onPressOut
onPress
onLongPress

It 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,

License

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published