Skip to main content

Cheatsheet

If you are not familiar with ReScript / Reason, be sure to check ReScript Overview to learn how to interop with JavaScript

JSX String#

JavaScript JSX String#

<Text>Hello, world!</Text>

JSX String#

<Text> {"Hello, world!"->React.string} </Text>

JSX Number (int)#

JavaScript JSX Number (int)#

<Text>42</Text>

JSX Number (int)#

<Text>
{42
->Js.Int.toString
->React.string}
</Text>

JSX Number (float)#

JavaScript JSX Number (float)#

<Text>4.2</Text>

JSX Number (float)#

<Text>
{4.2
->Js.Float.toString
->React.string}
</Text>

JSX Array (of string)#

JavaScript JSX Array (of string)#

{items.map((item, i) =>
<Text key={i++item}>
{item}
</Text>
)}

JSX Array (of string)#

{items
->Belt.Array.mapWithIndex((item, index) =>
<Text
key=((index->Js.Int.toString)++item)>
{item->React.string}
</Text>
)
->React.array}

JSX conditional string#

JavaScript JSX conditional string#

<Text>{condition && something}</Text>

JSX conditional string#

<Text>
{
condition ? something->React.string : React.null
}
</Text>

JSX optional value#

JavaScript JSX optional string#

Assuming something is a string that can be undefined.

{
something && <Text>{something.toUpperCase()}</Text>;
}

JSX optional string#

Recommended: Assuming something is an optional string.

{
something
->Belt.Option.map(thing =>
<Text>
{thing
->Js.String.toUpperCase
->React.string}
</Text>
)
->Belt.Option.getWithDefault(React.null)
}

If you have to work with JavaScript/JSON: Assuming something is a JavaScript string that can be undefined.

{
something
->Js.Nullable.toOption /* convert undefined || string as option(string) */
->Belt.Option.map(thing =>
<Text>
{thing
->Js.String.toUpperCase
->React.string}
</Text>
)
->Belt.Option.getWithDefault(React.null)
}

React Native StyleSheet#

JavaScript React Native StyleSheet#

import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
maxHeight: 600,
width: 800,
justifyContent: "flex-start",
alignItems: "center",
margin: "auto",
},
cornerThing: {
position: "absolute",
top: 100,
right: -20,
transform: [{ rotate: "4deg" }],
},
text: {
textTransform: "uppercase",
},
});
console.log(StyleSheet.flatten([styles.container]));

ReScript React Native StyleSheet#

open ReactNative
open ReactNative.Style // this is useful since all units & style methods comes from Style module
let styles =
{
"container":
viewStyle(
~maxHeight=600.->dp,
~width=80.->pct,
~justifyContent=`flexStart,
~alignItems=`center,
~margin=auto,
(),
),
"cornerThing":
viewStyle(
~position=`absolute,
~top=100.->dp,
~right=(-20.)->dp,
~transform=[|rotate(~rotate=4.->deg)|],
(),
),
"text": textStyle(~textTransform=`uppercase, ()),
}->StyleSheet.create
Js.log(StyleSheet.flatten([|styles##container|]))

Concatened styles#

JavaScript Concatened styles#

<View style={[styles.container, styles.containerAdditionalStyles]} />

Concatened styles#

open ReactNative.Style
<View
style={array([|
styles##container,
styles##containerAdditionalStyles
|])}
/>

Optional styles#

JavaScript Optional styles#

<View
style={[
styles.container,
condition && styles.containerAdditionalStyles,
condition2 && { width: 40 },
]}
/>

Optional styles#

open ReactNative.Style
<View
style={arrayOption([|
Some(styles##container),
condition ? Some(styles##containerAdditionalStyles) : None,
condition2 ? Some(viewStyle(~width=40.->dp, ())) : None,
|])}
/>

Hello world#

JavaScript Hello World#

/* App.js */
import React, { Component } from "react";
import { Text, View } from "react-native";
export default class HelloWorld extends Component {
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Hello, {this.props.name || "world"}!</Text>
</View>
);
}
}

Hello World#

/* App.res */
open Belt
open ReactNative
open ReactNative.Style
[@react.component]
let make = (~name=?) => {
<View
style={
viewStyle(~flex=1., ~justifyContent=`center, ~alignItems=`center, ())
}>
<Text>
{("Hello, " ++ name->Option.getWithDefault("world") ++ "!")
->React.string}
</Text>
</View>
}