Building blocks don’t exist.

Will a manufacture facility keep “building blocks” of its production that will last forever?

The physical Building Blocks don’t exist.

The real Building Blocks are the team and the knowledge to redo and do better.

Nothing lasts in the physical world, but knowledge gain as a team during solving real world problems will last forever.

ReForm Next is bringing three of the most wanted features:

  1. Type safe multi type values support;
  2. Type safe array fields (or nested forms if you look from another perspective);
  3. And a new React Hook API!

A quick look on how it looks like:

Image for post
Image for post

The new ReForm capabilities are just a thing because we could crack the right lenses API and GADTs usage internally to allow the multi-type interface (handleChange, getStateForField, etc.). If you want read more about GADTs I highly recommend this amazing interactive article …

Image for post
Image for post
A picture of pain and suffer

Android changed the security policy for HTTP communication requiring you to connect to HTTPS by default. Though it’s possible to configure your localhost to serve HTTPS, let’s do it in the easier way:

Just a reminder that this was already included in the default boilerplate of the latest React Native release so if you are starting fresh this is not necessary

If you are not using flavors

  1. Create a debug/res/xml/network_security_config.xml with the following content:
<?xml version="1.0" encoding="utf-8"?>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>

2. Create a debug/AndroidManifest.xml with

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android=""
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/><application tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" android:networkSecurityConfig="@xml/network_security_config" /> </manifest>…

Image for post
Image for post
Debora Cardenas (

Edit: updated for JSX3 on June 5 2019

How to use ReasonML parametric types on a ReasonReact component

Suppose you have the following code (we are using genType to make our life easier here btw — we’ll post about it):

type state = {data: array(string)};
type renderItemBag = {
item: string,
index: int,
move: unit => unit,
moveEnd: unit => unit,
isActive: bool,
[@bs.module "react-native-draggable-flatlist"]
external make:
~data: array(string),
~keyExtractor: string => string,
~scrollPercent: int,
~renderItem: renderItemBag => React.reactElement,
~onMoveEnd: state => unit,
) =>
React.element =
data=[|"fubá", "corn", "cheese", "pork"|]

With this code you limit your…

Image for post
Image for post

The article presumes you are familiar a bit into ReasonML and heard about Belt. If you have any other questions leave them in the comments below!

If you are not aware about, the `option(‘a)` type is for handling values that are possibly not there. It’s like JS `null` and `undefined` but way better.

Transforming optionals

Most of the time we are handling optionals from reason-apollo responses so we’ll be dealing with JS types in ReasonML instead of records. Here, consider the type:

type user = {
"id": string,
"products": option(array({ . "name": string }))
type result = { . "data"…

Image for post
Image for post
Here’s a demo with along with

After so long, you can finally compose your Render Props in ReasonML without getting a giant nested callback hell.

Reusability is a must in React world, after mixins were considered harmful two big approaches got in to the scene: Render Props and HOCs.

Both created a lot of discussion about their limitations in the community. Render Props greatly avoid indirection but fail a bit in composability — although you can use something like Composeyou can’t still have a more explicit way to pass the props each Render Props take or not render another Render Props before you get a value from a previous one without adding some more boilerplate –and function HOCs have a great composability but fail in…

Image for post
Image for post
ReForm short demo, check the source out at

Forms are really complex beasts and can scale to total chaos really quickly if you don’t know how to manage all those field states and validations altogether. The nicest solution in React world is to lift the state of the form to some other component, which will take care, protect and give love to your form state.

In ReactJS there is a nice amount of solutions for dealing with form data management (Formik, Redux Forms, etc).

One of the first things I wanted to try to unleash the power of Reason’s type system was in forms, that’s why we developed…

Image for post
Image for post
The usage we are looking for

Due to the ReasonML restrictions there is no direct interop between JS HOCs to Reason. Mainly because we can’t get a bag of props and pass to the other enhanced component like we do in JS. We need to be always 100% explicit about we are doing Reason, and that is a good thing about it.

I do not want to bring up the HOCs x Children as Function x Render Prop flame war — though I admit myself being a HOC fan 😛.

Why Reason?

Me personally, I enjoy Reason and wanted to try it out in the first place because…

If you haven’t heard yet of recompose or haven’t tried yet, it’s time! It gives superpowers to stateless components in React by providing a sweet High Order Components (HoCs) API for managing states, component handlers etc. The benefits of using this approach is having a more clear separation of concerns of your component logic and getting more reusable abstraction.

Why even bother using it?

Functional Programming is all the cool guys talk about these days. Among other benefits of FP, the expressiveness of function composition and pure functions are probably my favorites. Why? Because they truly provide a way of writing uncoupled and untangled code…

Gabriel Rubens Abreu

Developer and Head of Tech at Astrocoders

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store