Skip to content

Commit ca80689

Browse files
Freddy03hFreddy03h
committed
Update installation and usage documentation for ReScript React Native
- Clarified installation steps and updated version requirements for dependencies. - Improved wording and formatting for better readability. - Adjusted examples to reflect changes in file naming conventions and script commands. - Enhanced explanations for project setup and development workflow.
1 parent 752e1aa commit ca80689

69 files changed

Lines changed: 1607 additions & 1148 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/accessibilityinfo.md‎

Lines changed: 48 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ officialDoc: https://reactnative.dev/docs/accessibilityinfo
88

99
### `announcementResult`
1010

11-
Passed to the handler of the `` `announcementFinished `` event.
11+
Passed to the handler of the `#announcementFinished` event.
1212

1313
```rescript
1414
type announcementResult = {
@@ -22,131 +22,82 @@ is a `bool` indicating whether the announcement was successfully made.
2222

2323
## Methods
2424

25-
### `isBoldTextEnabled`
25+
### Query methods
2626

27-
_iOS only_
27+
Each of these returns `promise<bool>`:
2828

29-
To query whether bold text is currently enabled. Promise resolves to `true` when
30-
bold text is enabled and `false` otherwise.
29+
| Method | Notes |
30+
| --- | --- |
31+
| `isBoldTextEnabled` | iOS |
32+
| `isGrayscaleEnabled` | iOS |
33+
| `isInvertColorsEnabled` | iOS |
34+
| `isReduceMotionEnabled` | |
35+
| `isReduceTransparencyEnabled` | iOS |
36+
| `isScreenReaderEnabled` | |
37+
| `isHighTextContrastEnabled` | |
38+
| `isDarkerSystemColorsEnabled` | |
39+
| `isAccessibilityServiceEnabled` | |
40+
| `prefersCrossFadeTransitions` | |
3141

3242
```rescript
33-
isBoldTextEnabled: unit => Js.Promise.t(bool)
43+
isScreenReaderEnabled: unit => promise<bool>
3444
```
3545

36-
### `isGrayscaleEnabled`
37-
38-
_iOS only_
39-
40-
To query whether grayscale is currently enabled. Promise resolves to `true` when
41-
grayscale is enabled and `false` otherwise.
42-
43-
```rescript
44-
isGrayscaleEnabled: unit => Js.Promise.t(bool)
45-
```
46-
47-
### `isInvertColorsEnabled`
48-
49-
_iOS only_
50-
51-
To query whether invert colors is currently enabled. Promise resolves to `true`
52-
when invert colors is enabled and `false` otherwise.
46+
### `getRecommendedTimeoutMillis`
5347

5448
```rescript
55-
isInvertColorsEnabled: unit => Js.Promise.t(bool)
49+
getRecommendedTimeoutMillis: float => promise<float>
5650
```
5751

58-
### `isReduceMotionEnabled`
59-
60-
To query whether reduce motion is currently enabled. Promise resolves to `true`
61-
when reduce motion is enabled and `false` otherwise.
62-
63-
```rescript
64-
isReduceMotionEnabled: unit => Js.Promise.t(bool)
65-
```
66-
67-
### `isReduceTransparencyEnabled`
68-
69-
_iOS only_
70-
71-
To query whether reduce transparency is currently enabled. Promise resolves to
72-
`true` when reduce transparency is enabled and `false` otherwise.
73-
74-
```rescript
75-
isReduceTransparencyEnabled: unit => Js.Promise.t(bool)
76-
```
77-
78-
### `isScreenReaderEnabled`
79-
80-
To query whether screen reader is currently enabled. Promise resolves to `true`
81-
when screen reader is enabled and `false` otherwise.
52+
### `announceForAccessibility`
8253

8354
```rescript
84-
isScreenReaderEnabled: unit => Js.Promise.t(bool)
55+
announceForAccessibility: string => unit
56+
announceForAccessibilityWithOptions: (string, {queue?: bool}) => unit
8557
```
8658

8759
### `setAccessibilityFocus`
8860

89-
To set accessibility focus to a React component, identified by its `nodeHandle`.
90-
On Android, this is equivalent to
91-
`UIManager.sendAccessibilityEvent(reactTag, UIManager.AccessibilityEventTypes.typeViewFocused)`
61+
@deprecated Prefer `sendAccessibilityEvent` with `#focus`.
9262

9363
```rescript
9464
setAccessibilityFocus: NativeTypes.nodeHandle => unit
9565
```
9666

97-
### `announceForAccessibility`
98-
99-
To post a string to be announced by the screen reader.
67+
### `sendAccessibilityEvent`
10068

10169
```rescript
102-
announceForAccessibility: string => unit
70+
sendAccessibilityEvent: (
71+
Ref.t<DOMAPI.element<'nativeElement>>,
72+
[#click | #focus | #viewHoverEnter | #windowStateChange],
73+
) => unit
10374
```
10475

