137 lines
21 KiB
JSON
137 lines
21 KiB
JSON
{
|
||
"_args": [
|
||
[
|
||
{
|
||
"raw": "react-native-gesture-handler@1.0.0-alpha.39",
|
||
"scope": null,
|
||
"escapedName": "react-native-gesture-handler",
|
||
"name": "react-native-gesture-handler",
|
||
"rawSpec": "1.0.0-alpha.39",
|
||
"spec": "1.0.0-alpha.39",
|
||
"type": "version"
|
||
},
|
||
"/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/expo"
|
||
]
|
||
],
|
||
"_from": "react-native-gesture-handler@1.0.0-alpha.39",
|
||
"_id": "react-native-gesture-handler@1.0.0-alpha.39",
|
||
"_inCache": true,
|
||
"_location": "/react-native-gesture-handler",
|
||
"_nodeVersion": "8.4.0",
|
||
"_npmOperationalInternal": {
|
||
"host": "s3://npm-registry-packages",
|
||
"tmp": "tmp/react-native-gesture-handler-1.0.0-alpha.39.tgz_1515589106311_0.7070822108071297"
|
||
},
|
||
"_npmUser": {
|
||
"name": "kmag",
|
||
"email": "krzys.magiera@gmail.com"
|
||
},
|
||
"_npmVersion": "5.4.2",
|
||
"_phantomChildren": {},
|
||
"_requested": {
|
||
"raw": "react-native-gesture-handler@1.0.0-alpha.39",
|
||
"scope": null,
|
||
"escapedName": "react-native-gesture-handler",
|
||
"name": "react-native-gesture-handler",
|
||
"rawSpec": "1.0.0-alpha.39",
|
||
"spec": "1.0.0-alpha.39",
|
||
"type": "version"
|
||
},
|
||
"_requiredBy": [
|
||
"/expo"
|
||
],
|
||
"_resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.0.0-alpha.39.tgz",
|
||
"_shasum": "e87851d5efc49d2d91ebf76ad59b7b5d1fd356f5",
|
||
"_shrinkwrap": null,
|
||
"_spec": "react-native-gesture-handler@1.0.0-alpha.39",
|
||
"_where": "/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/expo",
|
||
"author": {
|
||
"name": "Krzysztof Magiera",
|
||
"email": "krzys.magiera@gmail.com"
|
||
},
|
||
"bugs": {
|
||
"url": "https://github.com/kmagiera/react-native-gesture-handler/issues"
|
||
},
|
||
"dependencies": {
|
||
"hoist-non-react-statics": "^2.3.1",
|
||
"invariant": "^2.2.2",
|
||
"prop-types": "^15.5.10"
|
||
},
|
||
"description": "Experimental implementation of a new declarative API for gesture handling in react-native",
|
||
"devDependencies": {
|
||
"@types/react": "^16.0.31",
|
||
"@types/react-native": "^0.51.3",
|
||
"babel-jest": "16.0.0",
|
||
"babel-preset-react-native": "1.9.0",
|
||
"flow-bin": "^0.56.0",
|
||
"husky": "^0.14.3",
|
||
"jest": "16.0.2",
|
||
"jest-react-native": "16.0.0",
|
||
"lint-staged": "^4.0.3",
|
||
"prettier": "^1.7.0",
|
||
"react": "^16.0.0",
|
||
"react-native": "^0.50.1",
|
||
"react-test-renderer": "15.3.2"
|
||
},
|
||
"directories": {},
|
||
"dist": {
|
||
"integrity": "sha512-nNdafB04a1b+zafEwMvzor5KJ3xFylJQHtPljXZKdTDeYbGSIcfPpfx96rDpxDr4fkO/o0K51InZHZ6PUtG5EQ==",
|
||
"shasum": "e87851d5efc49d2d91ebf76ad59b7b5d1fd356f5",
|
||
"tarball": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.0.0-alpha.39.tgz"
|
||
},
|
||
"files": [
|
||
"android/build.gradle",
|
||
"android/src/main/AndroidManifest.xml",
|
||
"android/src/main/java/",
|
||
"android/lib/build.gradle",
|
||
"android/lib/src/main/java/",
|
||
"ios/",
|
||
"README.md",
|
||
"NATIVE_NAVIGATORS.md",
|
||
"GestureHandler.js",
|
||
"Swipeable.js",
|
||
"DrawerLayout.js",
|
||
"gestureHandlerRootHOC.android.js",
|
||
"gestureHandlerRootHOC.ios.js",
|
||
"react-native-gesture-handler.d.ts"
|
||
],
|
||
"gitHead": "a3f1af23130a522817ea6aaf8bc8bfcdc5a16227",
|
||
"homepage": "https://github.com/kmagiera/react-native-gesture-handler#readme",
|
||
"jest": {
|
||
"preset": "jest-react-native"
|
||
},
|
||
"license": "MIT",
|
||
"lint-staged": {
|
||
"*.js": [
|
||
"prettier --write --print-width 80 --tab-width 2 --single-quote --jsx-bracket-same-line=true --trailing-comma=es5",
|
||
"git add"
|
||
]
|
||
},
|
||
"main": "GestureHandler.js",
|
||
"maintainers": [
|
||
{
|
||
"name": "kmag",
|
||
"email": "krzys.magiera@gmail.com"
|
||
}
|
||
],
|
||
"name": "react-native-gesture-handler",
|
||
"optionalDependencies": {},
|
||
"peerDependencies": {
|
||
"react": "> 15.0.0",
|
||
"react-native": ">= 0.50.0"
|
||
},
|
||
"readme": "# react-native-gesture-handler\n\nNative way of handling touch & gestures for React Native apps!\n\nThis library provides an API that exposes mobile platform specific native capabilities of touch & gesture handling and recognition. It allows for defining complex gesture handling and recognition logic that runs 100% in native thread and is therefore deterministic.\n\n### What does it give me:\n - It provides a way to access native touch handling logic for recognizing pinch, rotation, pan and other\n - You can define relations between gesture handlers, e.g. when you have pan handler in scrollview you can make scrollview to wait until it knows pan won't recognize\n - You can use touchables that run in native and follow platform default behaviour in case when they are embbede in scrollable component (the interaction is slightly delayed to prevent button from highlighting when you fling)\n - You can implement smooth gesture interactions that thanks to \"Animated Native Driver\" can run even when JS thread is overloaded\n\n## Installation\n\n### Supported configurations\n\nBefore instaling please check the following table to find which library version is compatible with React Native version you are using:\n\n | React Native version | React Native Gesture Handler version | Notes |\n | --- | --- | --- |\n | v0.50+ | **latest** | |\n | v0.47 - v0.49 | 1.0.0-alpha.29 | Breaking changes explained and fixed in [#44](https://github.com/kmagiera/react-native-gesture-handler/pull/44) |\n | pre v0.47 | **Not supported** |\n\n\n\nI. First install the library from npm repository using `yarn`:\n```bash\n yarn add react-native-gesture-handler\n```\n\nor using `npm` if you prefer:\n```bash\n npm install --save react-native-gesture-handler\n```\n\nII. Run:\n```bash\n react-native link react-native-gesture-handler\n```\n\nIII (**Android**). Follow the steps below:\n\n**IMPORTANT:** If you use one of the *native navigation libraries* (e.g. [wix/react-native-navigation](https://github.com/wix/react-native-navigation)), you need to follow [this separate guide](NATIVE_NAVIGATORS.md) to get gesture handler library set up on Android. Ignore the rest of this step – it only applies to RN apps that uses standard Android project layout.\n\nUpdate your main activity (or wherever you create an instance of `ReactActivityDelegate`), so that it overrides the method responsible for creating a `ReactRootView` instance. Then use a root view wrapper provided by this library:\n```java\n// Don't forget imports\nimport com.facebook.react.ReactActivityDelegate;\nimport com.facebook.react.ReactRootView;\nimport com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;\n\npublic class MainActivity extends ReactActivity {\n\n // Add the following method to your main activity class\n @Override\n protected ReactActivityDelegate createReactActivityDelegate() {\n return new ReactActivityDelegate(this, getMainComponentName()) {\n @Override\n protected ReactRootView createRootView() {\n return new RNGestureHandlerEnabledRootView(MainActivity.this);\n }\n };\n }\n}\n```\n\nIII (**iOS**). There is no additional config required to be done on iOS except from what follows in the next steps.\n\nIV. You're all set, just run your app with `react-native run-android` or `react-native run-ios`\n\n## Examples\n\nIf you don't feel like trying it on a real app, but just want to play with the API you can run the example project. Clone the repo, go to the `Example/` folder and run:\n```bash\n yarn install\n```\n\nThen run `react-native run-android` or `react-native run-ios` depending on which platform you want to run the example app on.\n\nYou will need to have an Android or iOS device or emulator connected as well as `react-native-cli` package installed globally.\n\n## API\n\nHere are a gesture recognizers currently available in the package:\n - `TapGestureHandler`\n - `LongPressGestureHandler`\n - `PanGestureHandler`\n - `PinchGestureHandler`\n - `RotationGestureHandler`\n\nWhenever you use a native component that should handle touch events you can either wrap it with `NativeViewGestureHandler` or import wrapper component exported by the library instead of importing it from `react-native` package. Here is the list of available components:\n - `ScrollView`\n - `Slider`\n - `Switch`\n - `TextInput`\n - `ToolbarAndroid` (**Android only**)\n - `ViewPagerAndroid` (**Android only**)\n - `DrawerLayoutAndroid` (**Android only**)\n - `WebView`\n\n\nLibrary exports a `State` object that provides a number of constants used to express the state of the handler. Here are the available constants:\n - `State.UNDETERMINED` - default and initial state\n - `State.FAILED` - handler failed recognition of the gesture\n - `State.BEGAN` - handler has initiated recognition but have not enough data to tell if it has recognized or not\n - `State.CANCELLED` - handler has been cancelled because of other handler (or a system) stealing the touch stream\n - `State.ACTIVE` - handler has recognized\n - `State.END` - gesture has completed\n\n#### Common `GestureHandler` properties\n\n - `id`\n - `enabled`\n - `shouldCancelWhenOutside`\n - `simultaneousHandlers`\n - `waitFor`\n - `hitSlop` (**accepts only negative values on iOS**)\n - `onGestureEvent`\n - `onHandlerStateChange`\n - `onBegan`\n - `onFailed`\n - `onCancelled`\n - `onActivated`\n - `onEnded`\n\n#### `TapGestureHandler` extra properties\n\n - `maxDurationMs`\n - `maxDelayMs`\n - `numberOfTaps`\n\n#### `NativeViewGestureHandler` extra properties\n\n - `shouldActivateOnStart`\n - `disallowInterruption`\n\n#### `LongPressGestureHandler` extra properties\n\n - `minDurationMs`\n - `maxDist`\n\n#### `PanGestureHandler` extra properties\n\n - `minDeltaX`\n - `minDeltaY`\n - `maxDeltaX`\n - `maxDeltaY`\n - `minOffsetX`\n - `minOffsetY`\n - `minDist`\n - `minVelocity`\n - `minVelocityX`\n - `minVelocityY`\n - `minPointers`\n - `maxPointers`\n - `avgTouches` (**Android only**)\n\n#### `PinchGestureHandler`\n\n#### `RotationGestureHandler`\n\n## Buttons\n\nGesture handler library provides native components that can act as buttons. These can be treated as a replacement to `TouchableHighlight` or `TouchableOpacity` from RN core. Gesture handler's buttons recognize touches in native which makes the recognition process deterministic, allows for rendering ripples on android in performant way (with `TouchableNativeFeedback` it is required that touch event to a roundtrip to JS before we can update ripple which makes ripples lag a bit on older phones), and provides native and platform default interaction for buttons that are placed in a scrollable container (in which case the interaction is slightly delay to prevent button from highlighting when you fling).\n\nCurrently Gesture handler library exposes three components that renders native touchable elements under the hood:\n - `BaseButton`\n - `RectButton`\n - `BorderlessButton`\n\nOn top of that all the buttons are wrapped with `NativeViewGestureHandler` and therefore allow for all the [common gesture handler properties](#common-gesturehandler-properties) and `NativeViewGestureHandler`'s [extra properties](#nativeviewgesturehandler-extra-properties) to be applied to them.\n\n#### `<BaseButton />` component\n\nCan be used as a base class if you'd like to implement some custom interaction for when the button is pressed. The following props can be used:\n - `onActiveStateChange` - function that gets triggered when button changes from inactive to active and vice versa. It passes active state as a boolean variable as a first parameter for that method.\n - `onPress` - function that gets triggered when the button gets pressed (similar to how it works with `TouchableHighlight` from RN core).\n\n#### `<RectButton />` component\n\nThis type of a button component should be used when you deal with a rectangular elements or blocks of content that can be pressed, like table rows or buttons with text and icons. This component provides a platform specific interaction rendering a rectangular ripple on android or highlighting the background on iOS and on older versions of android. Along with all the properties of [`BaseButton`](#basebutton-component) it allows for specifying the following props:\n - `underlayColor` - this is the background color that will be dimmed when button is in active state.\n - `activeOpacity` (**iOS only**) - opacity applied to the underlay when button is in active state.\n\n#### `<BorderlessButton />` component\n\nThis type of a button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds) whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). Along with all the properties of [`BaseButton`](#basebutton-component) it allows for specifying the following props:\n - `borderless` (**Android only**) - set this to `false` if you want the ripple animation to render only within view bounds.\n - `activeOpacity` (**iOS only**) - opacity applied to the button when it is in an active state.\n\n## Controlling gesture handlers interactions\n\nGesture handler library API allows for defining some basic interaction between handler components. Interactions can be defined by first setting a string identifer for a handler component with `id` property and then referencing it with `waitFor` or `simultaneousHandlers` props in other handler component.\n\n#### `waitFor` property\n\nThis property accepts a single string ID of a gesture handler or an array of string IDs. When set for a given gesture handler it will make it wait for the handler(s) with the given ID(s) to fail before it can activate.\n\n#### `simultaneousHandlers` property\n\nThis property accepts a single string ID of a gesture handler or an array of string IDs. When set for a given gesture handler it allow for this gesture handler to recognize simultaneousy with handler(s) with the given ID(s). One popular usecase is with a photo that can be pinched and rotated, in which case we want both pinch and rotate gesture handlers to recognize simultaneously.\n\n## Custom components\n\nGesture handler library makes it possible for some interations to be build in much more performant way that it was possible with PanHandler. To illustrate this we decided to build a couple of components that are already available for react-native apps but often are build using PanResponder API which results in poor performance.\n\n### `<DrawerLayout />`\n\nThis is a cross platform replacement for react-native's [DrawerLayoutAndroid](http://facebook.github.io/react-native/docs/drawerlayoutandroid.html) component. It provides a compatible API but allows for the component to be used on both Android and iOS. Please refer to [react-native docs](http://facebook.github.io/react-native/docs/drawerlayoutandroid.html) for the detailed usage for standard parameters.\n\n#### Usage:\n\nAs the DrawerLayout component isn't expored by default from the gesture-handler package in order to use it import it in the following way:\n```js\nimport DrawerLayout from 'react-native-gesture-handler/DrawerLayout';\n```\n\n#### Props:\n\nOn top of the standard list of parameters DrawerLayout has an additional set of attributes that helps with customizing its behavior. Please refer to the list below:\n\n - `drawerType` – possible values are: `front`, `back` or `slide` (default is `front`). It specifies the way drawer will be displayed. When set to `front` drawer will slide in/out along with the gesture and will display on top of the content view. When `back` is used the drawer displays below the content view and can be revealed with the gesture that will pull the content view to the side. Finally `slide` option make the drawer appear like it is sticked to the side of the content view and when you pull both content view and drawer will follow the gesture.\n - `edgeWidth` – number, allows for defining how far from the edge of the content view the gesture should activate.\n - `hideStatusBar` – boolean, when set to `true` Drawer component will use [StatusBar](http://facebook.github.io/react-native/docs/statusbar.html) API to hide the OS status bar whenever the drawer is pulled or when its in an \"open\" state.\n - `statusBarAnimation` – possible values are: `slide`, `none` or `fade` (defaults to `slide`). Can be used when `hideStatusBar` is set to `true` and allows for defining the animation used for hiding/showing the status bar. See [StatusBar](http://facebook.github.io/react-native/docs/statusbar.html#statusbaranimation) documentation for more details.\n - `overlayColor` – color (default to `\"black\"`) of a semi-transparent overlay to be displayed on top of the content view when drawer gets open. A solid color should be used as the opacity is added by the Drawer itself and the opacity of the overlay is animated (from 0% to 70%).\n - `renderNavigationView` - function. This attibute is present in the standard implementation already and is one of the required params. Gesture handler version of DrawerLayout make it possible for the function passed as `renderNavigationView` to take an Animated value as a parameter that indicates the progress of drawer opening/closing animation (progress value is 0 when closed and 1 when opened). This can be used by the drawer component to animated its children while the drawer is opening or closing.\n\n#### Example:\n\nAn example code that that uses `DrawerLayout` component can be found here: [`horizontalDrawer/index.js`](https://github.com/kmagiera/react-native-gesture-handler/blob/master/Example/horizontalDrawer/index.js)\n\n### `<Swipeable />`\n\nThis component allows for implementing swipeable rows or similar interaction. It renders its children within a panable container allows for horizontal swiping left and right. While swiping one of two \"action\" containers can be shown depends on whether user swipes left or right (containers can be rendered by `renderLeftActions` or `renderRightActions` props).\n\n#### Usage:\n\nSimilarly to the DrawerLayout, Swipeable component isn't expored by default from the gesture-handler package in order to use it import it in the following way:\n```js\nimport Swipeable from 'react-native-gesture-handler/Swipeable';\n```\n\n#### Props:\n - `friction` – a number that specifies how much the visual interation will be delayed compared to the gesture distance. e.g. value of 1 will indicate that the swipeable panel should exactly follow the gesture, 2 means it is going to be two times \"slower\".\n - `leftThreshold` – diance from the left edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width.\n - `rightThreshold` – diance from the right edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width.\n - `overshootLeft` – a boolean value indicating if the swipeable panel can be pulled further than the left actions panel's width. It is set to `true` by default as long as the left panel render method is present.\n - `overshootRight` – a boolean value indicating if the swipeable panel can be pulled further than the right actions panel's width. It is set to `true` by default as long as the right panel render method is present.\n - `onSwipeableLeftOpen` – method that is called when left action panel gets open.\n - `onSwipeableRightOpen` – method that is called when right action panel gets open.\n - `onSwipeableOpen` – method that is called when action panel gets open (either right or left).\n - `onSwipeableClose` – method that is called when action panel is closed.\n - `renderLeftActions` – method that is expected to return an action panel that is going to be revealed from the left side when user swipes right.\n - `renderRightActions` – method that is expected to return an action panel that is going to be revealed from the right side when user swipes left.\n\n#### Example:\n\nAn example code that that uses `Swipeable` component can be found here: [`swipeable/index.js`](https://github.com/kmagiera/react-native-gesture-handler/blob/master/Example/swipeable/index.js)\n\n## Troubleshooting\n\nThis project is still in alpha so it is not suprising you're seeking help. Try searching over the issues on GitHub [here](https://github.com/kmagiera/react-native-gesture-handler/issues). If you don't find anything that would help feel free to open a new issue!\n\n## Contributing\n\nIf you are interested in the project and want to contribute or support it in other ways don't hesitate to contact me! Also all PRs are always welcome!\n\n## Credits\n\nThis project is supported by amazing people from [Expo.io](https://expo.io) and [Software Mansion](https://swmansion.com)\n\n[![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 \"Expo.io\")](https://expo.io)\n[![swm](https://avatars1.githubusercontent.com/u/6952717?v=3&s=100 \"Software Mansion\")](https://swmansion.com)\n",
|
||
"readmeFilename": "README.md",
|
||
"repository": {
|
||
"type": "git",
|
||
"url": "git+https://github.com/kmagiera/react-native-gesture-handler.git"
|
||
},
|
||
"scripts": {
|
||
"precommit": "lint-staged",
|
||
"start": "node node_modules/react-native/local-cli/cli.js start",
|
||
"test": "jest"
|
||
},
|
||
"types": "react-native-gesture-handler.d.ts",
|
||
"version": "1.0.0-alpha.39"
|
||
}
|