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> {Int.toString(42)->React.string} </Text>

JSX Number (float)​

JavaScript JSX Number (float)​

<Text>4.2</Text>

JSX Number (float)​

<Text> {Float.toString(4.2)->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
->Array.mapWithIndex((item, index) =>
  <Text key={Int.toString(index) ++ 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
  ->Option.map(thing =>
    <Text> {thing->String.toUpperCase->React.string} </Text>
  )
  ->Option.getOr(React.null)
}

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

{
  something
  ->Nullable.toOption
  ->Option.map(thing =>
    <Text> {thing->String.toUpperCase->React.string} </Text>
  )
  ->Option.getOr(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 Style // units & Style.s come from the Style module

let styles = StyleSheet.create({
  "container": s({
    maxHeight: 600.->dp,
    width: 80.->pct,
    justifyContent: #"flex-start",
    alignItems: #center,
    margin: auto,
  }),
  "cornerThing": s({
    position: #absolute,
    top: 100.->dp,
    right: -20.->dp,
    transform: [rotate(~rotate=4.->deg)],
  }),
  "text": s({textTransform: #uppercase}),
})

Console.log(StyleSheet.flatten([styles["container"]]))

Concatenated styles​

JavaScript Concatenated styles​

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

Concatenated styles​

open ReactNative
open 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
open Style

<View
  style={arrayOption([
    Some(styles["container"]),
    condition ? Some(styles["containerAdditionalStyles"]) : None,
    condition2 ? Some(s({width: 40.->dp})) : None,
  ])}
/>

Hello world​

JavaScript Hello World​

/* App.js */
import React from "react";
import { Text, View } from "react-native";

export default function HelloWorld({ name }) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Hello, {name || "world"}!</Text>
    </View>
  );
}

Hello World​

/* App.res */
open ReactNative
open Style

@react.component
let make = (~name=?) => {
  <View style={s({flex: 1., justifyContent: #center, alignItems: #center})}>
    <Text>
      {("Hello, " ++ name->Option.getOr("world") ++ "!")->React.string}
    </Text>
  </View>
}