10576
### `addEventListener`
10677

107-
Add an event handler.
78+
Add an event handler. Returns an [`EventSubscription`](/docs/eventsubscription)
79+
— call `.remove()` to unsubscribe.
10880

10981
```rescript
11082
addEventListener: [
111-
| #boldTextChanged(bool => unit)
112-
| #grayscaleChanged(bool => unit)
113-
| #invertColorsChanged(bool => unit)
114-
| #reduceMotionChanged(bool => unit)
115-
| #screenReaderChanged(bool => unit)
116-
| #reduceTransparencyChanged(bool => unit)
117-
| #announcementFinished(announcementResult => unit)
118-
] => unit
83+
| #boldTextChanged(bool => unit)
84+
| #grayscaleChanged(bool => unit)
85+
| #invertColorsChanged(bool => unit)
86+
| #reduceMotionChanged(bool => unit)
87+
| #screenReaderChanged(bool => unit)
88+
| #reduceTransparencyChanged(bool => unit)
89+
| #highTextContrastChanged(bool => unit)
90+
| #darkerSystemColorsChanged(bool => unit)
91+
| #accessibilityServiceChanged(bool => unit)
92+
| #announcementFinished(announcementResult => unit)
93+
] => EventSubscription.t
11994
```
12095

121-
Supported events:
122-
123-
- `boldTextChanged(bool => unit)`: _iOS only_. Fires when state of the bold text
124-
toggle changes. The argument to the event handler is a `bool` which is `true`
125-
when bold text is enabled and `false` otherwise.
126-
- `grayscaleChanged(bool => unit)`: _iOS only_. Fires when state of the gray
127-
scale toggle changes. The argument to the event handler is a `bool` which is
128-
`true` when gray scale is enabled and `false` otherwise.
129-
- `invertColorsChanged(bool => unit)`: _iOS only_. Fires when state of the
130-
invert colors toggle changes. The argument to the event handler is a `bool`
131-
which is `true` when invert colors is enabled and `false` otherwise.
132-
- `reduceMotionChanged(bool => unit)`: Fires when state of the reduce motion
133-
toggle changes. The argument to the event handler is a `bool` which is `true`
134-
when reduce motion is enabled (or when "Transition Animation Scale" in
135-
"Developer options" is "Animation off") and `false` otherwise.
136-
- `screenReaderChanged(bool => unit)`: Fires when state of the screen reader
137-
changes. The argument to the event handler is a `bool` which is `true` when a
138-
screen reader is enabled and `false` otherwise.
139-
- `reduceTransparencyChanged(bool => unit)`: _iOS only_. Fires when state of the
140-
reduce transparency toggle changes. The argument to the event handler is a
141-
`bool` which is `true` when reduce transparency is enabled and `false`
142-
otherwise.
143-
- `announcementFinished(announcementResult => unit)`: _iOS only_. Fires when the
144-
screen reader has finished making an announcement. The argument to the event
145-
handler is of type [`announcementResult`](#announcementResult).
146-
147-
### `removeEventListener`
148-
149-
To remove an event handler.
150-
151-
See [`addEventListener`](#addEventListener) for more details on supported
152-
events.
96+
```rescript
97+
React.useEffect0(() => {
98+
let sub = AccessibilityInfo.addEventListener(#screenReaderChanged(enabled => {
99+
Console.log(enabled)
100+
}))
101+
Some(() => sub->EventSubscription.remove)
102+
})
103+
```

‎docs/actionsheetios.md‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,37 @@
11
---
22
id: actionsheetios
33
title: ActionSheetIOS
4-
wip: true
4+
officialDoc: https://reactnative.dev/docs/actionsheetios
55
---
6+
7+
iOS-only action sheet / share sheet.
8+
9+
## `showActionSheetWithOptions`
10+
11+
```rescript
12+
ActionSheetIOS.showActionSheetWithOptions(
13+
{
14+
options: ["Cancel", "Delete"],
15+
cancelButtonIndex: 0,
16+
destructiveButtonIndex: [1],
17+
title: "Confirm",
18+
},
19+
buttonIndex => Console.log(buttonIndex),
20+
)
21+
```
22+
23+
## `showShareActionSheetWithOptions`
24+
25+
```rescript
26+
ActionSheetIOS.showShareActionSheetWithOptions(
27+
{url: "https://rescript-lang.org", message: "ReScript"},
28+
error => Console.warn(error),
29+
(completed, activityType) => Console.log((completed, activityType)),
30+
)
31+
```
32+
33+
## `dismissActionSheet`
34+
35+
```rescript
36+
ActionSheetIOS.dismissActionSheet()
37+
```

‎docs/activityindicator.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
---
22
id: activityindicator
33
title: ActivityIndicator
4-
wip: true
4+
officialDoc: https://reactnative.dev/docs/activityindicator
55
---
6+
7+
```rescript
8+
@unboxed
9+
type size = Small | Large | Number(float)
10+
11+
<ActivityIndicator animating=true size=Large color="#999" />
12+
<ActivityIndicator size={Number(36.)} />
13+
```

‎docs/alert.md‎

Lines changed: 54 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,50 @@
11
---
22
id: alert
33
title: Alert
4-
wip: true
4+
officialDoc: https://reactnative.dev/docs/alert
55
---
66

7+
## Types
8+
9+
```rescript
10+
type style = [#default | #cancel | #destructive]
11+
12+
type button = {
13+
text?: string,
14+
onPress?: unit => unit,
15+
style?: style,
16+
isPreferred?: bool,
17+
}
18+
19+
type options = {
20+
cancelable?: bool,
21+
userInterfaceStyle?: Appearance.t,
22+
onDismiss?: unit => unit,
23+
}
24+
```
25+
726
## Methods
827

928
### `alert`
1029

11-
Launches an alert dialog with the specified `title` and `message`. Optionally,
12-
an array of `buttons` can be provided: on Android the maximum is 3, on iOS any
13-
number is okay.
30+
Launches an alert dialog with the specified `title` and optional `message`.
31+
Optionally, an array of `buttons` can be provided: on Android the maximum is 3,
32+
on iOS any number is okay.
1433

1534
On Android, the dialog can be dismissed by tapping outside of the alert box.
1635
This triggers the `onDismiss` callback available in the `options`. With the
1736
`cancelable` option, this behavior can be deactivated altogether.
1837

19-
#### `alert` Example
38+
```rescript
39+
alert: (
40+
~title: string,
41+
~message: string=?,
42+
~buttons: array<button>=?,
43+
~options: options=?,
44+
) => unit
45+
```
46+
47+
#### Example
2048

2149
```rescript
2250
open ReactNative
@@ -25,20 +53,28 @@ Alert.alert(
2553
~title="Do you really want to quit?",
2654
~message="We miss you already.",
2755
~buttons=[
28-
Alert.button(
29-
~text="OK",
30-
~style=#destructive,
31-
~onPress=() => Js.log("Bye!"),
32-
(),
33-
),
34-
Alert.button(~text="Cancel", ~style=#cancel, ()),
56+
{text: "OK", style: #destructive, onPress: () => Console.log("Bye!")},
57+
{text: "Cancel", style: #cancel},
3558
],
36-
~options=Alert.options(
37-
~cancelable=true,
38-
~onDismiss=_ => Js.log("Dismissed."),
39-
(),
40-
),
41-
(),
59+
~options={cancelable: true, onDismiss: () => Console.log("Dismissed.")},
4260
)
61+
```
4362

63+
### `prompt`
64+
65+
_iOS only_ — prompt the user for text input.
66+
67+
```rescript
68+
prompt: (
69+
~title: string,
70+
~message: string=?,
71+
~callbackOrButtons: [
72+
| #callback(string => unit)
73+
| #buttons(array<button>)
74+
]=?,
75+
~type_: [#default | #"plain-text" | #"secure-text" | #"login-password"]=?,
76+
~defaultValue: string=?,
77+
~keyboardType: string=?,
78+
~options: options=?,
79+
) => unit
4480
```

‎docs/animated.md‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,41 @@
11
---
22
id: animated
33
title: Animated
4-
wip: true
4+
officialDoc: https://reactnative.dev/docs/animated
55
---
6+
7+
ReScript bindings mirror the React Native Animated API (`Value`, `ValueXY`,
8+
`timing` / `spring` / `decay`, `parallel`, `sequence`, `loop`,
9+
`Animated.View` / `Text` / `Image` / `ScrollView`, interpolation, …).
10+
11+
```rescript
12+
open ReactNative
13+
open Animated
14+
15+
@react.component
16+
let make = () => {
17+
let fade = useAnimatedValue(~initialValue=0.)
18+
19+
React.useEffect0(() => {
20+
timing(
21+
fade,
22+
{
23+
toValue: Value.Timing.fromRawValue(1.),
24+
duration: 500.,
25+
useNativeDriver: true,
26+
},
27+
)->start
28+
None
29+
})
30+
31+
<View style={Style.s({opacity: fade->StyleProp.float})}>
32+
<Text> {"Fade in"->React.string} </Text>
33+
</View>
34+
}
35+
```
36+
37+
With `open Animated`, `View` refers to `Animated.View`.
38+
39+
See
40+
[`src/apis/Animated.res`](https://github.com/rescript-react-native/rescript-react-native/blob/main/src/apis/Animated.res)
41+
for the full surface.

0 commit comments

Comments
 (0)