|
1 | | -**How to use this template** |
2 | | - |
3 | | -- Put your bindings in `src/ReactNativeViewPager` & rename accordingly or use |
4 | | - `bsconfig.json` `"namespace"` field (more on this below), |
5 | | -- Update all occurences of |
6 | | - |
7 | | - - `@reason-react-native/viewpager` |
8 | | - - `https://github.com/reason-react-native/viewpager` |
9 | | - - `viewpager` |
10 | | - - `@react-native-community/viewpager` |
11 | | - - `https://github.com/react-native-community/react-native-viewpager` |
12 | | - - `ReactNativeViewPager`. If you have more than a file exposed, you should |
13 | | - consider using BuckleScript custom namespace by adjusting `bsconfig.json` |
14 | | - and adding a `"namespace": "react-native-something"` (note that it will be |
15 | | - converted to `ReactNativeViewPager`) |
16 | | - |
17 | | -- Add your `@react-native-community/viewpager` (adjusted) in `peerDependencies` |
18 | | - & `devDependencies` section |
19 | | -- Adjust the changelog (and/or clean it) |
20 | | -- Remove this part ⬆ & keep everything below ⬇ |
21 | | - |
22 | | ---- |
23 | | - |
24 | 1 | # `@reason-react-native/viewpager` |
25 | 2 |
|
26 | 3 | [](https://github.com/reason-react-native/viewpager/actions) |
@@ -67,17 +44,63 @@ yarn add @reason-react-native/viewpager |
67 | 44 |
|
68 | 45 | ## Usage |
69 | 46 |
|
| 47 | +```reason |
| 48 | +[@react.component] |
| 49 | +let app = () => |
| 50 | + <SafeAreaView style={styles##body}> |
| 51 | + <ReactNativeViewPager style={styles##body} |
| 52 | + initialPage=1 |
| 53 | + pageMargin=13 |
| 54 | + transitionStyle={`curl} |
| 55 | + showPageIndicator=true |
| 56 | + > |
| 57 | + <View style={styles##red}/> |
| 58 | + <View style={styles##blue}/> |
| 59 | + <View style={styles##green}/> |
| 60 | + </ReactNativeViewPager> |
| 61 | + </SafeAreaView>; |
| 62 | +``` |
| 63 | + |
70 | 64 | ### Types |
71 | 65 |
|
72 | 66 | #### `ReactNativeViewPager.t` |
73 | 67 |
|
74 | | -... |
| 68 | +```reason |
| 69 | +~ref: ref=?, |
| 70 | +~initialPage: int=?, |
| 71 | +~scrollEnabled: bool=?, |
| 72 | +~onPageScroll: ReactNative.Event.syntheticEvent(scrollEvent) => unit=?, |
| 73 | +~onPageSelected: ReactNative.Event.syntheticEvent(selectedEvent) => unit=?, |
| 74 | +~onPageScrollStateChanged: ReactNative.Event.syntheticEvent( |
| 75 | + scrollStateChangedEvent, |
| 76 | + ) => |
| 77 | + unit |
| 78 | + =?, |
| 79 | +~keyboardDismissMode: [@bs.string] [ | `none | [@bs.as "on-drag"] `onDrag] |
| 80 | + =?, |
| 81 | +~pageMargin: int=?, |
| 82 | +~onMoveShouldSetResponderCapture: ReactNative.Event.pressEvent => bool=?, |
| 83 | +~style: ReactNative.Style.t=?, |
| 84 | +~children: React.element=?, |
| 85 | +~orientation: [@bs.string] [ | `horizontal | `vertical]=?, |
| 86 | +~transitionStyle: [@bs.string] [ | `scroll | `curl]=?, |
| 87 | +~showPageIndicator: bool=? |
| 88 | +``` |
75 | 89 |
|
76 | 90 | ### Methods |
77 | 91 |
|
78 | | -#### `ReactNativeViewPager.method` |
| 92 | +#### `ReactNativeViewPager.setPage` |
| 93 | + |
| 94 | +```reason |
| 95 | +setPage: (T.t, int) => unit = "setPage"; |
| 96 | +``` |
79 | 97 |
|
80 | | -... |
| 98 | +#### `ReactNativeViewPager.setPage` |
| 99 | + |
| 100 | +```reason |
| 101 | +setPageWithoutAnimation: (T.t, int) => unit = |
| 102 | + "setPageWithoutAnimation"; |
| 103 | +``` |
81 | 104 |
|
82 | 105 | --- |
83 | 106 |
|
|
0 commit comments