{"id":33244880,"url":"https://github.com/rnc-archive/react-native-platform-touchable","last_synced_at":"2025-11-21T14:03:32.521Z","repository":{"id":94347717,"uuid":"95985682","full_name":"rnc-archive/react-native-platform-touchable","owner":"rnc-archive","description":"A wrapper around the various Touchable* components built into React Native core with platform defaults","archived":true,"fork":false,"pushed_at":"2020-05-14T22:04:58.000Z","size":98,"stargazers_count":440,"open_issues_count":8,"forks_count":30,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-07-30T02:42:12.375Z","etag":null,"topics":["button","component","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rnc-archive.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-07-01T20:16:47.000Z","updated_at":"2024-07-15T19:09:02.000Z","dependencies_parsed_at":"2023-04-13T19:38:48.147Z","dependency_job_id":null,"html_url":"https://github.com/rnc-archive/react-native-platform-touchable","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rnc-archive/react-native-platform-touchable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnc-archive%2Freact-native-platform-touchable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnc-archive%2Freact-native-platform-touchable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnc-archive%2Freact-native-platform-touchable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnc-archive%2Freact-native-platform-touchable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rnc-archive","download_url":"https://codeload.github.com/rnc-archive/react-native-platform-touchable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnc-archive%2Freact-native-platform-touchable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285628306,"owners_count":27204436,"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","status":"online","status_checked_at":"2025-11-21T02:00:06.175Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["button","component","react-native"],"created_at":"2025-11-16T21:00:30.883Z","updated_at":"2025-11-21T14:03:32.515Z","avatar_url":"https://github.com/rnc-archive.png","language":"JavaScript","funding_links":[],"categories":["React Native 生态"],"sub_categories":[],"readme":"# react-native-platform-touchable is no longer maintained\n\n🚨 We recommend using [react-native-gesture-handler buttons](https://software-mansion.github.io/react-native-gesture-handler/docs/component-buttons.html) instead! \n\n\u003chr /\u003e\n\n#`\u003cTouchable\u003e`\n\nA wrapper around the various `Touchable*` components built into React Native core in order to use `TouchableNativeFeedback` whenever possible, provide an easier interface to using it, and flatten out API differences between the Touchable components.\n\n- iOS: Defaults to `TouchableOpacity` with default `activeOpacity`.\n- Android: Defaults to `TouchableNativeFeedback` with background from Android app style, unless Android API \u003c= 20 / Android \u003c 5.0, then defaults to `TouchableOpacity`.\n- `Touchable` requires exactly one child, for example:\n\n  ```javascript\n  // Good\n  \u003cTouchable\u003e\n    \u003cChild\u003e\n      \u003cGrandChild /\u003e\n      \u003cGrandChild /\u003e\n    \u003c/Child\u003e\n  \u003c/Touchable\u003e\n\n  // Bad\n  \u003cTouchable\u003e\n    \u003cChild /\u003e\n    \u003cChild /\u003e\n  \u003c/Touchable\u003e\n  ```\n\n## Usage\n\n```\nnpm i react-native-platform-touchable --save\n\n # or\n\nyarn add react-native-platform-touchable\n```\n\n```javascript\nimport React from 'react';\nimport { Text, View } from 'react-native';\nimport Touchable from 'react-native-platform-touchable';\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}\u003e\n        \u003cTouchable\n          onPress={() =\u003e console.log('hello!')}\n          style={{\n            backgroundColor: '#eee',\n            paddingVertical: 30,\n            paddingHorizontal: 80,\n          }}\n          background={Touchable.Ripple('blue')}\u003e\n          \u003cText\u003eHello there!\u003c/Text\u003e\n        \u003c/Touchable\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n## Statics\n\n- `Touchable.SelectableBackground()` - creates an object that represents android theme's default background for selectable elements\n- `Touchable.SelectableBackgroundBorderless()` - creates an object that represent android theme's default background for borderless selectable elements.\n- `Touchable.Ripple(color: string, borderless: boolean)` - creates an object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds.\n\n## props\n\nYou can use the same props as you would use on `TouchableOpacity`, `TouchableHighlight`, `TouchableNativeFeedback`, and `TouchableWithoutFeedback`. Listed below.\n\n- `fallback` - If `TouchableNativeFeedback` is not available (on iOS and on Android API \u003c= 20 / Android \u003c 5.0), the component specified in this prop is used instead. Defaults to `TouchableOpacity`.\n\n- `hitSlop` - use this! pass in an object of the format `{ top: number, left: number, right: number, bottom: number }`, this makes the `Touchable` easier to press by expanding the touchable area by the number of points that you specify on each side, without having to change the layout of the `Touchable`, eg: by adding padding.\n- `onPress` - fired when you press (touch in, release within bounds).\n- `onPressIn` - fired immediately on press in (like `onmousedown` on web)\n- `onPressOut` - fired immediately on press out (like `onmouseout` on web)\n- `onLongPress` -   fired when you press and hold.\n- `delayLongPress` - time to wait for `onLongPress` to fire.\n- `delayPressIn` - time to wait for `onPressIn` to fire\n- `delayPressOut` - time to wait for `onPressOut` to fire\n- `disabled` - default `false`, when `true` the button is disabled.\n- `onLayout` - see [onLayout documentation on View](http://facebook.github.io/react-native/releases/0.45/docs/view.html#onlayout)\n- `pressRetentionOffset` - see [React Native\n  documentation](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#pressretentionoffset).\n- accessibility props - see [`TouchableWithoutFeedback`](https://facebook.github.io/react-native/docs/touchablewithoutfeedback#props) for the list of supported props and [Accessibility guide](https://facebook.github.io/react-native/docs/accessibility.html) for more information.\n\n\n### Additional props used by TouchableOpacity (default iOS)\n\n- `activeOpacity` - sets the opacity to animate to when touch is active.\n\n### Additional props used by TouchableNativeFeedback  (default Android)\n\n- `background` - customize the touch effect with `Touchable.SelectableBackground`, `Touchable.SelectableBackgroundBorderless`, or `Touchable.Ripple(color: string, borderless: boolean)`.\n- `foreground` - same as `background`, should be used instead of background if the `Touchable` has any images as children and you want the ripple to be rendered above the image (if the image is not opaque, `background` will not be visible, you must use foreground)\n\n### Additional props used by TouchableHighlight\n\n- `underlayColor` - the color of the background when touch is active.\n- `onHideUnderlay` - fired immediately after the underlay is hidden\n- `onShowUnderlay` - fired immediately after the underlay is shown\n\n## Rounded corners on Touchables with TouchableNativeFeedback behavior\n\n- See [this example on Snack](https://snack.expo.io/ry3Xv9HNW) that demonstrates how to have `Touchable` with `TouchableNativeFeedback` behavior respect rounded corners from `borderRadius`.\n- Known issue: rounded corners do not work if you use a `foreground` ripple, see [facebook/react-native/issues/14798](https://github.com/facebook/react-native/issues/14798)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnc-archive%2Freact-native-platform-touchable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frnc-archive%2Freact-native-platform-touchable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnc-archive%2Freact-native-platform-touchable/lists"}