@@ -16,7 +16,7 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
16
16
### JSX String
17
17
18
18
``` rescript
19
- <Text> "Hello, world!"->React.string </Text>
19
+ <Text> { "Hello, world!"->React.string} </Text>
20
20
```
21
21
22
22
## JSX Number (int)
@@ -31,9 +31,9 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
31
31
32
32
``` rescript
33
33
<Text>
34
- 42
34
+ { 42
35
35
->Js.Int.toString
36
- ->React.string
36
+ ->React.string}
37
37
</Text>
38
38
```
39
39
@@ -49,9 +49,9 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
49
49
50
50
``` rescript
51
51
<Text>
52
- 4.2
52
+ { 4.2
53
53
->Js.Float.toString
54
- ->React.string
54
+ ->React.string}
55
55
</Text>
56
56
```
57
57
@@ -62,7 +62,7 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
62
62
``` javascript
63
63
{items .map ((item , i ) =>
64
64
< Text key= {i++ item}>
65
- item
65
+ { item}
66
66
< / Text >
67
67
)}
68
68
```
@@ -74,7 +74,7 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
74
74
->Belt.Array.mapWithIndex((item, index) =>
75
75
<Text
76
76
key=((index->Js.Int.toString)++item)>
77
- item->React.string
77
+ { item->React.string}
78
78
</Text>
79
79
)
80
80
->React.array}
@@ -120,9 +120,9 @@ _Recommended: Assuming `something` is an
120
120
something
121
121
->Belt.Option.map(thing =>
122
122
<Text>
123
- thing
123
+ { thing
124
124
->Js.String.toUpperCase
125
- ->React.string
125
+ ->React.string}
126
126
</Text>
127
127
)
128
128
->Belt.Option.getWithDefault(React.null)
@@ -138,9 +138,9 @@ _If you have to work with JavaScript/JSON: Assuming `something` is a JavaScript
138
138
->Js.Nullable.toOption /* convert undefined || string as option(string) */
139
139
->Belt.Option.map(thing =>
140
140
<Text>
141
- thing
141
+ { thing
142
142
->Js.String.toUpperCase
143
- ->React.string
143
+ ->React.string}
144
144
</Text>
145
145
)
146
146
->Belt.Option.getWithDefault(React.null)
@@ -179,35 +179,32 @@ console.log(StyleSheet.flatten([styles.container]));
179
179
### ReScript React Native StyleSheet
180
180
181
181
``` rescript
182
- open ReactNative;
182
+ open ReactNative
183
+ open ReactNative.Style // this is useful since all units & style methods comes from Style module
183
184
184
185
let styles =
185
- Style.(
186
- /* = open Style; just between ()*/
187
- /* this is useful since all units & style methods comes from Style module */
188
- StyleSheet.create({
189
- "container":
190
- viewStyle(
191
- ~maxHeight=600.->dp,
192
- ~width=80.->pct,
193
- ~justifyContent=`flexStart,
194
- ~alignItems=`center,
195
- ~margin=auto,
196
- (),
197
- ),
198
- "cornerThing":
199
- viewStyle(
200
- ~position=`absolute,
201
- ~top=100.->dp,
202
- ~right=(-20.)->dp,
203
- ~transform=[|rotate(~rotate=4.->deg)|],
204
- (),
205
- ),
206
- "text": textStyle(~textTransform=`uppercase, ()),
207
- })
208
- );
209
-
210
- Js.log(StyleSheet.flatten([|styles##container|]));
186
+ {
187
+ "container":
188
+ viewStyle(
189
+ ~maxHeight=600.->dp,
190
+ ~width=80.->pct,
191
+ ~justifyContent=`flexStart,
192
+ ~alignItems=`center,
193
+ ~margin=auto,
194
+ (),
195
+ ),
196
+ "cornerThing":
197
+ viewStyle(
198
+ ~position=`absolute,
199
+ ~top=100.->dp,
200
+ ~right=(-20.)->dp,
201
+ ~transform=[|rotate(~rotate=4.->deg)|],
202
+ (),
203
+ ),
204
+ "text": textStyle(~textTransform=`uppercase, ()),
205
+ }->StyleSheet.create
206
+
207
+ Js.log(StyleSheet.flatten([|styles##container|]))
211
208
```
212
209
213
210
## Concatened styles
@@ -221,11 +218,13 @@ Js.log(StyleSheet.flatten([|styles##container|]));
221
218
### Concatened styles
222
219
223
220
``` rescript
221
+ open ReactNative.Style
222
+
224
223
<View
225
- style=Style.( array([|
224
+ style={ array([|
226
225
styles##container,
227
226
styles##containerAdditionalStyles
228
- |]))
227
+ |])}
229
228
/>
230
229
```
231
230
@@ -246,12 +245,14 @@ Js.log(StyleSheet.flatten([|styles##container|]));
246
245
### Optional styles
247
246
248
247
``` rescript
248
+ open ReactNative.Style
249
+
249
250
<View
250
- style=Style.( arrayOption([|
251
+ style={ arrayOption([|
251
252
Some(styles##container),
252
253
condition ? Some(styles##containerAdditionalStyles) : None,
253
254
condition2 ? Some(viewStyle(~width=40.->dp, ())) : None,
254
- |]))
255
+ |])}
255
256
/>
256
257
```
257
258
@@ -285,19 +286,20 @@ export default class HelloWorld extends Component {
285
286
286
287
``` rescript
287
288
/* App.res */
288
- open Belt;
289
- open ReactNative;
289
+ open Belt
290
+ open ReactNative
291
+ open ReactNative.Style
290
292
291
293
[@react.component]
292
294
let make = (~name=?) => {
293
295
<View
294
- style=Style.(
296
+ style={
295
297
viewStyle(~flex=1., ~justifyContent=`center, ~alignItems=`center, ())
296
- ) >
298
+ } >
297
299
<Text>
298
300
{("Hello, " ++ name->Option.getWithDefault("world") ++ "!")
299
301
->React.string}
300
302
</Text>
301
- </View>;
302
- };
303
+ </View>
304
+ }
303
305
```
0 commit comments