1
- ** How to use this template**
2
-
3
- - Put your bindings in ` src/ReactNativeSomething ` & rename accordingly or use
4
- ` bsconfig.json ` ` "namespace" ` field (more on this below),
5
- - Update all occurences of
6
-
7
- - ` @reason-react-native/__template__ `
8
- - ` https://github.com/reason-react-native/__template__ `
9
- - ` __template__ `
10
- - ` @react-native-community/something `
11
- - ` https://github.com/react-native-community/something `
12
- - ` ReactNativeSomething ` . 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 ` ReactNativeSomething ` )
16
-
17
- - Add your ` @react-native-community/something ` (adjusted) in ` peerDependencies `
18
- & ` devDependencies ` section
19
- - Adjust the changelog (and/or clean it)
20
- - Remove this part ⬆ & keep everything below ⬇
1
+ # ` @reason-react-native/safe-area-context `
21
2
22
- ---
23
-
24
- # ` @reason-react-native/__template__ `
25
-
26
- [ ![ Build Status] ( https://github.com/reason-react-native/__template__/workflows/Build/badge.svg )] ( https://github.com/reason-react-native/__template__/actions )
27
- [ ![ Version] ( https://img.shields.io/npm/v/@reason-react-native/__template__.svg )] ( https://www.npmjs.com/@reason-react-native/__template__ )
3
+ [ ![ Build Status] ( https://github.com/reason-react-native/safe-area-context/workflows/Build/badge.svg )] ( https://github.com/reason-react-native/safe-area-context/actions )
4
+ [ ![ Version] ( https://img.shields.io/npm/v/@reason-react-native/safe-area-context.svg )] ( https://www.npmjs.com/@reason-react-native/safe-area-context )
28
5
[ ![ Chat] ( https://img.shields.io/discord/235176658175262720.svg?logo=discord&colorb=blue )] ( https://reasonml-community.github.io/reason-react-native/discord/ )
29
6
30
7
[ ReasonML] ( https://reasonml.github.io ) /
31
8
[ BuckleScript] ( https://bucklescript.github.io ) bindings for
32
- [ ` @ react-native-community/something ` ] ( https://github.com/react-native-community/something ) .
9
+ [ ` react-native-safe-area-context ` ] ( https://github.com/th3rdwave/ react-native-safe-area-context ) .
33
10
34
- Exposed as ` ReactNativeSomething ` module.
11
+ Exposed as ` ReactNativeSafeAreaContext ` module.
35
12
36
- ` @reason-react-native/__template__ ` X.y._ means it's compatible with
37
- ` @ react-native-community/something ` X.y._
13
+ ` @reason-react-native/safe-area-context ` X.y._ means it's compatible with
14
+ ` react-native-safe-area-context ` X.y._
38
15
39
16
## Installation
40
17
41
18
When
42
- [ ` @ react-native-community/something ` ] ( https://github.com/react-native-community/something )
19
+ [ ` react-native-safe-area-context ` ] ( https://github.com/th3rdwave/ react-native-safe-area-context )
43
20
is properly installed & configured by following their installation instructions,
44
21
you can install the bindings:
45
22
46
23
``` console
47
- npm install @reason-react-native/__template__
24
+ npm install @reason-react-native/safe-area-context
48
25
# or
49
- yarn add @reason-react-native/__template__
26
+ yarn add @reason-react-native/safe-area-context
50
27
```
51
28
52
- ` @reason-react-native/__template__ ` should be added to ` bs-dependencies ` in your
53
- ` bsconfig.json ` . Something like
29
+ ` @reason-react-native/safe-area-context ` should be added to ` bs-dependencies ` in
30
+ your ` bsconfig.json ` . Something like
54
31
55
32
``` diff
56
33
{
@@ -59,7 +36,7 @@ yarn add @reason-react-native/__template__
59
36
"reason-react",
60
37
"reason-react-native",
61
38
// ...
62
- + "@reason-react-native/__template__ "
39
+ + "@reason-react-native/safe-area-context "
63
40
],
64
41
//...
65
42
}
@@ -69,15 +46,76 @@ yarn add @reason-react-native/__template__
69
46
70
47
### Types
71
48
72
- #### ` ReactNativeSomething.t `
49
+ #### ` ReactNativeSafeAreaContext.insets `
73
50
74
- ...
51
+ ``` re
52
+ type insets = {
53
+ .
54
+ "top": float,
55
+ "bottom": float,
56
+ "left": float,
57
+ "right": float,
58
+ };
59
+ ```
75
60
76
61
### Methods
77
62
78
- #### ` ReactNativeSomething.method `
63
+ #### ` <ReactNativeSafeAreaContext.SafeAreaProvider> `
64
+
65
+ ``` re
66
+ open ReactNative;
67
+ open ReactNativeSafeAreaContext;
68
+
69
+ [@react.component]
70
+ let make = () => {
71
+ <SafeAreaProvider >
72
+ // your app...
73
+ <View />
74
+ <SafeAreaProvider >;
75
+ }
76
+ ```
77
+
78
+ #### ` ReactNativeSafeAreaContext.useSafeArea(): insets `
79
+
80
+ ``` re
81
+ open ReactNative;
82
+ open ReactNativeSafeAreaContext;
83
+
84
+ [@react.component]
85
+ let make = () => {
86
+ let insets = useSafeArea();
87
+ <View style=Style.(style(~ paddingTop=insets##top, ())) />;
88
+ }
89
+ ```
90
+
91
+ #### ` <ReactNativeSafeAreaContext.SafeAreaConsumer> `
79
92
80
- ...
93
+ ``` re
94
+ open ReactNative;
95
+ open ReactNativeSafeAreaContext;
96
+
97
+ [@react.component]
98
+ let make = () => {
99
+ <SafeAreaConsumer >
100
+ // your component, handy for classes
101
+ {insets => <View style=Style.(style(~paddingTop=insets##top, ())) />}
102
+ <SafeAreaConsumer >;
103
+ }
104
+ ```
105
+
106
+ #### ` <ReactNativeSafeAreaContext.SafeAreaView> `
107
+
108
+ ``` re
109
+ open ReactNative;
110
+ open ReactNativeSafeAreaContext;
111
+
112
+ [@react.component]
113
+ let make = () => {
114
+ <SafeAreaView >
115
+ <View />
116
+ <SafeAreaView >;
117
+ }
118
+ ```
81
119
82
120
---
83
121
0 commit comments