{"id":4253,"url":"https://github.com/jmstout/react-native-TouchableSetActive","last_synced_at":"2025-08-04T00:32:43.142Z","repository":{"id":32016463,"uuid":"35587606","full_name":"jmstout/react-native-TouchableSetActive","owner":"jmstout","description":"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.","archived":false,"fork":false,"pushed_at":"2015-05-23T03:49:34.000Z","size":152,"stargazers_count":31,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-24T08:05:03.983Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jmstout.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-14T03:01:25.000Z","updated_at":"2023-03-09T02:23:07.000Z","dependencies_parsed_at":"2022-09-08T18:40:20.279Z","dependency_job_id":null,"html_url":"https://github.com/jmstout/react-native-TouchableSetActive","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmstout%2Freact-native-TouchableSetActive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmstout%2Freact-native-TouchableSetActive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmstout%2Freact-native-TouchableSetActive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmstout%2Freact-native-TouchableSetActive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmstout","download_url":"https://codeload.github.com/jmstout/react-native-TouchableSetActive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228188093,"owners_count":17882429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:05.893Z","updated_at":"2024-12-07T07:31:34.281Z","avatar_url":"https://github.com/jmstout.png","language":"JavaScript","readme":"# react-native-TouchableSetActive\nTouchable 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.\n\n## Install\n```sh\n$ npm install react-native-touchable-set-active --save\n```\n\n## Usage\nFirst, require the `TouchableSetActive` component in your project.\n```javascript\nvar TouchableSetActive = require('react-native-touchable-set-active');\n```\n\nThere are two different ways you can use this component. They both involve passing a value to the `setActive` property on `TouchableSetActive`.\n\n###setActive={this}\nThe 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`.\n\n```javascript\nclass ExampleButton extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n  render() {\n    return(\n      \u003cTouchableSetActive\n        setActive={this}\n        style={[\n          styles.inactiveButton,\n          this.state.active \u0026\u0026 styles.activeButton,\n        ]}\n      \u003e\n        \u003cText\n          style={this.state.active \u0026\u0026 styles.activeText}\n        \u003e\n          Example Button\n        \u003c/Text\u003e\n      \u003c/TouchableSetActive\u003e\n    );\n  }\n}\n```\n\n###setActive={*function*}\nInstead 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.\n```javascript\nclass ExampleButton extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      active: false,\n    };\n  }\n  render() {\n    return(\n      \u003cTouchableSetActive\n        setActive={(isActive) =\u003e {\n          this.setState({active: isActive});\n        }}\n        style={[\n          !this.state.active \u0026\u0026 styles.inactiveButton,\n          this.state.active \u0026\u0026 styles.activeButton,\n        ]}\n      \u003e\n        \u003cText\n          style={this.state.active \u0026\u0026 styles.activeText}\n        \u003e\n          Example Button\n        \u003c/Text\u003e\n      \u003c/TouchableSetActive\u003e\n    );\n  }\n}\n```\n\n## Additional Props\n`TouchableSetActive` is just like any other [Touchable component](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html) in that it supports the following properties:\n```javascript\nonPressIn\nonPressOut\nonPress\nonLongPress\n```\n\nIt also supports touchable delay properties that are (*hopefully*) landing in React Native core soon (via [\\#1255](https://github.com/facebook/react-native/pull/1255)):\n```javascript\n/**\n * Delay in ms, from the release of the touch, before onPress is called.\n */\ndelayOnPress: React.PropTypes.number,\n/**\n * Delay in ms, from the start of the touch, before onPressIn is called.\n */\ndelayOnPressIn: React.PropTypes.number,\n/**\n * Delay in ms, from the release of the touch, before onPressOut is called.\n */\ndelayOnPressOut: React.PropTypes.number,\n/**\n * Delay in ms, from onPressIn, before onLongPress is called.\n */\ndelayOnLongPress: React.PropTypes.number,\n```\n*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.*\n\nAdditionally, the props `delayActive` and `delayInactive` can be used to decouple the active state from the press events.\n```javascript\n/**\n * Delay in ms, from the start of the touch, before the active state is shown.\n */\ndelayActive: React.PropTypes.number,\n/**\n * Delay in ms, from the start of the active state, before it becomes inactive.\n */\ndelayInactive: React.PropTypes.number,\n```\n\n## License\nMIT © [Jeff Stout](http://jmstout.com)","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmstout%2Freact-native-TouchableSetActive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmstout%2Freact-native-TouchableSetActive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmstout%2Freact-native-TouchableSetActive/lists"}