⚠️ Oops! This page doesn't appear to define a type called `_`.

# BuckleScript bindings for React Native

## Getting started

Great that you want to use Reason with React Native! To get everything running are just a couple of steps. Let's assume that you already have a React Native project. Otherwise follow the React Native instructions until you have your app running.

1. Install Bucklescript (the Reason -> JS compiler), Reason-React and `bs-react-native`:

    # substitute yarn with npm if you prefer
    yarn add bs-platform reason-react bs-react-native

1. Create a `re` folder (there will be your Reason code)
2. Create a `bsconfig.json` with the following content file in your project root

    {
        "name": "my-awesome-app",
        "reason": {
            "react-jsx": 2
        },
        "bsc-flags": ["-bs-super-errors"],
        "bs-dependencies": ["bs-react-native", "reason-react"],
        "sources": [{
            "dir": "re"
        }],
        "refmt": 3
    }

1. You are nearly done, the last configuration before we get to the fun stuff. In your `package.json` add to the `"scripts"` section two scripts:

    "scripts": {
      ...
      "build": "bsb -make-world -clean-world",
      "watch": "bsb -make-world -clean-world -w"
    }

1. Now you can build all your (so far nonexsisting) Reason in two modes:
   - `yarn build` performs a single build
   - `yarn watch` enters the watch mode
2. Now we come to the fun stuff! Create a new file `re/app.re` and make it look like this:

    open BsReactNative;

    let app = () =>
      <View style=Style.(style([flex(1.), justifyContent(Center), alignItems(Center)]))>
        <Text value="Reason is awesome!" />
      </View>;

    [@@@ocaml.ppx.context { cookies = [] }]
    open BsReactNative
    let app () =
      ReasonReact.element
        (View.make
           ~style:(let open Style in
                     style [flex 1.; justifyContent Center; alignItems Center])
           [|(ReasonReact.element
                (Text.make
                   ~value:(("Reason is awesome!")[@reason.raw_literal
                                                   "Reason is awesome!"])
                   [||]))|])

and start the watcher with `yarn run watch` if you haven't done it yet.

1. We are nearly done! We now have to adopt the `index.ios.js` / `index.android.js` to look like this

    import { app } from "./lib/js/re/app.js";
    import React from "react";
    import {
      AppRegistry
    } from 'react-native';

    AppRegistry.registerComponent('MyAwesomeProject', () => app);

Note: Make sure that the first argument to `AppRegistry.registerComponent` is your correct project name.

If you are using `react-native-scripts`, then you will need to modify `App.js` to be like this

    import { app } from "./lib/js/re/app.js";

    export default app;

1. Now go to a new tab and start your app with `react-native run-ios` or `react-native run-android`.

2. Great you are all set up! Check the source of `bs-react-native` to find out more about the implemented APIs and Components. If you get stuck just ask on our Discord Server! Happy Hacking!

Here are some more things which will be probably useful for you:

- Reason-React Documentation
- Bucklescript Manual

## Can I really build my React Native app with Reason?

Yes! Check out the Seattle JS Conf App for a real world App written with Reason.

### Disclaimer

There are some components and APIs missing. You can find an overview of the implemented components and APIs here. Contributions of Components and APIs are very welcome! The bindings are targeted to React Native 0.46+.

## Style

Since we have a proper type system we can make styles typesafe! Therefore styles are a little bit different declared than in JavaScript:

    open BsReactNative;

    /* inline styles */
    <View
      style=(
        Style.style([
          Style.flexDirection(Column),
          Style.backgroundColor("#6698FF"),
          Style.marginTop(Pt(5.))
        ])
      )
    />;

    /* inline styles with a local open */
    <View style=Style.(style([flexDirection(Column), backgroundColor("#6698FF"), marginTop(Pt(5.))])) />;

    /* StyleSheets with a local open */
    let styles =
      StyleSheet.create(
        Style.({"wrapper": style([flexDirection(Column), backgroundColor("#6698FF"), marginTop(Pt(5.))])})
      );

    <View style=styles##wrapper />;

Type Error: File "", line 8, characters 28-37: Error: This expression has type string but an expression was expected of type BsReactNative.Style.string_interpolated = BsReactNative.Style.string_interpolated

    [@@@ocaml.ppx.context { cookies = [] }]
    open BsReactNative
    let _ =
      ReasonReact.element
        (View.make
           ~style:(Style.style
                     [Style.flexDirection Column;
                     Style.backgroundColor
                       (("#6698FF")[@reason.raw_literal "#6698FF"]);
                     Style.marginTop ((Pt (5.))[@explicit_arity ])]) [||])
    let _ =
      ReasonReact.element
        (View.make
           ~style:(let open Style in
                     style
                       [flexDirection Column;
                       backgroundColor
                         (("#6698FF")[@reason.raw_literal "#6698FF"]);
                       marginTop ((Pt (5.))[@explicit_arity ])]) [||])
    let styles =
      StyleSheet.create
        (let open Style in
           [%bs.obj
             {
               wrapper =
                 (style
                    [flexDirection Column;
                    backgroundColor (("#6698FF")[@reason.raw_literal "#6698FF"]);
                    marginTop ((Pt (5.))[@explicit_arity ])])
             }])
    let _ = ReasonReact.element (View.make ~style:(## styles wrapper) [||])

Parse Error: File "", line 31, characters 50-56: Error: Syntax error: ')' expected File "", line 31, characters 46-47: Error: This '(' might be unmatched

### Animations

    open BsReactNative;

    [...]
    type state = {animatedValue: Animated.Value.t};
    let component = ReasonReact.reducerComponent("Example");

    initialState: () => {animatedValue: Animated.Value.create((-100.))},

    /* Start animation in method */
    Animated.CompositeAnimation.start(
      Animated.Timing.animate(
        ~value=state.animatedValue,
        ~toValue=`raw(0.),
        ()
      ),
      ()
    );
    [...]

    /* Styles with an animated value */

    <Animated.View
      style=Style.(style([flexDirection(Column), backgroundColor("#6698FF"), top(Animated(state.animatedValue))]))
      )
    />;

Parse Error: File "", line 3, characters 4-5: Error: 2843: <UNKNOWN SYNTAX ERROR>

    Unable to refmt code with a syntax error

## Troubleshooting

### `Native module cannot be null` with create-react-native-app

Currently BuckleScript can generate `import * as ReactNative from 'react-native'`, which breaks create-react-native-app. To get around this you can force BuckleScript to generate CommonJS modules instead of ES Modules using:

    /* bsconfig.json */
    {
      /* ... */
      "package-specs": [
        {
          "module": "commonjs"
        }
      ]
    }