@@ -16,7 +16,7 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
1616### JSX String  
1717
1818``` rescript 
19- <Text> "Hello, world!"->React.string </Text> 
19+ <Text> { "Hello, world!"->React.string}  </Text> 
2020``` 
2121
2222## JSX Number (int)  
@@ -31,9 +31,9 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
3131
3232``` rescript 
3333<Text> 
34-   42 
34+   { 42 
3535  ->Js.Int.toString 
36-   ->React.string 
36+   ->React.string}  
3737</Text> 
3838``` 
3939
@@ -49,9 +49,9 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
4949
5050``` rescript 
5151<Text> 
52-   4.2 
52+   { 4.2 
5353  ->Js.Float.toString 
54-   ->React.string 
54+   ->React.string}  
5555</Text> 
5656``` 
5757
@@ -62,7 +62,7 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
6262``` javascript 
6363{items .map ((item , i ) => 
6464  < Text  key= {i++ item}> 
65-     item
65+     { item} 
6666  < / Text > 
6767)}
6868``` 
@@ -74,7 +74,7 @@ If you are not familiar with ReScript / Reason, be sure to check [ReScript Overv
7474->Belt.Array.mapWithIndex((item, index) => 
7575  <Text 
7676    key=((index->Js.Int.toString)++item)> 
77-     item->React.string 
77+     { item->React.string}  
7878  </Text> 
7979  ) 
8080->React.array} 
@@ -120,9 +120,9 @@ _Recommended: Assuming `something` is an
120120  something 
121121  ->Belt.Option.map(thing => 
122122    <Text> 
123-       thing 
123+       { thing 
124124      ->Js.String.toUpperCase 
125-       ->React.string 
125+       ->React.string}  
126126    </Text> 
127127  ) 
128128  ->Belt.Option.getWithDefault(React.null) 
@@ -138,9 +138,9 @@ _If you have to work with JavaScript/JSON: Assuming `something` is a JavaScript
138138  ->Js.Nullable.toOption /* convert undefined || string  as option(string) */ 
139139  ->Belt.Option.map(thing => 
140140    <Text> 
141-       thing 
141+       { thing 
142142      ->Js.String.toUpperCase 
143-       ->React.string 
143+       ->React.string}  
144144    </Text> 
145145  ) 
146146  ->Belt.Option.getWithDefault(React.null) 
@@ -179,35 +179,32 @@ console.log(StyleSheet.flatten([styles.container]));
179179### ReScript React Native StyleSheet  
180180
181181``` rescript 
182- open ReactNative; 
182+ open ReactNative 
183+ open ReactNative.Style // this is useful since all units & style methods comes from Style module 
183184
184185let 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|])) 
211208``` 
212209
213210## Concatened styles  
@@ -221,11 +218,13 @@ Js.log(StyleSheet.flatten([|styles##container|]));
221218### Concatened styles  
222219
223220``` rescript 
221+ open ReactNative.Style 
222+ 
224223<View 
225-   style=Style.( array([| 
224+   style={ array([| 
226225    styles##container, 
227226    styles##containerAdditionalStyles 
228-   |]))  
227+   |])}  
229228/> 
230229``` 
231230
@@ -246,12 +245,14 @@ Js.log(StyleSheet.flatten([|styles##container|]));
246245### Optional styles  
247246
248247``` rescript 
248+ open ReactNative.Style 
249+ 
249250<View 
250-   style=Style.( arrayOption([| 
251+   style={ arrayOption([| 
251252    Some(styles##container), 
252253    condition ? Some(styles##containerAdditionalStyles) : None, 
253254    condition2 ? Some(viewStyle(~width=40.->dp, ())) : None, 
254-   |]))  
255+   |])}  
255256/> 
256257``` 
257258
@@ -285,19 +286,20 @@ export default class HelloWorld extends Component {
285286
286287``` rescript 
287288/* App.res */ 
288- open Belt; 
289- open ReactNative; 
289+ open Belt 
290+ open ReactNative 
291+ open ReactNative.Style 
290292
291293[@react.component] 
292294let make = (~name=?) => { 
293295  <View 
294-     style=Style.(  
296+     style={  
295297      viewStyle(~flex=1., ~justifyContent=`center, ~alignItems=`center, ()) 
296-     ) > 
298+     } > 
297299    <Text> 
298300      {("Hello, " ++ name->Option.getWithDefault("world") ++ "!") 
299301       ->React.string} 
300302    </Text> 
301-   </View>;  
302- };  
303+   </View> 
304+ } 
303305``` 
0 commit comments