react-native-gesture-handler
Advanced tools
Comparing version 1.0.0-alpha.25 to 1.0.0-alpha.26
@@ -16,2 +16,3 @@ import React from 'react'; | ||
StyleSheet, | ||
FlatList, | ||
Platform, | ||
@@ -527,2 +528,11 @@ } from 'react-native'; | ||
/* Other */ | ||
const FlatListWithGHScroll = props => ( | ||
<FlatList | ||
{...props} | ||
renderScrollComponent={props => <WrappedScrollView {...props} />} | ||
/> | ||
); | ||
export { | ||
@@ -549,2 +559,4 @@ WrappedScrollView as ScrollView, | ||
BorderlessButton, | ||
/* Other */ | ||
FlatListWithGHScroll as FlatList, | ||
}; |
{ | ||
"name": "react-native-gesture-handler", | ||
"version": "1.0.0-alpha.25", | ||
"version": "1.0.0-alpha.26", | ||
"description": "Experimental implementation of a new declarative API for gesture handling in react-native", | ||
@@ -5,0 +5,0 @@ "scripts": { |
@@ -32,3 +32,3 @@ # react-native-gesture-handler | ||
class MainActivity extends ReactActivity { | ||
public class MainActivity extends ReactActivity { | ||
@@ -153,3 +153,3 @@ // Add the following method to your main activity class | ||
#### `BaseButton` component | ||
#### `<BaseButton />` component | ||
@@ -160,3 +160,3 @@ Can 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: | ||
#### `RectButton` component | ||
#### `<RectButton />` component | ||
@@ -167,3 +167,3 @@ This 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: | ||
#### `BorderlessButton` component | ||
#### `<BorderlessButton />` component | ||
@@ -186,2 +186,60 @@ This 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: | ||
## Custom components | ||
Gesture 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. | ||
### `<DrawerLayout />` | ||
This 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. | ||
#### Usage: | ||
As the DrawerLayout component isn't expored by default from the gesture-handler package in order to use it import it in the following way: | ||
```js | ||
import DrawerLayout from 'react-native-gesture-handler/DrawerLayout'; | ||
``` | ||
#### Props: | ||
On 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: | ||
- `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. | ||
- `edgeWidth` – number, allows for defining how far from the edge of the content view the gesture should activate. | ||
- `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. | ||
- `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. | ||
- `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%). | ||
- `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. | ||
#### Example: | ||
An 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) | ||
### `<Swipeable />` | ||
This 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). | ||
#### Usage: | ||
Similarly 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: | ||
```js | ||
import Swipeable from 'react-native-gesture-handler/Swipeable'; | ||
``` | ||
#### Props: | ||
- `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". | ||
- `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. | ||
- `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. | ||
- `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. | ||
- `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. | ||
- `onSwipeableLeftOpen` – method that is called when left action panel gets open. | ||
- `onSwipeableRightOpen` – method that is called when right action panel gets open. | ||
- `onSwipeableOpen` – method that is called when action panel gets open (either right or left). | ||
- `onSwipeableClose` – method that is called when action panel is closed. | ||
- `renderLeftActions` – method that is expected to return an action panel that is going to be revealed from the left side when user swipes right. | ||
- `renderRightActions` – method that is expected to return an action panel that is going to be revealed from the right side when user swipes left. | ||
#### Example: | ||
An 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) | ||
## Troubleshooting | ||
@@ -188,0 +246,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
226191
51
3372
254