Skip to content

Commit 4049d95

Browse files
authored
reason-react-native: add example for ScrollView scrollTo method (#577)
* reason-react-native: add example for ScrollView scrollTo method * Update ScrollView.md * Update ScrollView.md * Update ScrollView.md * Update ScrollView.md
1 parent 129d490 commit 4049d95

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

reason-react-native/src/components/ScrollView.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,67 @@ title: ScrollView
44
wip: true
55
---
66

7+
## Methods
8+
9+
### `scrollTo`
10+
11+
Scrolls to a given `x`, `y` offset, either immediately, with a smooth animation, or,
12+
for Android only, a custom animation duration time.
13+
14+
```reason
15+
let scrollParams = (~x: float, ~y: float, ~animated: bool=?, ~duration: float=?, unit) => unit;
16+
17+
let scrollTo = (scrollView, scrollParams) => unit;
18+
```
19+
20+
#### `scrollTo` Example
21+
22+
```reason
23+
open ReactNative;
24+
25+
[@react.component]
26+
let make = () => {
27+
let scrollViewRef = React.useRef(Js.Nullable.null);
28+
<ScrollView ref=scrollViewRef>
29+
<TouchableOpacity
30+
onPress={_ =>
31+
switch (scrollViewRef->React.Ref.current->Js.Nullable.toOption) {
32+
| Some(scrollView) =>
33+
scrollView->ScrollView.scrollTo(
34+
ScrollView.scrollToParams(~x=0., ~y=0., ~animated=true, ()),
35+
)
36+
| _ => ()
37+
}
38+
}>
39+
<Text> "ScrollTo 0, 0"->React.string </Text>
40+
</TouchableOpacity>
41+
</ScrollView>;
42+
};
43+
```
44+
45+
### `scrollToEnd`
46+
47+
Scrolls to the end of the `ScrollView` with an animation.
48+
If this is a vertical `ScrollView` scrolls to the bottom.
49+
If this is a horizontal `ScrollView` scrolls to the right.
50+
51+
```reason
52+
let scrollToEnd = (scrollView) => unit;
53+
```
54+
55+
### `scrollToEndWithOptions`
56+
57+
Similar to `scrollToEnd`, with options for animation or, for Android only duration.
58+
59+
```reason
60+
let scrollToEndOptions = (~animated: bool=?, ~duration: float=?, unit) => unit;
61+
62+
let scrollToEndWithOptions = (scrollView, scrollParams) => unit;
63+
```
64+
65+
---
66+
67+
768
```reason
869
include ScrollViewElement;
970

0 commit comments

Comments
 (0)